Overview

The Client – Let’s Go Sushi is a mobile application that looks to connect local sushi joints sushi lovers in the area. Client wanted to maintain an up-to-date list of sushi places in their target region.
‍The Challenge – I had to research, plan and design the interface and construct a positive user experience. I had to also understand the problems and stress points of using a mobile application when facilitating users to find sushi near them.
‍Outcome – A usable and aesthetically appealing mobile application that helps customers order sushi from the list of restaurants in the application through a smooth and seamless experience.
‍Length of the Project – 4 weeks
‍Software used – Adobe XD | Balsamiq | Adobe Photoshop | Adobe Illustrator

Approach

Research

Research goals ‍

• Learn the market by analysing popular sushi apps in the area.
• Understand why individuals go for sushi and the best sushi everyone likes.
• Define common behaviours of individuals when ordering food via an app.
• Define common behaviours of restaurants when receiving an order via an app.
• Determine users’ needs and frustrations when using an app to order food.
• Understand how individuals, restaurants and payment gateways interact.
• Identify areas where the sushi ordering experience could be improved.

‍
‍Market Research
I conducted research to familiarize myself with the business idea behind Let’s Go Sushi and the mobile food ordering sector overall. In addition, I gathered data on user demographics, regional user habits and trends.
‍
‍Competitive Analysis Research
I analysed some of the client’s competitors in the online food ordering/ delivery sector.  I uncovered the strengths and weaknesses of client's direct competitors Door Dash, Grub Hub, Uber Eats and Seamless.
‍
My competitive analysis produced the following insights:‍

• There are not many competitors in this industry, at least not many who have a direct mobile app for placing an order. There is an opportunity to use mobile-based technology to improve the efficiency of the mobile ordering process.
• Many sushi restaurant mobile apps have a limited variety of sushi available.
• The delivery option is not always available for the sushi restaurants.
• Every one wants an option to have their food delivered to the comfort of their home.

Empathize

User Personas
Getting a sense of the general target audience will help me think about how the business would appeal to different demographics with varying needs. So, I used all of the qualitative data I gathered during the research process to create different user personas.

User Interviews
In order to design a website with a great user experience, I had to first identify the needs of the target audience. To better understand the perspective of users, I spoke to people between 16 and 55 years old who are likely to be prospective users, to find out their preferences, motivations, and frustrations with regard to ordering food online.
‍
Research Assumptions:

• The mobile app needs optimization via technology.
• Customers would love to know what is happening to their order and be constantly updated about its status.
• Customers are dissatisfied when their food’s location during delivery is unavailable.
• Customers are happy to hire services of a simple and transparent middle man service given by 3rd party apps such as Let’s Go Sushi.

After an in-depth analysis, I was able to identify several user needs:

1. Users need a smooth easy experience in their sushi ordering process.
2. Recipients need to know when they will receive their order.
3. Users need efficiency (with less clicks) throughout the ordering process.
4. Users need the app to have an updated database.

Intersection between business and user goal
I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I identified common areas, I could decide what product features were necessary for the prototype.

At this stage, I presented the user research findings and ideation results at a meeting with stakeholders involved - client’s business, marketing, sales,operations teams of the client. I recorded their reflections and confirmed alignment with the company’s mandate and vision. Engagement with stakeholders ensured keeping the leadership informed of design decisions. There was consensus largely among the leadership which provided motivation to proceed to the next phase of the project, information architecture.

Create

Information Architecture
I created a high-level list of site features to further define and guide the vision of the product. I conceptualized organization of information and data flow. I prioritized the features with supporting research to obtain seamless user navigation using tools like data categorization and labelling.

I created a sitemap (refer Fig 4) which laid out the structure of data on the site, supplemented by navigation rules.

Interaction Design
I completed a task flow (refer Fig 5) and user flow (refer Fig 6) to imagine the ways a user might navigate through the site to achieve his/her goals. These methods allowed me to ensure that the information was organized in a way that is intuitive to the user.

Low-Fidelity Wireframes (Sketches)
In Balsamiq, I began the process of wire-framing with sketches of different variations of the website landing page. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketch I chose(refer Fig 7) served as a guide for my mid-fidelity wireframes.

Mid-Fidelity Wireframes
Guided by the sketches, I developed mid-fidelity wireframe (refer Fig 8) using Balsamiq. I created UI design patterns to outline all the design elements I wanted to incorporate into the website.

High Fidelity Wireframes
I applied the UI design and branding requirements to mid-fidelity wireframes in order to create high fidelity wireframe (visual mock-ups) using Adobe XD. With all the visual details added, they were fully fleshed out (refer Fig 9). I continued the iterative cycle of developing,testing and updating the prototype.

In addition to branding, I defined the design patterns (user interface components) such as alert notification, header, footers, buttons, navigation and breadcrumbs. These patterns were reused throughout the website to create a consistent user experience.

The logo given by the client was added to the UI Kit, a comprehensive collection of all site components and UI design patterns(refer Fig 10). This kit, designed with Adobe Photoshop, was ac on stantly changing document as the website and brand grew.

Test

Usability Testing
The usability test plan directed engagement with appropriate participants to attempt realistic activities, by turning user goals into task scenarios. By doing this, I gained qualitative insights into why users had trouble.

Instead of simply instructing the test users to perform the task with no explanation, I preferred to supplement the request within a short scenario that sets the stage for the action and provides a bit of context for why the user was embarking on the task. During testing, I called the tasks “activities” to avoid giving the participants a feel that they were being tested.

I asked 5 participants to test the prototype's usability. The participant pool comprised of people between the ages of 16 and 65 years, belonging to different professional backgrounds, varying levels of technological literacy and career stages while also accommodating those who have accessibility challenges. A few participants met me in person to complete the usability test, while others did so remotely. The participants were given four different scenarios, each with a task to complete.

Task scenarios:

• Task 1 – Open the app and enter your zip code (without signing in), once inside the app,search for a particular sushi restaurant.
• Task 2 – Go to the restaurant you think is best by reading reviews and order something from that restaurant.
• Task 3 – Navigate to the offers page, choose an offer and later delete the offer during checkout.
• Task 4 – Use the tracking feature to see what or where your order status is.

Once the participants completed the tasks, I measured the percentage of tasks that users completed correctly (user success rate) as a way to communicate a site’s overall usability. The resulting usability metrics helped inform improvements that were warranted to certain designs and set the design direction.

The success rate of this testing was 70%.

Affinity Mapping
I created an affinity map to organize and synthesize the responses and observations I captured using testing. I uncovered insights, which I reconstructed into a list of recommendations. I organized these by priority level (high to low) as a way to determine what had to be changed immediately and what could be saved for later.

Findings:
Overall, users navigated through the website with less difficulty. 100% of users referred to the tasks as either simple or easy. Confusion most often stemmed from the fact that the prototype is not fully functional. More usability tests were planned to be conducted on other site features once it’s complete.

Recommendations:

1. Move the location of the track button.
2. Reorganize the information hierarchy in the ‘Home’ page.
3. Increase font size on the tracker map.

An iterative design is the best method to increase the quality of a user’s experience. I iterated the design and usability three times, since in some occasions, usability metrics decreased in some versions if a redesign was focused on improving other parameters. The overall usability reached 116% from the first to the last iteration, and the advancement per iteration was 18%.

After completion of testing phase, a status meeting was held with the stakeholders to showcase the results of the testing phase and discuss if any final changes were needed from the stakeholders. As there were no other changes needed I was able to move to the next phase.

Accessibility
Aiming for an inclusive design, I incorporated the accessibility guidelines by including high contrast ratio, not relying on colour alone; clear labelling of forms, simple headings, consistent spacing, navigation and adding language options to include English and Spanish.

Develop

Project hand-over meeting
The stakeholders were briefed about the final developments to the project and their concurrence was received. I managed user experience design deliverables (UI Kit) and used Adobe XD to hand off the design to the developer team after I made all necessary improvements to the prototype. Thereafter, I collaborated with the development team as and when required, to ascertain if the developed product efficiently showcases the design elements.