From Sketches to Responsive Design

My Role: UX Designer | Duration: 2 Week | Project Status: Concept

Care circle, shining a light on existing problems within the health industry specifically those who are caretakers or those who take cares of others.

Scope of Work

We were tasked with creating a mobile responsive web design that targets problem solving in the health space of daily activities. We as user experience designers need to make sure the product is relative to creating a better experience for the user.

Research/Discovery

The team began with an internal brainstorm, discussing the topics and ideas that first come to mind when we think about health. We utilized a Topic Map, to understand all of our possibilities within the health category and soon after created Assumptions, and Problem Statement, which would be proved right or wrong during the research phase.

Problem Space Statement

Hypothesis:
Users currently have an overwhelming amount of options and information to learn/track when it comes to food choices, supplements, fitness plans and mental healthcare methods. How can we condense and advise users with information that aligns with their healthcare choices and needs?

Initial Problem Statement:
How might we help users quickly track what they utilize in regards to their health needs?

Research » Synthesis

Once we conducted 5+ interviews, we began to transcribe and make sense of what we heard throughout our different conversations. It is our job as UX designers, to find insights within the conversations and point out differences and similarities within the participants. In order to retrieve insights and organize the data gathered, we utilized affinity mapping. Through the questions asked, similar attitudes were generated and most participants want guidance when it comes to taking care of the mind, body and soul.

INSIGHTS

• Almost all interviewees mentioned keeping a step count. They incorporate movements throughout their busy day however they could.
• Had consciousness about eating to get proper nutrition from their food and for their underlying health conditions.Users know that they will be talking to many people at a time and enjoy when things go smoothly.
• A majority of our interviewees talked not only about taking care of their own health but taking care of others.
• Users are goal focused when creating their health routines.

Persona

A Persona incorporates goals, needs, frustrations, and pain points in its makeup. Formulating these fundamental behavioral characteristics were crucial to recognizing what solutions we needed to target when creating our product. Similarly, it also encompassed key demographic and biographical information to understand the primary audience that would ultimately use our product.

• From our persona, we can see that our target audience needs a way to remind themselves and others to meet certain health criteria.
• We can also see our users need to know what supplemental nutrition exists in foods and not just medicine.
• Our target audience needs a way to track and manage her and someone else’s diet and fitness goals.
• Our target audience currently uses a large group of apps to track diet and fitness.

Revised Problem Statement

INSIGHT: People need more efficient ways to take care for themselves and others.
PERSONA: Theresa wants to be held accountable for both her own health as well as her mother’s under one platform.
PROBLEM: Theresa wants advice and information tailored uniquely to both her and her moms health needs. Using a variety of technology is not giving Theresa an overall picture of how to effectively maintain their routines.
GOAL: To guide users through their daily routine with timely advice and information tailored to their individual health composite.

How might we help users stay accountable to themselves and for others in regards to their specific health goals throughout the day?

RESEARCH » DESIGN

I don’t have much time between things. I have to do to check all the different resources I use for health tracking. » People need more efficient ways to take care for themselves and others.

Meet Care circle

Design Studio: Sketching + Concepting to Mid-Fi

After zooming out and taking in everything that the group came up with during Design Studio it was time to dig right into Figma. We had all focused on the idea of having access to multiple account (what we refer to as accountability) and making it goal oriented. We began by bringing in each of our designs and ultimately collaborating to create what we believe is the best experience for the user making sure that we are solving the problem.

Findings + Themes + Insights + Takeaways
Using Figma, we began by creating the design of the Mobile Browser, starting by blocking out the space and not focusing on the details. Taking into account our features as well as our Persona, Therese, we assure that the design runs seamlessly. Utilizing the prototype tool we are able to successfully create a working mockup. Please see link below.

