logo

StockBuddy


stock mobile

PROJECT:  APP PROTOTYPE  |  BRANDING

ROLE:  UX/UI DESIGNER  |  VISUAL DESIGNER

CHALLENGE

StockBuddy wants to connect housemates and make it easier to share items and costs within one central app. StockBuddy wants to give a more user-centric approach to their app by adding features and flows that make it delightful for people to use. They want to use the full potential that a mobile app has, such as utilizing the camera to scan barcodes on items or sending notifications to users.

RESULTS

I designed the app and a new brand that resulted in a functional product that simplifies sharing items and splitting bill costs for housemates.

VIEW PROTOTYPE

Research

SECONDARY RESEARCH

I began the project by conducting a market analysis to get a better understanding of the demographics of potential users and any industry trends for similar apps.

INSIGHTS

I did a competitive analysis with similar competitors and identified any opportunities where StockBuddy can differentiate.

competitive analysis
×
×
× mid-fi screens zoom
× hi-fi screens zoom

ASSUMPTIONS

From the research, there were a few assumptions I gathered about how users keep inventory of shared items and split costs.

PRIMARY RESEARCH

USER INTERVIEWS

I developed an interview script and conducted interviews with 4 people from ages 21-38. 3/4 of participants are currently living with housemates and 1 participant has had experience living with housemates. The goal was to identify any pain points participants had and to validated or invalidate any assumptions.

Synthesizing Research

EMPATHY MAP

Based on the interviews, I gathered all my notes and grouped them into categories to create an empathy map. From there I was able to see any patterns or trends that emerged. As a result, I was able to discover common insights and needs from the participants.

empathy map

INSIGHTS

NEEDS

PERSONA

From the empathy map results, a persona was developed to represent the ideal customer along with their goals and needs. My persona is a young adult living in the city who lives with 3 other housemates to save money on rent.

persona

POV & HMW

From the insights and needs extracted from the empathy map, I wrote statements that state our persona's needs from their perspective. From those, I developed How Might We questions to address the problems we're trying to solve.

POV HMW

PROJECT GOALS

I then created a diagram showing the business goals and user goals and where they intersect. This allowed me to prioritize on goals for our project.

project goals

PRODUCT ROADMAP

Since I now know where the business goals and user goals intersect, it allowed me to prioritize what website features are necessary to design.

product roadmap

Information Architecture

SITE MAP

I created a site map that showed the structure and hierarchy of the app. The goal was to make the app navigation as intuitive as possible for users to navigate through.

site map

Interaction Design

USER FLOWS

From the site map I created, I drew out 3 different user flows to envision different paths a user might take within the app. These user flows would then help prioritize what to prototype and test.

user flows

TASK FLOWS

From each user flow, task flows were drawn out to highlight additional actions and tasks.

task flows

SKETCHES

Using the features laid out in the product roadmap, user flows and task flows, I sketched out some ideas for key screens of the different flows I wanted to test later on.

sketches

MID-FIDELITY WIREFRAMES & PROTOTYPE

Mid-fidelity wireframes were created based on my feature prioritization list, user flows and sketches. Afterwards I built a prototype for testing in Marvel prototyping app.

mid-fi screens zoom

Testing & Iteration

USABILITY TESTING

I conducted usability testing to test the overall flow of the app and gather feedback on any frustrations or confusion. I tested 3 participants and presented 4 scenarios and tasks. I observed them as they completed the tasks and had them walk me through their process and thoughts.

AFFINITY MAP

After testing, I gathered all the notes and broke them down into different categories. The data was then used to find any patterns or trends to discover insights on needs or frustrations users had. Then I made a priority list of improvements for iteration.

affinity map

UI Design

BRANDING & UI Kit

I explored different logo concepts to convey certain attributes of the company. After a logo was finalized, I designed a brand style tile with color, typography and imagery and a UI Kit for web development purposes.

UI kit

HIGH-FIDELITY PROTOTYPE

Based on the branding I designed, I created high-fidelity wireframes and built out a prototype that includes the priority changes from the affinity map.

hi-fi screens zoom

Conclusion & Next Steps

Designing an app from scratch was definitely enjoyable and challenging at the same time. Since it's a new product idea, my primary research and discovery of what users need helped drive the direction of the app. My next steps would be to build out the rest of the app and conduct more user testing to refine current features or build new ones.