Full-Service Shopping App: Basket
Role
Timeline
Oct 2023 - Dec 2023
Services
Research, Information Architecture, Prototyping, Visual Design, Design Systems
Challenge
In a Methods of Human-Computer Interaction class at Rice University, my project partner and I were tasked with designing an app made for professional shoppers. The challenge was to create a user-centered experience for full-service shoppers that was grounded in data-driven insights.
Case Study depicting thorough implementation of research and design methodology.
5
research methods employed.
Design System
communicating knowledge of color theory, typography, and visual hierarchy.
CONTEXT
Challenge: Create a user-centered experience for full-service shoppers that is grounded in data-driven insights
My project partner and I were tasked with designing the shopper-side of a full-service grocery shopping app. We employed UX Methodologies and Principles during research, high-level designing, and testing in order to emphasize a focus on user-centered design within the grocery shopping process.
RESEARCH METHODOLOGIES
Discovering the product from all angles
We approached the product research from all sides. We knew we needed to understand the user's needs and tasks, the product's tasks and flows, and the market.
Research Methods & Insights
01
Identifying the User
Why?
To identify: The User, User Abilities, User Limitations
➡️
The average user can shop for more than one client at a time; the user needs help in tracking all of the items and the substitutions.
02
Task Analysis
Why?
To identify: High-Level Functions, High-Level Flows, Information Architecture
➡️
In the average flow, the app must perform all tracking, substitution, and verification tasks. The user simply finds the item and scans it.
03
Function Allocation
Why?
To identify: All Tasks, Human Tasks, Product Tasks
➡️
The user simply finds items and communicates with the client. The app must track items, verify items, coordinate error recovery, and organize the items in regards to client.
04
Analysis of Similar Systems
Why?
To identify: Opportunity Gaps, Market Standards, Product Failures
➡️
Basket must provide item customization, chat photo messaging, and client-chosen replacement functionalities.
05
Decision Tree
Why?
To identify: User's Mental Model, Product Functionalities, High-Level Flows
➡️
The user will flow as if they are shopping for themselves, the app must provide all of the necessary information and decision-making.
Research Summary
Users have 2 tasks: find the item and communicate with the client (if necessary).
Users need an app that can track and organize items, coordinate error recovery, and facilitate communication.
PROBLEM BREAKDOWN
Defining our product
Our research gave us the information to be able to define the following key functions:
STREAMLINE
The app does all the organizing, remembering, and coordinating.
TEACH
App tour to familiarize users with the process.
CUSTOMIZE
Clients have text-input customizations.
MULTITASK
Shoppers can easily shop for multiple clients at once.
PROTOTYPING
Exploring concepts and ideas via iterative prototyping
Low-fidelity prototyping allowed my teammate and I to visualize our ideas and lay out what we each believed to be viable functions and layouts of the app. This further allowed us to compare our ideas, explain our thought processes, and vote on which aspects we did not want to keep and which aspects we wanted to move forward with.
Prototyping in Figma allowed us better establish the basic structure of the app and discover the visual design.
Prototyping Round 1: Lo-Fi Wireframes
Prototyping Round 2: Figma Wireframes and First Round of Interface Design
Basket Before My Iteration
HEY! NOTE: These are the final designs we submitted for the sake of finishing the assignment by the deadline. I go into testing below, but don't worry - I show the final designs that I created in my own time because a bad interface WILL keep me up at night.
TESTING
Usability and Heuristic studies to outline further growth
To close off the semester and project, we conducted 6 usability sessions to uncover any UX successes and pain points. The study was in the form of a Verbal Protocol Analysis where users vocalized everything they were doing, seeing, and thinking when using our product to complete a task.
We also had participants fill out a Heuristic survey with 5 heuristics: visibility of system status, user control and freedom, error prevention, recognition, and help and documentation.
UI DESIGN
Circling back to the interface on my own time
Our professor emphasized that this was a project based on methodology, but I was not satisfied with our end product. I decided to dedicate time to making this an interface I'm proud of. The typography and color palette was chosen to represent convenience, simplicity, and an approachable platform by using vibrant yet pacific colors. The use of borders and rounded edges provides a playful and human touch.
Design System
SOLUTION
Basket: Shopping for others, made just as exciting
A key experience in Basket is the initial tutorial. This tutorial teaches the shoppers how to use the app and guides them through a typical flow.
Basket is up to industry standards and provides item customizations from the client. This informs the shoppers of which items to buy and makes their jobs easier and makes the clients happier.
Basket basically does all the work for the full-service shoppers! Basket organizes all of the items and does so per client, and coordinates all of the communication.
OVERVIEW
TLDR: Going beyond the assignment
Overall, this project was a great opportunity to expand my research experience and practice my skills in visual design. I went beyond the assignment and took the time to expand the visual design of the app through a curated design system and visual experience.
Case Study depicting thorough implementation of research and design methodology.
5
research methods employed.
Design System
communicating knowledge of color theory, typography, and visual hierarchy.
REFLECTION
Basket: Shopping for others, made just as exciting
Learning and conducting HCI Methods has made me a better educated designer. I now know about the large variety of formalized methods that I can use during my research and design processes to make a functional, optimized product.
Not everyone on your team is going to be the perfect teammate. I learned to push through ambiguity and inconvenience and advocate for myself earlier on in the process.
Everything is an opportunity for polish and growth. That itch of dissatisfaction I had whenever I turned in the project designs proved to me that UI is just as important as UX. I used this project as a way for me to grow and showcase my visual styling skills and emphasize the aesthetic craft of a product.