Overview

The Client – Dosa Kadai is a classic-themed restaurant serving the finest varieties of Dosa (rice crepes) in 3 locations. They specialize only in Dosa and authentic drinks from Tamil Nadu (South India). They also cater to companies to serve corporate lunches during events and so on.
‍The Challenge – I had to research, plan and design the interface. I had to also understand the client’s perception and business strategy in having a specialised restaurant.
‍Outcome – A usable and aesthetically appealing mobile application that helps customers order their food through phone and either get it delivered or picked up from the restaurant.
‍Length of the Project – 4 weeks
‍Software used – Adobe XD | Balsamiq | Adobe Photoshop | Adobe Illustrator

Approach

Research

Research goals ‍

• Define the standard for an online food and beverage service.
• Learn about other popular restaurant apps in the market.
• Understand why customers order through an app rather than go to the restaurant.
• Define common behaviours of customers when ordering food online.
• Determine users’ needs and frustrations when ordering and paying for food online.
• Understand how customer, delivery agent and restaurants interact.
• Identify areas of the food ordering experience that could be improved.

‍Market Research
I conducted research to familiarize myself with existing online dosa ordering apps. I gathered data on the problem they face in the area and the use of technology to tackle the issue.
‍
‍Competitive Analysis Research
A competitive analysis was performed to understand the strengths, weaknesses,similarities, and differences between competitor online dosa ordering apps.
‍
My competitive analysis produced the following insights:‍

• There are many competitors in this industry. There is an opportunity to use mobile-based technology to improve the efficiency of the ordering process which the customers require.
• Many dosa ordering apps have limitations on the types of dosas offered.
• There is a historical increase in public behaviour moving towards a mobile food ordering habit than ever done in the past.

Empathize

Basic Personas
To get a sense of the target audience, understand how the business would appeal to different demographics with varying needs and to base design decisions depending on the disparate goals, motivations and behaviours of sections of the society, I created user personas (refer Fig 2). This study complimented the data I had collected through desktop research about the construction industry.

Personas Creation
Next,I used all of the qualitative data I gathered during the research process to create user personas.

User Interviews
To better understand the perspective of the target user, I interviewed a few people; two of whom regularly order dosa using website or mobile application.
‍
Research Assumptions:

• The ordering process needs optimization and smooth payment options via technology.
• Customers have mobile devices on which they can access their favourite restaurants.
• Users expect more innovative methods in dosa mobile ordering process.

By clustering all the important interview responses, I discovered trends and patterns that revealed insights about the user experience. Through this process I identified several user needs:

1. Users need convenience throughout the dosa ordering process.
2. Users need to know when they will receive their order.
3. Users need efficiency and different options in the payment process.
4. Users would love to be able to customize and add notes to their order.

Brainstorming - 'Point of View' (POV) Statements & 'How Can We' (HCW) Questions
After wrapping up user interviews, I dug deeper into the insights and needs I had generated. First, I restructured insights into POV statements, that is, an actionable problem statement that defines the design challenge. Next, I restructured those POV statements into ‘How Can We’ questions that would generate solution-oriented brainstorming (refer Fig 3).

Group Brainstorming

• Users prefer minimalistic design and text for a convenient viewing.
• An intuitive design is key to an efficient viewing experience.
• Visuals including images and videos appeal to users.

Intersection between business and user goal
Now that I had empathized with target users and identified their needs, I needed to define strategic design solutions. I reflected on the business goals, user goals, and technical considerations to find a happy medium for all stakeholders. Once I identified common areas (refer Fig 4), I could decide what product features were necessary for the prototype, bearing in mind also the user-centred design principles.

At this stage, I presented the user research findings and ideation results at a meeting with stakeholders involved - leadership from the 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 5) which laid out the structure of data on the site, supplemented by navigation rules.

Interaction Design
I completed a task flow (refer Fig 6) and user flow (refer Fig 7) 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 8) served as a guide for my mid-fidelity wireframes.

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

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 preferred to call 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 25 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 – Use the tracking feature to see at what stage your order is or where your order is.
• Task 2 – Navigate to the dosa page and order a dosa and add customizations to it.
• Task 3 – Navigate to order page and order any of the drinks only.

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 60%.

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. 80% of users referred to the tasks as either simple or easy. More usability tests were planned to be conducted on other site features once it’s complete.

Recommendations:

1. Reduce the content and simplify the overall information about the restaurant.
2. Simplify the ordering process by adding “Drinks only” order button.
3. Reorganize the information hierarchy of the “About Us” page.
4. Increase font size on the tracking map.
5. Change the title “About Us” on the navigation bar to “Our Story”.

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 145% from the first to the last iteration, and the advancement per iteration was 24%.

Branding

At this point in the process, I began thinking about how the website would look and feel to visitors. I came up with a series of descriptive words that captured the essence of the Dosa Kadai’s brand: innovative, authentic and variety.

Since this was a company with goodwill, I was given the brand guidelines and logo to which I was allowed minor tweaks to fit the recent design/ mobile trends.

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

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 11). I continued the iterative cycle of developing, testing and updating the prototype.

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.