interface Design Mobile App

Classifind is a classified app for posting, selling, purchasing and shipping goods from private parties. The focus from the start was on generating customizable user feeds based on user parameters.


Product Design


iOS and Android


UI Screens, UX Flow and Prototype

Project overview


Create a human-centered Classified app.


To provide relevant user feeds based on robust and flexible search parameters. As well as facilitate and simplify shipping services when required.

design process &

Below is the design process I used to create this project, broken up into these 4 major milestones below.


competitive analysis
user research


user stories
user flows


low fidelity prototype
mid fidelity prototype
usability testing

branding & design

logo & Icon design
style guide
high fidelity mock up


What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.


getting to know your user

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.


Timing is everything! Everything comes out at the same time, piping hot!


I go to the grocery store every day. If you buy anything ahead of time it goes bad.


I think we're all cooking more from home these days!

branding & design

logo & Icon design
style guide
high fidelity mock up

MVP & key feature requirements

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


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!

user flow

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.

user testing

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.

Objective 1

Is selecting recipes and adding them to your shopping cart clear.

objective 2

Is the flow of customizing the serving size easy to follow.

objective 3

Is the flow of picking your recipes and compiling your shopping list intuitive.


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.

style guide

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.

High Fidelity mock ups

Splash & intro page
shopping list
history & pop up

break points

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.

Let’s Skyrocket Your Next Project Together

Currently looking for full time work opportunities, locally and remote. Got a freelance project? let's talk about it!