Re-design
Re-imagining T&T's Digital Experience
A simpler, friendlier, more accessible grocery shopping app. Make your online grocery shopping experience effortless and enjoyable.
Re-imagining T&T's Digital Experience

Problem Statement

How might we redesign the grocery sale browsing experience to instill reliability, clarity, and interactivity?

ROle
UX Researcher, Designer, User Testing
Team
Solo Project
Timeline
8 weeks. Feb - March, 2022
Tools
Figma, Figjam
industry partners
Sheridan College Digital Product Design

T&T App Re-design

The T&T App re-design focuses on streamlining the online shopping experience. My design improves content clarity and adds interactivity. Together, they make the navigation more intuitive and increases functionality to cater towards regular shoppers in an older demographic.

No items found.
Context

During the Pandemic, online grocery shopping has begun to play a huge role in the daily lives of many. Even as we return to pre-pandemic lifestyles, online grocery shopping is still in high demand. However, many apps can be difficult to navigate especially for older and less tech-savvy users despite often being the main benefactor of grocery apps. A great example is the T&T app which I found to be cluttered, distracting, and confusing. Most users were incentivized to use the app for checking their current sales. However, the layout and placement of the content confused many users ultimately making the app unreliable.

The Solution

Improve content clarity

  • Use white space, borders, and shadows to group and prioritize content without overstimulating the senses
  • Clear distinction between online and in-person sales. Adding disclaimers where needed.

Improve Interactivity

  • Allow users to save items on in-store flyers to curate a grocery list
  • Easily access and edit grocery list from the homepage

Research

Based on my research from reading app reviews and asking my friends and family, I discovered one common theme: people want to have a quick way to browse for deals and order groceries, but the current app is hard navigate and lacks clarity which causes users to abandon the app.

Personas

From these reviews, I developed 2 user personas which approximately represented T&T’s user base. My target audience are parents from ages 30-50 and post-secondary students ages 20 - 30

T&T App Design Analysis

For my re-design, I chose to work on the user flow involving browsing for deals because with a focus on their UI elements.  This user flow was the most relevant to my research and actionable. I noticed several flaws with the current design of the T&T app:

  1. Type scale: Fonts are too small making it hard to read
  2. Grid System: Certain elements are not aligned confusing the user's line of vision
  3. Colour Palette: Lack of consistency. Bold colours being used on non-call to action items. Using red on some CTA buttons
  4. Iconography: Lack of icon labels. Some icons aren't recognizable.
  5. Information Hierarchy: Too much content on each screen. Non-essential items (ie. posts) on the navigation bar. Lack of hierarchal contrast.
  6. Interaction: Some button labelling lacks clarity. Has inputs or interactions that aren't helpful to users (ie. typing in price range for a grocery store where most items are under $100.

User Flow and Wireframes Redesigned

User Flow

I addressed made 3 key changes in the user flow

  1. Clear distinction between in-store and online deals
  2. Interaction directly on the in-store flyer
  3. Curation of grocery, and saved deals lists

Wireframes

The re-designed wireframes incorporated the new user flow and focused on these key changes:

  1. Add negative space
  2. Improve information hierarchy
  3. consistency

Style Guide & UI Kit

My goal was to convey a minimalistic visual design that was easy on the eyes. The typeface Inter is simple and readable for all ages. Sticking closely to T&T's brand colours, green was the primary colour of choice which was reserved for buttons and other call to actions. I also made sure to check that every colour passed the contrast requirements for accessibility.

User Testing

My Hypothesis for this redesign was

I believe that a simpler UI will make the shopping experience more engaging and enjoyable

My steps towards user testing were

  1. Solidified my goals
  2. Create a test plan
  3. Synthesized my findings

Low to High Fidelity

Solution Outcome

Gathering the insights from my testing, here are the changes I made for the final iteration:

  • More at-a-glance cards and touch points on the homepage
  • Make interactivity option on in-store flyer clearer
  • Clarify iconography for "saved flyer items"
  • Tap to delete items

Try it yourself!

What I learned

Having completed my project, I realized that not all designs need to be flashy or cool. Sometimes the layout and information architecture is more important.

Other Projects 👇