Click-to-Eat
By: Lengiso Hussein
Role: Researcher and Designer
Methods via tool used:
Remote moderated directed storytelling sessions via Zoom and Quicktime player,
Affinity diagramming via InVision Freehand whiteboard,
Wireframes via sketchbook
Digitized Prototyping via Sketch, Axure and InVision
Project Overview
The Click-to-Eat prototype is a dependable food delivery app that allows users access to saved order information with numerous customizable options. The app also addressed the users' need for eco-friendly packaging options.
Design Process
Screenshot of a Directed Storytelling Session
Remote moderated directed storytelling sessions
The challenge presented was to make any improvements to an existing food delivery app that demonstrated an enhancement in the areas the users communicated. In order to fully grasp the scope of the situation, two users sat down and participated in a directed storytelling session which would yield results. After having an enlightening dialogue with these users the notes were compiled and synthesized using affinity diagramming.
Affinity Diagramming via InVision freehand whiteboard
While organizing the notes a set of common themes were noticeable. The need for customizing previous orders and eco-friendly packaging options were among a few of them. One suggestion a participant was sincere about was including a feature that allowed her to support small businesses. She wanted to support local businesses affected by the pandemic so displaying a page for “Local Businesses of the Week '' was a factor that was taken into consideration.
After the completion of synthesizing notes and finalizing goals to improve on, a solid user goal was decided upon. This would pave the way for future prototypes.
The finalized user goal was,
“As an individual who frequently orders food to my doorstep, I would like a foolproof delivery service that offers previous order history with an option for customization based on desired dietary needs with an ability to choose eco-friendly options to support values that I believe in.”
This would then lay the groundwork for my design.
Screenshot of Synthesized notes using Affinity Diagramming
Wireframes & Prototyping
Screen 1 of Low-fidelity hand-sketched wireframes
Using the finalized user goal, the next step in the design process was to begin the first round of hand sketched wireframes. After completing the hand sketches, a transition was made into the Sketch app to bring the ideas to life. After cycling through different concepts, the digital wireframes were completed using placeholders and various other basic elements to solidify the layout. This would help set a foundation based on the user goal which would lead to a smooth transition into adding interactivity.
Screen 2 of Low-fidelity hand-sketched wireframes
The following phase in the process was to take the concepts created in Sketch and redesign them in the Axure software where interactivity could be added. During this stage of prototyping, a moment of “writer’s” block occurred. The app lacked sufficient space for the users eye to rest and contained an excess of information density on each screen. The color scheme chosen also didn’t meet the accessibility standards, so it felt like the prototype needed to be completely redesigned from scratch. So instead of sticking with the work already completed, another improved version of the initial prototype was created by referencing the earlier findings.
View Axure Prototype here
Screen 3 of Low-fidelity hand-sketched wireframes
To address any potential cognitive load issues the design was simplified. In order to simplify the design, the decision to only add basic necessary features was made and executed. Features like the quickest, recommended and popular suggestions were among a few that were deemed essential. By doing this the users wouldn’t feel overwhelmed with the amount of content and they would have an effortless navigation while using the app.
After incorporating the recommendations users stated in the design, interactions were then added. Interactions were added to all the users' ability to view previous order on the home page with an option for customization. Interactivity was also added to allow for straightforward navigation from adding a meal to customizing and submitting the order.
Critique Session
After completing the addition of interactivity in Axure, the prototype was involved in a critiquing session with fellow colleagues. During the critique, a brief presentation was given to explain the entire design process. Ranging from the user sessions to the finalized prototype. After the session was finished, it yielded valuable results regarding areas that could use improvements. Some tweaks made typos, the arrangement of icons and the color scheme in the background.
Follow-up Phase
The next individual working on this prototype would need to make a few adjustments or additions in regards to interactivity. Some features that still need to be acted upon:
The food status bar would need to be programmed to relay real-time updates.
The contact driver button on the same page would also need to have an interaction to display the drivers' number.
In order to further evaluate the prototype, another usability testing session would need to be conducted. Some questions to be answered through another stage of testing would be:
Does the previous order feature ease the process for frequent users?
Is the navigation of the app accessible?
How do you feel about the customization options?
Do you utilize the tracking order feature? If so, why is it helpful?