full@3x.png
MacBook Mockup for Waveless
Iphone mockup for waveless

The modern wellness app for the working woman.

Team: 3 designers (2 UX, 1 UI)

Deliverables: Style tile, mockups, prototype

Project Goal: Create a wellness app for working women to cope with stress.

My Role: UI designer

Tools: Paper + Pencil, Sketch, Figma, Usability Hub, Trello

Introductions

Context

52%

of women report having a heavy workload leading to stress in the workplace.

66%

of women report feeling emotionally tired when stressed, interfering with their productivity.

Our research showed the 2 most common coping mechanisms women use are:

exprssive speech bubble

Venting

Headphones

Listening to music

My team set out to provide a wellness app to help women cope with workplace stress, in order to increase productivity and happiness.

PROJECT GOAL

Women Venting

Create a trusted community for women to cope with stress in the workplace to be more productive and have a better quality of life.

Active Listening

Empathizing with users

I was brought onto this project in it’s later stages as the sole UI designer, my primary focus was finding a way to address the user’s problems through layout, palette, imagery, and tone of voice.

As a UI designer, approaching this project I wanted to take some time to familiarize myself with our users and their pain points. Only through understanding and empathizing with the users would I be able to craft a brand that felt comfortable and appealing to our users.

I frequently referred to the primary user persona and user journey map created by the UX team to empathize with users when making design decisions.

Persona Natalia Woods

Primary persona by UX team

User Journey Map Natalia Woods

User journey map by UX team

Focusing the project

ARE WE REALLY HELPING

When I received the wireframes, it was clear to me the project had suffered from scope creep. The number of features was overwhelming:

Community with friends, articles, and blog posts

Journaling and meditation

Activities to save and book

Messaging

Old Site Map.png

Original site map by UX team

I called an emergency meeting to collaborate with the UX team to refocus the project. We compared the site map with the user research, focusing just on our primary persona, and how we could best solve the problem statement:

"Natalia is feeling overwhelmed at work because she’s had a negative interaction with one of her coworkers and it's interfering with her ability to focus on her work. She needs a way to be able to release her stress with a healthy outlet so she can have a better quality of life."

We started by eliminating meditation and journaling as the research showed these weren’t often used. Interviews actually showed many women tried meditation but they found it impractical and ineffective for workplace stress.

Throughout the process we kept coming back to the community aspect. Our users are social and prefer to talk to their friends to cope; however, building a social media platform is incredibly involved and not in the scope or budget of our project. We brainstormed ways to create a feeling of community and support, that would fit within the project scope. Together, we decided to focus on a single solution: creating a space for women to vent with others about their stress. Survey results confirm venting to be the most popular coping mechanism for women in the workplace.

Women need a way to connect with others during the work day, when many of their friends may be unavailable. This meant connecting with a stranger, but how could we make users feel safe sharing their problems with someone they don’t know?

By using an anonymous chat, we could connect users based on the category of their current problem, giving commonality and creating a secure space for users to share their issues.

The site map was pulled back to a MVP with 2 features that worked in tandem. Users can record how they are feeling, and be matched to other women experiencing a similar issue to vent and get support.

MVP Site Map.png

Site map for MVP created in collaboration with UX team

offering help

Solving problems visually

WHAT DO OUR USERS NEED

In order to create a space where women felt comfortable sharing their problems with others, I wanted to craft a brand that was trustworthy, calming, and approachable. I felt a style tile was the best way to visualize the brand holistically.

Natalia is overwhelmed and needs a safe space to relax.

Soft pastel palette using primarily cool colors to create a calming atmosphere.

Natalia is social and feels a lack of support at work.

Friendly tone of voice, sounds like you are talking to a supportive friend.

Natalia feels a lack of organization at work.

Utilize white space and visual groupings to create a feeling of organization and avoid clutter.

Style Tile

Style tile by me

Getting feedback and iterating on designs

Once a brand was established, I created mockups from the mid-fidelity wireframes my UX team provided.

Checkin.flow.1.png

First page of check-in flow

Checkin.flow.4.png

Screen to connect with users after check-in

Messages.png

Anonymous animal avatars change with each connection.

Inbox

HOW DO WE REDUCE STRESS

I conducted some visual design tests on my mockups to determine if the colors, layout and wording for the brand was effective or distracting for the user.

 

A 5-second test conducted through Usability Hub confirmed there was a strong visual hierarchy and a clean layout.

In just 5 seconds of viewing the page:

100%

of users were able to identify page content.

87%

of users were able to identify the primary action.

The first-click test conducted through Usability Hub showed there were some definite improvements to be made with CTAs.

First Click test

Users were confused where to click to be matched with another user to vent.

I took the data from the visual design tests, as well as usability test results from the UX team, to improve my designs.

Macbook mockup for waveless
Iphone mockup for waveless

Text links converted to clear buttons for important actions.

Macbook mockup for waveless
Iphone mockup for wavelss

CTA button color changed from mint to pink to contrast and differentiate actionable elements.

Navigation bar changed from pink to mint to create a more cohesive design and allow pink CTAs to contrast.

the prototype

Waveless-Mobile.gif

Click to go to the interactive prototype

Lessons learned

Focus the project – focus the user

Strategically select a single pain point to address with each project. Not only will this allow you to perfect that one feature, it helps keep users focused; too many options are overwhelming.

Take the time to connect with your teammates

Always, always take the time to chat, joke and laugh with your team. Not only will it make work more enjoyable, it helps build mutual trust and respect for your teammates, which really helps when you have to suggest a complete structural redesign.

Meet my amazing UX team: Claudia Geuvara and Syeda Jafari.

Lets get in touch

  • Email Icon
  • LinkedIn Logo
  • Medium Logo
  • behancelogoincircularsocialinterfacebutt

©2020 by kendrajenel.