• We flushed out our converged ideas in design studio and came to a mid-fi clickable prototype. Designing the prototype in detail confirmed the ideas we thought would be essential items to design but were too high in effort to achieve given the am ount of time allotted. These included goal metrics for health conditions and other goals not defined by frequency. In the meal section, we found that being able to send out recommendations to partners or teams, rather than just the user, would require more effort.
• Fitness goal comparators, meal sharing suggestions, social trending elements that would unite caretaker users with their loved ones in common health activities became the framework for the product.
• To get the product flushed out, the team focused on items such as gearing the health routine towards a goal, giving the user a sense of time and speaking to the user.

Testing

We set out to test our mid-fi wireframes by turning them into a clickable prototype. We found 5 users to run some usability testing, where we were able to look at how a user interacted with the design and flow of the browser. We found out that the users were immediately drawn to the top navigation bar, and that they where unaware of who was who when it came to the account page and overall comparisons.

Findings + Themes + Insights + Takeaways
We found that users wanted to immediately click the plus button in the main navigation over the giant one on the main screen; they believe it seemed like a background instead of a clickable option.

• We noticed that users were confused on who is who overall.
• Users noted they would like to grab and drag items from one plate to another in the Eat page to easily add ingredients to their plate.
• Many users expressed they want to use the hamburger menu to complete tasks rather than options on the screen.
• Users utilized home screen to answer specific tasks, instead of individual pages we had categorized for it.

Hi-Fi Fidelity Mobile

Building on the evolution of our mid-fi prototype we brought the product to its full fledged visual design. Adding in full color, typography, imagery, refined copy and most of the functionality, we arrived at the late stages of design development. A high fidelity mobile web design adapts to the screen size of a mobile device.

Findings + Themes + Insights + Takeaways
Pale sea foam green (4) for the ground color with black (7) text proved accessible. A darker sea foam (5) navigation header contrasted with white (1) icons provided visual depth.

• Pops of yellow (3) were reserved for tracking daily metrics. We also used a gradient orange (2) for text and add button graphics to grab the users attention and connect with them.
• High resolution photos provided clear visibility of which profile was which. On the home page the muted opacity of the profile picture allows the metrics atop to steal the spotlight. Upon swipe the image darkens to full color and lets the metrics read in the adjacent space.
• Giving the user a sense of time against goal tracking, we used high resolution images and gradient sky fill that would correspond with the time functionality of the mobile device.

Hi-Fi Fidelity Desktop

We were tasked to create a Web Responsive Design so we began with our mobile. Once we had ideated the full fledged visual design of the mobile we were ready to begin building the hi-fidelity desktop web design. Having to think on how we were going to utilize all the extra screen space.

• Navigational bars work differently than they do in mobile, therefore we took advantage of this opportunity by making it a stationary display off the left of the screen.
• We wanted to assure to keep the same look and feel from mobile to desktop in a seamless way so the user finds everything where it should be.
• With the extra space the desktop provides, we were able to add trending elements to expand the users health community outreach.

Testing

After testing the hi-fidelity prototype on a new group of potential users, the results in comparison to the first, completely change for the better. All the users were able to successfully accomplish the task, regardless of how many clicks it took them to get there. Providing multiple ways of access, adding color and rewording some buttons was the ultimate recipe for success. All in all, the users found found the web browser accessible and findable.

Findings + Themes + Insights + Takeaways
By visually identifying the profiles, users had an 80% success rating in adding a member to their account. This was a 167% increase from the first round of testing. Providing alternate hamburger menu pathways and clearly worded text with directions boasted the score.

• Adding high resolution plate images in the meal sharing section improved the success rate to 60% which was a 20% increase from the first testing round. Hover states and colorful text and add buttons helped move the task along.
• The success rating fell in the third task to 70%, a 22% decrease from the first round. The human icon might have proved confusing for a “total body” page. People often thought of it as a profile section rather than total body metric scales.

Final Recommendations

1. Providing more food related icons or imagery in the meal sharing section could help boost the usability score even further.
2. A more appropriate fitness icon would be in order.
3. We look forward to providing further ways to motivate users in the fitness area. With more development time to flush out the product we would help users find common workouts appropriate to their circle’s varying health goals and conditions.
4. In conclusion, we look forward to working with the development team to take the Care circle mock-up to a real working site.

WRITTEN BY

Clara Perez