UX DESIGN — CASE STUDY
My assignment in this group project involved creating a website application for managing grocery lists. While one might expect a mobile application for this purpose to be more common, I was specifically tasked with designing a website application within an 8-hour timeframe, and I successfully accomplished that.
The aim of this application is to enhance the overall grocery shopping experience. This project was done within a group of 5 with 4 other UX designers.
Objectives
The primary objective is to create a website application for managing grocery lists, aiming to enhance the overall in-person grocery shopping experience. The specific design task highlights the importance of assisting users during their in-store visits rather than emphasizing online ordering.
Design Goals
The design goals are centered around helping users save both time and money during their grocery shopping. Additionally, the objectives include increasing traffic, both to the physical store and the website, while also streamlining and expediting the flow of customers.
The Process
Interview
The initial step in the systematic design process is the Discovery phase. In the context of this project, our discovery efforts were confined to qualitative research, involving interviews with a few friends and conducting comparative analyses.
Given the project's emphasis on enhancing the in-person grocery shopping experience, as outlined in the design task, our focus was directed towards understanding users' challenges and opportunities in the context of physical grocery shopping rather than online ordering.
During the user interviews, we probed into specific questions aimed at uncovering insights into the hurdles and potential enhancements related to the in-person grocery shopping experience.
These findings indicate
- Users prioritize health and sustainability.
- Users, who lead busy lives, consider time-saving to be crucial.
- Users express a keen interest in methods to save money.
Comparative Analysis In this part, I performed a rapid comparative analysis of various grocery stores and food recipe websites to explore their distinct features and processes. However, to streamline the process and save time, I opted not to tabulate my findings.
Define / Analysis
Business Understanding (SWOT Analysis) In the systematic approach, the subsequent step involves thoroughly understanding and defining the business, ensuring a clear grasp of its SWOT analysis—strengths, weaknesses, opportunities, and threats.
Given the absence of an actual business in this specific case, certain assumptions had to be made. Nevertheless, a comprehensive understanding of the business's SWOT analysis contributes to fostering empathy for both the user and the hypothetical business throughout my design process.
Ideation (Diverge and Converge) Our subsequent step involved initiating the brainstorming and ideation process. Following that, we selected ideas that proved most relevant and crucial for this stage of the design, discarding the others.
In this convergent phase, we applied the principle of the Minimum Viable Product (MVP) and evaluated each idea using the impact versus effort matrix to inform my decisions. This approach aligns with my belief that a UX designer plays a role in making business decisions alongside handling visual aspects. Often, discussions about design solely focus on visuals, and I aim to broaden that perspective. Some of the ideas excluded during this phase hold potential and will be considered in the subsequent planning stage.
Persona
User Understanding The persona is crafted using data collected in the discovery phase. The redesign of the website will be tailored to meet Sara's specific needs and preferences.
Developing the idea in response to Sara's preferences, we considered a scenario aligned with our persona's needs and conducted a user flow, illustrating her journey through the website.
User's Needs
- Emphasis on healthy, home-cooked meals
- Efficient time and money-saving strategies
- Selection of fresh in-store produce
- Cooking ideas tailored to dietary preferences
Proposed Solutions
- Creation and sharing of a shopping list
- Introduction of categories for different diets
- Coupon loading feature on the user's account
- Aisle locator functionality for product location
- Inclusion of recipes for cooking inspiration.
Scenario, Flow Diagram, Site Map
User Scenario Uncertain about what to cook, Sarah seeks ideas. Logging into her Fresh Market account, she navigates to the recipes page, selects a food category, and filters based on her diet. Choosing a recipe, she adds the required ingredients to her list and promptly shares it with her husband.
After several iterations, we crafted the site map. This represents the final version after refining it through multiple iterations. In this assignment, our emphasis was on the recipe pages, as I didn't find existing websites with the specific features we envisioned. Let me walk you through the iterations that led to this final version.
As evident from the progression...
Design: Ideas, Sketches, Wireframes, and Iterations
Home Page IterationTo streamline the process, we promptly delved into developing the digital wireframe, minimizing initial work on paper. While we typically lean towards crafting paper prototypes with limited testing when time allows, in this instance, we documented our progress in real-time as we created these digital wireframes. This approach enables us to track iterations and every design decision made.
(I believe showcasing the process is invaluable, emphasizing the journey rather than solely focusing on the final prototype. This way, we can visually recall and understand the rationale behind each design decision, preserving the nuances that might be overlooked without a step-by-step visual narrative.)
Here are several iterations, with Version 4 representing the final wireframe. In the subsequent steps, we'll illustrate some design decisions that guided the evolution from Version 1 to Version 4. We begin with a simple foundation and progressively enhance it. The initial iteration of the landing page featured a straightforward layout with an infinite scroll of products, but it lacked desirability.
For the second version, we introduced product categories.
Version 02 Added product categories to the landing page
Version 03 In the Upper Nav Bar: Store Locations | Lifestyle | Profile/Account
In the Landing Page: Carousel for product categories | Deals | Coupons | Seasonal
Version 04 In the Landing Page: Added the ability to add products to a list | Enabled coupon loading to the account
Visual Design
Color SystemDue to time constraints, my Graphic Design skills came handy in this part! I swiftly selected a color palette for the initial design. Utilizing Adobe Stock colors, I sought input from friends to determine which set of colors most evoked the imagery of fresh produce. This process guided the selection of my preliminary colors.
Here is the preliminary color code I've chosen. Feel free to write as much as you'd like—this text will consistently maintain a visually appealing appearance, whether you opt for longer paragraphs or just a few words.
Logo DesignVisual design holds significance, and a thoroughly researched and tested logo is crucial. Given the time constraints, here is the logo our team crafted for the preliminary design.
We opted for a circular shape to symbolize the form of various fruits and some vegetables. The chosen typeface closely resembles handwriting, conveying a sense of freshness. The idea is that it's so fresh that there wasn't enough time to type and print it—a nod to the handwritten nature of shopping lists. After showcasing these logos to another group, we selected the one that garnered the most positive feedback.
Typography We aim for clear communication with users, particularly considering potential eye fatigue from prolonged screen exposure. Opting for legibility, readable sizes, and strong color contrast is essential to ensure a pleasant user experience on our website.
To make an informed decision, we presented users with samples using example sentences in both lowercase and full capitalized forms, gauging their reactions. Eventually, wee selected Arial and Avenir.
While usability testing on the final prototype would be ideal for typography and color palette selection, time constraints led us to rely on our design instincts during the prototype development. The table above illustrates the typeface and size choices made in the absence of usability testing.
(In a more extensive project, I would allocate additional time to thoroughly research and select typography, acknowledging its pivotal role in design.)
Interactive Prototype
Reflections
Measure Considering metrics for assessing product success is paramount. Key metrics to consider include:
Time spent by users on product and recipe pages.
Usage of recipe ingredients to generate grocery lists.
Frequency of users utilizing this feature.
Rate of retention, indicating the number of logged-in users creating lists.
Rate of return, measuring users who come back to create additional lists.
Sharing frequency, gauging how often users share their lists or recipes.
Security cameras can provide metrics on the average flow of customers in the store.
Implementing a "Recipe of the Day" and special deals tailored to user profiles and dietary restrictions.
Assisting users in decision-making by recommending recipes and products.
Allowing users to specify the brand and type of product when adding items to their lists.
Facilitating the generation of user reviews and ratings for both products and recipes.
Next Step Moving forward, introducing AI can enhance the user experience:
Implementing a "Recipe of the Day" and special deals tailored to user profiles and dietary restrictions.
Assisting users in decision-making by recommending recipes and products.
Allowing users to specify the brand and type of product when adding items to their lists.
Facilitating the generation of user reviews and ratings for both products and recipes.