UX Case Study: A Grocery Delivery App
Note: For privacy reasons the brand name will be changed to ‘Horti' in the
presentation of the case study.About Horti
Horti is the bridge between producers and stores in Brazil. Freshly harvested food is delivered to consumers and establishments in a dynamic and technological way.
First Contact with the Brand
In a first contact, some points were established about what the brand wanted with the project, what will be the delivery success metrics and what insights and problems Horti should be aware of for the application development procedure.
Points
- Building a mid to high fidelity prototype of the Horti’s Android home screen app.
- Process and outcome documentation.
- Use of the main design tools (Figma, Illustrator, Photoshop, InDesign)
- Project presentation: insights, problems, and tips.
Research Approach
As mentioned by Nngroup, the use of the design thinking framework is recommended due to its practical and user-centered approach, which enables problem solving in an innovative way.
The Design Thinking process has 6 steps:
- Immersion
- Definition
- Idea
- Prototyping
- Test
- Implementation
Thus, using the above-mentioned process as a basis and respecting the specificities of each phase, the following schedule was elaborated:
- Desk Research
- Benchmarking
- Information Architecture
- Wireframe
- Prototype
- Test
Desk Research
“Desk Research is necessary to explore the problem and scope of previous projects and identify important issues and best practices in the field of study. It also helps focus the scope of your own project and often saves money.”
Nielsen Norman Group.
Steps
- Research topic choice
- Problem Statement elaboration
- Identification of internal and external resources
- Internal and external data collection and analysis
1- Research topic choice: Through articles, reports, books, and documentaries about Horti’s area of activity, it was possible to understand the macro aspect and establish which factors would have an impact on the course of the project, such as the pioneering advantage of a specific organization and the historical, economic, and social aspects of the sector.
2- Problem Statement elaboration:
Horti is a grocery company that needs to develop an application for the Android platform to expand the business and match the convenience of use provided by an application already available by direct and indirect competitors.
Source: Google UX
3- Identification of internal and external resources: The identification of external resources was performed mainly by means of reports and comments from users of the brand on social networks. The internal resources identification phase aimed at identifying relevant data that was already available in the organization, such as primary research results, which should preferably be in a research repository for the use of different departments in the company.
4- Internal and external data collection and analysis:
Through the external resources, it was possible to summarize the kind of experience the brand is providing, such as:
- The social responsibility that the company conveys
- The direct contact with users
- The recognition of its technological initiatives
Additionally, through internal resources, it would be possible to, in addition of understanding the internal aspect of the organization, to elaborate personas that would be essential to establish the profile of the main users. Although, this phase was considered precarious by the lack of a research structure and CRM data (Customer Relationship Management) by Horti. Thus, it was possible to develop a proto persona, i.e., a set of information that shows a user profile, but based on the team’s ideals and perceptions.
Benchmark
Companies with similar proposals (direct competitors) or similar proposals (indirect competitors) were analyzed focusing on the mobile application. Thus, according to Moran (2020), the analysis metrics were:
- Analyze what should be measured
- Analyze how it must be measured
- Data Collection
1- Analyze what should be measured:
Considering the project objective, the metrics chosen were Usability & Visual, where:
Usability: an application with good usability avoids the user to learn complex procedures, facilitates the memory of activities in the system, guides the exploration of its content, prevents errors, and facilitates the procedure and relieves the person’s physical and mental overload, besides reducing the time spent performing tasks (CYBIS; BETION; FAUST, 2010).
Visual: User Interface or user interface is the graphical part that allows the user to interact with the options displayed on the screen (LASHIN; HELMY, 2021).
2- Analyze how it should be measured:
The two metrics will be measured in a qualitative way taking into account the main tasks of the users, such as: placing an order, consult the order history, verify current promotions, contact technical support, and modify registration information.
3- Data Collection:
Due to the use of the Android system, Google’s standard app store, the Play Store, was used. The keywords chosen for the search of direct competitors were “delivery grocery” while for indirect competitors “delivery”. Thus, the search results were selected in order of relevance and ads were not considered.
Six apps were analyzed, four of which were direct competitors and two indirect.
Comments made after testing some applications:
App A: Considering the previously defined metrics, Usability & Visual, the application failed in basic aspects, such as the size of the minimum recommended touch area, the fact that the price art was developed for desktop and not adapted for mobile and the redundancy in the categories represented in the sections. Furthermore, the application did not use the brand language in a broader way in its development, which makes the visual language not a highlight for the user.
App B: App B has interface problems mentioned in the previous analyses, such as the recommendation of a larger touch area, a section that is too long on scrolling, and no other options for the user on the homepage. Additionally, there were problems with the contrast ratio, which impairs visibility, and a poor information hierarchy due to the non-use of negative space.
Finally, regarding the visual aspect of the application, there was no prominent use of the brand’s color palette.
Information Architecture
Elaboration of User Tasks
“A user task is a typical workflow task in which a human performs the task with the help of a software application”
(OMG, 2011, apud FERREIRA, et al., 2020, p. 4)
Based on the metrics used in the benchmarking phase of the direct and indirect competitors’ applications, such as: place an order, consult order history, check current promotions, contact support technical and make registration changes, it was possible to identify specific usability problems. Therefore, with the use of a low fidelity wireframe, it was possible to test and improve the efficiency of the user’s tasks in a dynamic way.
With the problems duly characterized and corrected using a low fidelity wireframe, it was possible to create the medium/high fidelity version already taking into consideration the brand manual with the objective of establishing a consistent visual identity.
Final Version Conclusions
Finally, the final version was presented together with the process documentation, comments, and additional recommendations. In case of the concept’s approval, we will give the procedure of the application already seeking to validate with users the main tasks in usability testing.
Thanks for reading! I hope you enjoyed this case study. If you have any comments or suggestions, please get in touch via LinkedIn or e-mail: belisiario@hotmail.com.br
Originally published at https://www.belisiario.com.
