Designing Slice Downtown's Mobile App
This page will highlight my design process used to create the low-fidelity Figma prototype participants used in the unmoderated usability study. All deliverables that are partial on this page as well as the link to the interactive Figma prototype can be found on the deliverables page.
Personas
As a part of my Coursera UX course, I created two user personas to drive the creation of the first iteration of the Antonio's mobile ordering app. These personas were created using curated foundational research to better understand the needs of our target users.
I created these personas to represent the needs of our larger user base. I strive to use personas to build empathy and tell the story of the user. I believe this is crucial to designing a practical and equitable solution.
Both personas had their own backstory as well as their own goals and frustrations in regard to mobile ordering apps. They both also benefitted from the use of certain assistive technologies to ensure that those were included in the final iteration of the Antonio's app. Additionally, I included a relevant quote that summarized their need, and further humanized them.
.png)
.png)
User Stories
I created a user story for each persona told in first person; they highlight the features and elements the user finds value in and why.
I included these to further personalize the users and therefore the entire pitch to our stakeholders, prioritize our design goals, and inspire empathetic decision-making throughout the design process.
Journey Maps
I further fleshed out these users' experiences by creating journey maps. Actions, task lists, emotions, and improvement opportunities were all included in an effort to help create an obstacle-free flow and path for the user.
Additionally, I wanted to reduce designer bias and possibly highlight new pain points I had not considered. This process further humanized our user base for me and helped me identify improvement opportunities prior to creating wireframes. I especially wanted to be mindful of potential edge cases.
Competitive Audit
Next, I conducted a competitive audit on other similar restaurants in the area. My goals were to identify who they were, which dishes and services they offered, and how they positioned themselves in the market.
The three competitors I chose to examine were
-
Olive Garden
-
Pasta Vino
-
Cru Wine Bar
​
Through this audit, I was able to determine what our competitors were doing right on their websites and mobile apps, and areas that they could improve upon. I wanted to incorporate these improvements into our first iteration of the app. The complete audit is available on the deliverables page.
.png)
.png)
User Flow
I created a basic flow of a user ordering an entrée off of the app. This would serve as a basis for creating my storyboards and initial wireframes going forward.
Storyboards
Next I created both close-up and big picture storyboards that highlighted the user journey of my persona: Michael.
.png)
The goal of the big picture board was to run through Michael's entire experience with the app. In the close-up I focused on his interactions with the app and its various elements.
.png)
Wireframes
Next, I created wireframes utilizing industry standard symbols to streamline the process of creating my low-fidelity prototype. I ideated and came up with multiple possibilities for each page when designing my paper wireframes. I wanted to entertain every possibility during this phase to ensure that I did not pass on a viable user-centered design. I put a star next to favorable elements.
I then selected the most functional paper wireframes and created a final refined version which I would re-create digitally in Figma.
.png)
.png)
These wireframes included more relevant titles and text based off of rudimentary information architecture I created that was flexible enough to accomodate any unforseen changes. I like to include basic information architecture in my digital wireframes, so I can better organize relevant pieces of information and draw attention to anything my peers or I may have missed in previous steps.
.png)
Low-Fidelity Prototype
After finalizing all of my digital wireframes, and creating a handful of entirely new ones for click paths I overlooked, I connected them together.
.png)
After completing the site map, I was left with an interactive prototype of the Antonio's app I could test with actual users during the Research phase of this project.