RESEARCH | UI | UX | PROTOTYPING | VISUALS
Zipongo
Zipongo is a digital health company whose focus it is to make healthy eating simple. Projects I worked on included helping to build out the company’s first digital coaching feature centered around healthy habits that lead to weight loss. Other projects included redesigning the company’s existing grocery list feature for an Instacart integration.
The Problem
The company wanted to distinguish itself from being seen as another healthy recipe app for consumers and create a feature that would help drive outcome goals using coaching techniques. The executive team settled on the idea of a "Digital Coach" (aka Chatbot) to facilitate this process. The challenge was creating something that could leverage the apps existing features and product framework.
Research & Inspiration
Understanding the competitive landscape was a good start, however more important was understanding the behavioral change models and coaching methods used to foster positive change. As a small team we felt it was critical to have a similar base of understanding and got familiar with the same material. The frameworks and models of Stanford researcher and behavioral scientist, B.J. Fogg was a great place to start.
On-Site Interviews
We kicked things off by listening to real people. We recruited 15 representative participants and structured our research method accordingly.
Research and exercise material used during interview sessions
Insights & Patterns
After combing through a wealth of data, insights began to emerge. We not only documented our findings for our internal team but noted any nuggets of information that might be helpful to other departments. The information shown below was also shared with the marketing team to inform them of customer motivations.
Ideation Exercises
Once we felt we had enough solid material to work with we began to hold brainstorming sessions and mapped out possible flows.
Mapped journey and lo-fi explorations shared with team members and stakeholders.
Design & Prototyping
Not only was I tasked to design a new experience but kept in mind its relationship to the existing product. It was also an opportunity to tackle other design problems in our app such as onboarding which had its own set of problems such as poor structure for questions however was key to setting up the coaching experience.
The Holistic View
So much was happening in parallel and at great speed. I was designing both from the top down and bottom up however we still hadn't defined certain features or agreed on what certain paths would look like. Also, the product direction began to change slightly. I decided to focus some time on helping the team see things more holistically to mitigate waste and better align everyone on the project.
Testing
We ran several tests with representative users. The first was on the core app experience and the others were for onboarding. Also, given our company NPS score was in the negative, we felt it would be good to get a reading on experiences as we progressed. The results were interesting. We ended up combining the best of Test A and B where the user would first begin their onboarding experience via chatbot and finish through traditional onboarding screens. Duration played a huge part in this decision.
Results & Takeways
Our first test proved to be a success as seen below. Over the course of a week with 33 iOS users we captured higher engagement in all key metrics. The control we tested against was our existing app. The goal was to move the needle on engagement for all targeted existing features.
Although our first test was a success there was still lots of work ahead. For one, the idea of weight loss via a behavioral change model was new to the majority users. The mental model was "counting calories" and "focusing on macros" = weight loss. Although they took action within the app, was it clear to them how this model was better? Were they confident? A considerable number of users were drawing comparisons to MyFitnessPal or Fitbit. That was concerning. Our next round of iterations and tests were to focus on education and comprehension.
Grocery Lists & Shopping Carts
The Instacart Integration
The Challenge
Integrate Instacart into the existing grocery list feature to help users gain access to ingredients needed from their recipe recommendations. The strategy was to address one platform at a time starting with web.
Research &
The Problem
Before starting the project I wanted to feel the experience of other Instacart API integrations to witness the design possibilities. Much were all the same.
I also requested metrics from our Analytics team to understand how the feature was being used. Both myself and the PM were shocked to learn that only 1% of our users were even using the grocery list feature. We both requested that Analytics double check those stats only to have it confirmed once again.
It was then that we realized we had another problem to solve: Discoverability
This image exemplifies the visibility issue. The "Add to Grocery List" link lies between two large elements that take up most of the visual weight on the page.
The redesign was straight forward. By simply moving the CTA closer to relative content you increase visibility. Also, I changed the IA and moved the grocery list a layer above the recipes tab to be just one click away.
Redesigning
the List
Getting users to notice the feature was only the start of concerns. The Grocery List itself was poorly designed and lacked clarity, affordance, and direction. Also, the interface for "adding" groceries from a recipe page was different from "managing" your grocery list. I consolidated the look and interaction as much as possible and even designed for different states.
Interface seen when adding ingredients from a recipe page.
Interface for managing your grocery list from any part of the site. Above shows the various states and interactions of the grocery list with dependents linked to your account and without.
Feedback Paths
The last challenge centered around the limitations of the API. Given Instacart didn't relay purchase information back to Zipongo there was no way for a user to have purchased item automatically removed from their grocery list. Most users assume technology to be start enough to provide this courtesy. The goal was to mitigate friction through a flow that gets them to clear their list via conversation.
Flow paths once a user has returned to Zipongo after linking out to Instacart. The idea was to solicit feedback on the non-purchase paths and get the users to clear their lists on the purchase paths.