Project Overview
A wellness app designed to help those who have trouble managing time for their social life and relationships.
Challenge: Solve for a user painpoint in health and wellness
Roles: UX Researcher, UI Designer, Interaction Designer, Brand Developer
Timeline: 2 Week Sprint
Health and Wellness Topic: Time Management
1. User Interviews
In order to understand users’ frustrations with time management, I conducted a total of 5 one-on-one interviews (lasted between 40-45 mins) to gather some rich, qualitative data. I then organized all the data into an affinity map to pinpoint users’ main frustrations.
Interview Takeaways:
Participants were between the ages of 22-24.
Majority of participants were Hispanic, Female, and Reside in Miami, FL.
Users reported feeling pressure to work after hours to get ahead in their careers.
Pains:
60% have trouble prioritizing social life, scheduling work/life boundaries.
60% don’t know how to live in the moment.
40% have lost meaningful relationships by neglecting time for them.
Digital back and forth communication for planning is too time consuming.
Goals:
To find a more consistent way to manage time with loved ones.
2. Competitive Feature Analysis
During interviews, I created a competitive feature analysis to see what other time management apps offered their users. As I was building an application from the ground up, this helped pinpoint which features would be useful to incorporate into my design.
3. User Persona
I then created a user persona. This tool was helpful in helping me empathize with the users I would be designing for.
Motivated Marissa
An architect who started working at a firm 3 months ago.
Feels pressure to advance in her career and sacrifices her free time in order to get ahead on projects.
Has poor time management in her social life and maintains an unhealthy work/life balance.
Has developed depression as she does not spend as much time with loved ones as she’d like to.
4. Ideation
I produced 3 How Might We statements and ideated ideas for each. I then utilized the MoSCoW method and focused on the Must Haves and Should haves in order to create my Minimum Viable Product (MVP).
HMW: How might we help people manage their time so that they can maintain meaningful relationships?
5. User Flow
Before wireframing, I created a user flow in order to help plan my screens. Due to time constraints, I focused on the happy flow of a user blocking out dates on a calendar, getting a match for an outing, and then adding a memory once that outing has ended.
6. Wireframes
Lo-Fis User Feedback: The calendar should function through scrolling rather than swiping (4th screen), a pop up should appear on the hourly screen whether a user taps the plus sign or not (5th screen), “Done” should be moved to the bottom of the screen (6th screen), instructions fom last screen should be removed and there should be an option to start a chat (9th screen), change “Add” to be more specific (14th screen).
Mid-Fis User Feedback: Drop down menu for times on the overlay pop up make the screen look too crowded, give confirmation for specific date and time for a match, provide the ability for users to escape/cancel a match on the match screen as well (in case both parties are temporarily on bad terms).
With the user flow serving as a guide, I used the Crazy 8’s method in order to sketch out designs before arriving to the lo-fi wireframes shown below. Wireframes were tested with 5 users and feedback was implemented into each redesign. Testing revealed that users understood the flow easily.
7. MoodBoard & Style Tile
I created a moodboard to help ideate visually the feeling I wanted to convey on the app. I then tested the moodboard with 5 users. Feedback from testing showed that users were able to identify the brand attributes I ideated for Jibe
After testing, I incorporated into a style tile in order to flesh out ideas I had for Jibe’s branding. This included a logo I created, icons, font styles, buttons, a color palette, and images.
8. Hi-Fis
Responsive Design
For this project, we were also asked to design one of our screens for tablet and desktop to take into account how our design would change for various screen sizes. Below are my designs for both iPad and Macbook.
To Jibe means to align, fit, or be in accord with something. When using Jibe, users are able to block out times of the week after work that they would like to dedicate towards socializing within the app’s calendar. On Jibe, users can befriend others to find out if their free time will match with another user. When a match is found, a surprise hangout activity that falls within the shared time frame is scheduled for them. Activities chosen for hangouts are randomly selected from a list of hobbies both users select when signing up on the app. Aside form this users, are also able to save memories of hangouts within the app (almost like a diary that’s only visible to both parties who matched).
Jibe Benefits:
Blocking out times helps set boundaries users could commit to and be reminded of when feeling pressure to work more.
No need for back and forth communication for planning.
On days users receive a match, they know to dedicate their free time to social activities. If a user does not receive a match up to 10 hours before their blocked time, they would know they could dedicate it towards getting ahead on projects.
The spontaneity of not knowing who a user may match which, or which activity they may do together, helps them live in the moment.
Happy flow part 1: Click on notification to block dates, navigate to the calendar, select September 19th, block out 7pm-8pm, receive feedback of blocked time from screen (blocked time highlighted in blue), click the chevron and receive feedback from the calendar (bold pink font = days with blocked times, dot under bold pink font = days with blocked times that received a match), wait for a match.
Happy flow part 2: Click on match notification, see match details, tap pulsing logo to find out which activity will be selected, click “Back to home,” view new match when scrolling to bottom of screen, receive notification day of hangout (September 19th).
Happy flow part 3: (App tracks when user has arrived home from their planned hangout) Click on pending memory notification to open app, select pending memory with Jonathan, look at form for adding a memory, scroll down for an example of what a posted memory looks like, swipe left on posted memory for Sep 18 to see what memory the other person added for your hangout (only the user and the person they matched with can see the hangout memory), add memory.
Figma Prototype
Below is the prototype I created with all three parts of my happy flow. Feel free to check it out and discover all the microinteractions I’ve included!!