Fintech Mobile App

After interviewing people I identified as potential users of the product, I probed for insights into behaviors, desires, goals & pain points. These interviews illuminated just how different the grocery shopping experience can be from person to person. Some wanted to maximize their shopping trip by getting supplies for over a week. While others preferred to shop every day to prevent items from expiring. I wanted to be sure and design a ui that accommodated users on either side of this spectrum.

This is some of what my potential users had to say.

Based on interviews, research, and competitive analysis, a path forward was forged. Focused on positioning this responsive app uniquely in a sea of similar apps with key feature requirements tailored to our user personas.

mvp objective

• To allow users the ability to “batch” a grocery lists, big and small, based on recipes that they would like to use, and to keep them informed of the “efficiency” of the shopping list thy have compiled.

key feature requirements

1. When I select recipes I want to cook, I want to generate a shopping list for all the recipes I’ve selected, to make shopping for multiple recipes easier.
2. When I choose a recipe, I want to be able to change the servings, so I can tailor the size of the meal and corresponding shopping list.
3. When I’m compiling a shopping list, I want a visual cue, so I can see if the amount of duplicate use in my ingredients to promote efficiency.

I later revised this last requirement to show an average meal cost for a selected time frame. I thought this change better suited users no matter the size of their shopping list

user persona

Sigmund

I have 3 kids. I want to customize the size of my recipes to suit my family serving size. Once I've found the recipes I want for my weekly shopping list, compiling those recipes into my weekly shopping list makes shopping a breeze!

With my mvp or "minimum viable product" and key features in mind it was time to start putting together a user flow that allowed diverse users to accomplish those key features. It was a challenge to keep this user flow small. The tendency is to try to give your users everything they could possibly desire. This can really increase the scope of the project quickly. I find it best to focus on a few key features to start with and make sure the app accomplishes those features well, knowing that in later iterations you can add features that enrich the users experience as the app grows and matures.

Crazy 8s

I really enjoy this stage of a project. It's when our users optimal journey begins to come into focus. This is a great time to put pen to paper and sketch out rough variations of wireframes.This step is so valuable because it affords you the opportunity to iterate rapidly identifying potential issues and brainstorming solutions before you invest your time into wireframing your product digitally. This step really allowed me to refine the patterns and elements I was using, which, in some cases changed significantly in this very process.

‍

‍

With some rough prototypes in hand, I was excited about testing my flows on potential users to inform my solutions before moving on to my high fidelity mock ups. So, I put together a usability test with 3 objectives for my test users.

This step really shaped how I went about informing the user of how much money they were spending per meal aka their "efficiency". I ended up using a plot graph charting the average price per meal over variable timelines. It's also where I settled on the serving size pattern that would be intuitive for diverse users.

Based on my research and interaction with users it was clear that there is a desire for clean and simple foods. I chose to reflect those values after experimenting with a few different moodboards.

Upon distilling my moodboard and user personas I created a logo that balanced value and speed. Two of the recurring themes in my interactions with potential users.

A proper hand off is always critical to ensure the product has the guard rails it needs to stay on brand as it's developed, grows, and modifies. A style guide is a great jumping off point for developers and other contributors.

Splash & intro page

onboarding

Recipes

shopping list

history & pop up

Designing breakpoints for common screen sizes is necessary for web apps to ensure a quality user experience no matter what device they use the product on.

At the end of this process I  built out a prototype that addressed my key requirements. I came out with a deeper appreciation for the design thinking process. It was also a reminder of the value of user interviews and testing. No matter how smart you are, looking at a potential users experience will ALWAYS inform another way of approaching your app and shed light on how to refine flows to accommodate a want or need that you wouldn't have been aware of until the product has already been developed.