Product Design (Concept to Prototype) of an Android Mobile App
"EazyGrozr" for hassle-free Green Grocery Shopping
Product Design (Concept to Prototype) of an online solution, for solving the pain points of urban families in India, in shopping online for green groceries.
Role: Individual project.
Time Period: April 2019 – July 2019.
The Problem
Although online shopping helps to save time by avoiding traffic, parking, and queues, shopping online for green groceries (fresh fruits and vegetables), is a difficult choice for urban families in India.
The major Pain Points are:
- Checking the quality and freshness of fruits and vegetables is not possible.
- Comparison of prices among different sellers is difficult.
- Coordinating the shopping activity among family members is not easy.
Business Opportunity
Enticed by the euphoria of online shopping, hundreds of online grocery companies sprang up in India during 2015‑16. This was followed by a period when their business models were put to test. And, many of them, including some well-funded and popular ones like LocalBanya, PepperTap, etc. shut shop.
Following a year of consolidation, and fine-tuning of business models, the online grocery scene has been revving up from 2018 onward. Currently (as on 2019), the online grocery market in India is booming. According to industry reports, it is expanding at a compound annual growth rate (CAGR) of around 69%, and is expected to reach a value of about INR 1,034 billion by 2023.
Yet, the online business for green groceries in India, remains dull in comparison.
Bridging this gap with the right product-market fit, could be a profitable opportunity to ride the wave, build a brand, and reap the financial benefits.
Overview of the UX Process
The "Research-Design-Build" spiral model of the iterative UX process followed, is shown in the Figure given below – starting from the Business Opportunity, and iterating towards a Minimum Viable Product (MVP), via a User-centered approach.
(Note: Here the MVP denotes Release 1.0 – the minimal offering that can be launched, which delivers customer value).
Accessibility has been integrated and baked‑in during the design of the product, rather than layering‑on later as an add-on.
The UX process is represented as a spiral diagram, starting from the Business Opportunity on the outside, and spiraling inwards, towards the Minimum Viable Product at the center. This process-spiral, is demarcated into 3 equal segments, denoting the Research, Design, and Build phases. The sequential steps done during the process, are marked 1 to 11 on the spiral. These steps are as follows. The first iteration consists of steps 1, 2, and 3 – the Product Vision (Research phase), the Design Proposal (Design phase), and the Lo-fi Prototype (Build phase). The second iteration has steps 4, 5, and 6 – Usability Testing of the Lo-fi Prototype (Research phase), the Design Guidelines (Design phase), and the Med-fi Prototype version-1 (Build phase). The third iteration has steps 7, 8, and 9 – Heuristic Evaluation of the Med-fi Prototype version-1 (Research phase), the UI Specifications (Design phase), and the Med-fi Prototype version-2 (Build phase). The fourth iteration has steps 10 and 11 – Usability Testing of the Med-fi Prototype version-2 (Research phase), and the updated UI Specifications (Design phase). The further possible course of action, to reach the MVP (Minimum Viable Product) at the center, is denoted by a dotted line, completing the spiral.
UX Methods/Activities done during the Iterative Process
(Scroll down for detailed documentation of the User Research and Design activities).
- Contextual inquiry, Affinity mapping.
- Competitive analysis.
- Concept ideation, Product ecosystem, Storyboards.
- Personas and Scenarios.
- Process diagrams, Wireframes.
- Navigation flows, Screen flows, Task flows.
- Brand identity design, UI specifications.
- Lo-fi paper prototype, Med‑fi prototypes in Axure.
- Heuristic evaluation of prototype.
- Moderated, on-site usability testing of prototype.
- Unmoderated, remote usability testing of prototype.
Product Solution
Through the UX process, a viable solution evolved to address the issue.
(Scroll down for detailed documentation of the User Research and Design activities).
The proposed solution is an Android mobile application:
- That supports online and offline shopping,
- With hyperlocal price information, and
- An integrated communication feature.
UX Deliverables and Documentation
The deliverables and documentation of the UX process are detailed below.
Please click or tap, to Open/Close (+/−) each section.
The business opportunity and potential target users were analyzed and defined. A Needs Finding Study was conducted to understand the target users' pain points. According to the recruiting criteria, 5 participants were enlisted for this Contextual Inquiry.
Affinity Mapping was used to synthesize the qualitative data generated, and 3 key findings were prioritized. From these, 3 User Needs Statements were derived for exploring possible solutions.
Competitive Analysis was done to identify current best practices and gaps, for a quick win using a "Lean" approach. This info, along with the 3 user needs statements were considered together, to propose the possible solution – a mobile application.
The Value Proposition and specifications of the proposed product were defined. Based on these, various Design Concepts were brainstormed, sketched, selected, and refined. And, Storyboards were drawn for the key user interactions.
Meaningful user segments were identified from the Needs Finding Study's recruiting criteria, and the participants' profiles, to determine representative users of the product. Accordingly, 2 user Personas, and their corresponding Scenarios were derived.
The Inclusive Design heuristic of "designing for the extremes" was then applied, to further enhance these personas – to ensure that Accessibility is baked‑in during the design phase itself, rather than layered‑on later as an add‑on.
The full details are documented in,
Product Vision and Design Proposal (PDF).
(Please note: The PDF will open in a New tab/window.)
Possible design ideas, that address key user needs (identified and defined in the previous section), were brainstormed for the proposed mobile app. Considering the context and constraints, one of them was chosen for further exploration.
Key tasks that represent the core functions of the selected design concept, were itemized, and Wireframes of the component screens were created.
A Lo‑fi Paper Prototype was made by collating these wireframes, to represent the key Task Flows and interactions.
Check out the details at,
Lo-fi Paper Prototype Design and Setup (PDF).
(Please note: The PDF will open in a New tab/window.)
Moderated, on-site Usability Testing was carried out with 5 participants, on this lo‑fi paper prototype. The purpose of the test was to determine the problems faced by the target users, to do key tasks representing key user needs, using the prototype.
The test consisted of 3 tasks and the SUS questionnaire. Results from the 3 tasks revealed 5 major usability issues.
The mean SUS score of 54, determined for the prototype, was below the standard average score of 68 – indicating that the perceived usability of the prototype was much below average.
Possible solutions were recommended for each of these issues, to improve the perceived and actual usability of the system.
See the full test report in,
Usability Testing of Lo‑fi Prototype (PDF).
(Please note: The PDF will open in a New tab/window.)
The proposed product's features and benefits were reviewed – based on what differentiates it from competition, in what dimension it can compete, and especially, what would address the pain points and connect with the target audience.
Accordingly, a Positioning Statement was defined. And the essence of the proposed product solution was distilled into a single word – "Easy".
The Brand Strategy was framed to own this word "Easy" in the prospect's mind, when shopping online for green groceries.
Many product names were brainstormed, that synched with the positioning statement. Subsequently, the Brand Name "EazyGrozr" was chosen – a fabricated single word, derived from "Easy Grocer".
Combining the characters E and G from "EazyGrozr", different concepts were explored. The most suitable idea among them was selected, refined, and adopted as the product Logo. Also, a Logotype was designed in accordance with the logo's look and feel.
The brand's Color Palette was compiled, to meaningfully express the product personality, in‑sync with the "Easy" positioning. The component colors were fine-tuned to ensure conformance to WCAG 2.1, level AA contrast requirements.
The full details are documented in,
Brand Identity Design of the Product (PDF).
(Please note: The PDF will open in a New tab/window.)
Incorporating insights from testing the lo‑fi prototype and Accessibility considerations, a set of UI Design Guidelines were framed.
Following these guidelines, the major features of the proposed mobile app were implemented as a Med‑fi Prototype. The Android platform was targeted, because it is the dominating mobile operating system in India, with >90% market share.
Check out the details at,
Med-fi Prototype, version‑1 Design and Setup (PDF).
(Please note: The PDF will open in a New tab/window.)
Based on the 2 user scenarios, 6 major tasks were implemented in the med‑fi prototype – 2 general tasks, and 4 key tasks.
Try out the Med‑fi prototype, version‑1 in Axure.
(Please note: The Prototype will open in a New tab/window, and is best viewed on a laptop/desktop. To operate the prototype, use mouse to simulate finger on a touch-screen – left-click to tap, and scroll mouse to scroll vertically.)
Heuristic Evaluation – the med‑fi prototype was evaluated against Nielsen's "10 Usability Heuristics for User Interface Design". 15 usability issues were identified, and compiled into a prioritized list, ranked in decreasing order of severity.
The top 8, most severe of these usability issues, were examined in detail. With respect to these issues, suggestions to improve usability were recommended. And lastly, the limitations of this evaluation were clarified.
See the full evaluation report in,
Heuristic Evaluation of Med‑fi Prototype, version‑1 (PDF).
(Please note: The PDF will open in a New tab/window.)
The med-fi, version‑1's heuristic evaluation recommended improvements. The version‑2 of the med‑fi prototype implemented these, and further refined the User Interface, key Task Flows, and interactions.
Also, the Accessibility requirements of the 2 inclusive personas were factored in the UI Design Specifications.
Check out the details at,
Med-fi Prototype, version‑2 Design and Setup (PDF).
(Please note: The PDF will open in a New tab/window.)
The scope of the key tasks, reflecting key user needs, incorporated a wider range of interactions from the 2 user scenarios. 7 major tasks were implemented in the prototype – 2 general, and 5 key tasks.
Try out the Med‑fi prototype, version‑2 in Axure.
(Please note: The Prototype will open in a New tab/window, and is best viewed on a laptop/desktop. To operate the prototype, use mouse to simulate finger on a touch-screen – left-click to tap, and scroll mouse to scroll vertically.)
Unmoderated, remote Usability Testing was done, to find out if the prototype could fulfill the goals, associated with the target users' green grocery shopping needs.
Applying the concept of "designing for the extremes", the recruiting criteria aimed to get participants aged 70+, in‑sync with one of the inclusive user personas. An on‑site pilot test was conducted with a convenient participant, to fine‑tune the test script.
The remote test was released for 5 participants, on the UserTesting.com platform. But due to lack of response, the age filter had to be relaxed, and the 5 participants ranged from 23 to 35 years old.
The test uncovered 4 serious usability problems, and gave negative qualitative feedback about the user interface. The mean SUS score of 65.5, was below the standard average score of 68. And the Net Promoter Score (NPS) was -60.
Possible solutions were suggested for addressing these issues. Summing up the next steps, the issues to be fixed, features to be added, and additional testing required for the next iteration were stated.
See the full test report in,
Usability Testing of Med‑fi Prototype, version‑2 (PDF).
(Please note: The PDF will open in a New tab/window.)
Following the iterative product design process, lo‑fi and med‑fi prototypes were built, evaluated, and tested – which set the right direction for improving the product experience.
The Hi‑fi Prototype has been planned to incorporate these inputs, and build a mobile version that would run on Android phones, to simulate the real‑life "mobile app experience".
UI Specifications were set for the following:
- Logo Usage,
- Colors Palette,
- Screen Layout,
- Typography,
- UI Components,
- Items' Images.
General and specific Accessibility criteria have been defined, targeting conformance to the WCAG 2.1, level AA requirements.
Limitations – This set of specifications does not cover the backend data support requirements, or the voice user interface.
Check out the details at,
Hi-fi Prototype UI Specifications (PDF).
(Please note: The PDF will open in a New tab/window.)
Call to Action
Does this project show skills that are valuable for you?
Curious for more? Please also check out: