top of page
Header Page.jpg

The Design Process

Process: Projects

Overview

We followed a user research process from initial research all the way up to a high-fidelity prototype. Below you may find details about each stage of the process.

Process: Text

Research Findings

Competitive Analysis

To see what similar services lack in, we did some research on different platforms to gauge what features would be beneficial, as well as distracting features. We each found one app that was similar to our app idea and found three pain points and beneficial features and elaborated on each point. This allowed our group to brainstorm new features we can add as well as remove ideas that may be too distracting on our app.


Interviews
Each of us interviewed people with different characteristics and busyness levels depending on their occupation and schedule to gauge what features would be helpful in our prototype. This allowed us to see common patterns of pain points that helped us brainstorm ideas of features that we could put on our prototype. Our interview questions asked about their daily routine, their experiences of grocery shopping, and their reasoning behind which grocery stores they choose to shop at. 

Process: Text

Personas

Our target users were busy members of the community of different technological backgrounds and different COVID safety preferences. As a team after conducting 4 interviews, we wanted to create two personas, Kyle and Linda, that embodied the wants and needs of our users. These personas helped us better understand and create design goals, and served as a point of reference throughout the rest of the design process.

Process: Text
Kyle (Persona #2).jpg
Process: Image
Linda (Persona #1).jpg
Process: Image

User Journey Map

We chose our persona, Linda, to move forward with creating a user journey map. This allowed us to identify touchpoints of her day, each one marked with an emotional level of happiness, energy, and frustration.


The map walks through Linda's day, between work, driving to buy groceries, and going home to her family to cook food. This further helped us in creating design requirements and goals for our project.

Process: Text
journey map.jpg
Process: Image

Design Requirements

Design requirements were drawn out from our group's understanding and analysis of user interviews, personas, and user journey maps. We figured these requirements to be fundamental for the app to function:

Screen Shot 2022-06-08 at 8.04.15 PM.png
Process: Text

Storyboards

Each member of our team created two storyboard sketches to depict the use of our app solution in different scenarios.

​

The scenarios were drawn out from the user interviews we held and the different requirements of different users. They helped us understand the types of situations a user would use the app helping us come up with more feature sets.

Frame 4.jpg
Process: Text

Information Architecture

After finalizing the feature sets and design requirements for our mobile application, we created an information architecture chart to put all the ideas and scenarios we gathered into a flow of pages.


Creating an information architecture helped us understand the flow of our mobile application, and was a good reference point to begin prototyping. We were able to understand how every page is connected and also see how the user would feel about a particular scenario flow in the app.

Screen Shot 2022-06-08 at 8.39.43 PM.png
Process: Text

Lo-Fi Prototype

After our group came up with the design requirements through user interviews, feature sets through storyboards and the flow of the app through the information architecture chart. We created a low fidelity model on Figma. This prototype was a skeletal structure of the app that had all the primary functionalities which can be evaluated and tested by us and some test users.

Low Fi.jpg
Process: Text

Evaluation Findings

We conducted evaluation research using our low fidelity model. We each asked someone to test our low fidelity to understand how people with different levels of mobile app experience interact with our low-fidelity prototype. This helped us gain insight to improve our high fidelity so the design is more accessible and user friendly.

Process: Text

Annotated Wireframes

By making annotations on our wireframes, we were able to break down each page and see all the potential interactions the user can have.

Process: Text
bottom of page