Hi, I am Danni! I am a User Experience Designer.
I design with Curiosity, Empathy and Attention to Detail.

Health Pal: Web Application Design

Story of Health Pal
People always associate technology with unhealthy lifestyles such as long working hours in front of computers, fewer interactions with people surround us.
As the final project of Course HCDE 518 A: User-Centered Design, our team challenged ourselves to design an web application that motivates and empowers healthy lifestyle.
We started out by asking questions such as:
“Is unhealthy lifestyle simply a result from the lack of related knowledge?”
“What prevents people from living healthier when they are well aware of the benefits?”

User Research

We started by interviewing our friends, coworkers. We pooled our findings together with post-it notes and affinity diagrams, generated insight from the pattern emerged. We also did stakeholder analysis to understand the bigger picture and conducted competitive analysis to have an idea of current product landscape. Finally we built persona to enlight our design process.

During our early stage research, we found that:

  • most people we interviewed were well aware of the benefits of living healthy, and the most common reason (according to them) for not acting upon their knowledge usually relates to the lack of time.
  • there are already some products in the market that aim at helping people live healthier. But most of them are either designed for big companies (e.g.: Redbrick) or designed on individual level (Fitbit etc.).
  • Small business workers, although enjoy much more flexibility compared to employees in large companies, usually have more stress in their work.
Screen Shot 2013-12-30 at 12.23.17 AM
Health Pal User Persona

Our Refined Design Question:

How do we engage small business office workers to be healthier?
Having realized our time limitation (<= 5 weeks), we adjusted the scope of our design question and decided to focus on small business office workers after user research.

Ideation

Health Pal Design Process
I made this illustration to explain our ideation process:

  • We divided our big design question into 5 smaller questions.
  • We brainstormed ideas based on each questions, and pooled our ideas together using Affinity Diagram.
  • The Affinity Diagram helped us distill three features that considered important by all of us. We used them as the starting point for our sketching.

Lo-fi Prototyping & User Testing

Each of us made 20 sketches based on the 3 features we came up with. We presented our sketches in front of the team, selected those we like best, and made our very first lo-fi prototype.

We brought our paper prototype to Northgate Mall, a pretty busy mall in Seattle, and recruited 4 Volunteers on spot. We assigned them with our pre-designed tasks, and observed when they interacted with our paper prototype.

We were inspired by the excitement expressed by our volunteers. Breakdowns and confusions during the usability testing made us rethink about our concept and our UI.

We summarized our findings after the usability testing, and decided to move our paper prototype to Balsamiq to facilitate better communication of the pain points and potential improvements within the team.

Health Pal Lo-fi
Screen Shot 2014-05-06 at 11.46.01 PM

Hi-fi Prototype in Axure (Live Version)

Health Pal Hi-fi

Final Thoughts

My Contribution :

  • conducted competitive analysis and 1 user interview
  • sketched out 10 ideas, and presented them to the team
  • communicated suggestions from first round usability testing to the team using Balsamiq
  • made Hi-fi Axure prototype together with 2 other team members
  • presented our ideation process to the class
What I have learned from this project:

  • It is important to understand the motivation behind people’s behavior in order to facilitate behavioral change.
  • The design process can be messy. Concepts are clarified gradually after iterative prototyping and user testing. One of my favorite quotes: “People think simplicity is one less button. Truly, it’s taking time to develop clarity of thought.” —Dave Morin
Protected: Product Design at Microsoft
Microsoft
Graphic Design, Interaction Design, Recent Work, User Research
Protected: Product Design at Microsoft
Framer Experiment
Interaction Design, Recent Work
Framer Experiment
Re-imagine Read-it-later Experience
Graphic Design, Interaction Design, Recent Work, User Research
Re-imagine Read-it-later Experience
Yelp User Profile Page Redesign (ios)
Graphic Design, Interaction Design, Recent Work
Yelp User Profile Page Redesign (ios)
Taxonomy for Starbucks Bakery Products
Taxonomy for Starbucks Bakery Products
TEDxRainier Event Companion App
UW iSchool Capstone Project
Graphic Design, Interaction Design
TEDxRainier Event Companion App
Health Pal: Web Application Design
Interaction Design
Health Pal: Web Application Design
Hello 911… Information Visualization Project
Information Visualization, Interaction Design, User Research
Hello 911… Information Visualization Project
MooDuino: in-class voting app Design
Interaction Design
MooDuino: in-class voting app Design
Exploratory Data Analysis with Tableau
Information Visualization
Exploratory Data Analysis with Tableau
Homeless in Seattle Visualization
Information Visualization Class
Graphic Design, Information Visualization
Homeless in Seattle Visualization