OVERVIEW
In the Summer of 2020, I worked as a UX design co-op at RBS, Ahold Delhaize. During my time at RBS, I worked on a Meal ordering system for one of Ahold's grocery brands. I had a blast working with the primary designer and the dev team and learned a lot about product strategy, developer handoff, bugs, edge cases, design systems, and design precision.
ROLE
UX/UI
Secondary
Designer
TIME
20 Weeks
Summer 2020
(Ongoing)
TEAM
(Juanita Londono)
Primary UX designer
+ (Hannah Lutz) UX lead
+ Dev team
TOOLS
Figma
Mural
Keynote
CLIENT
About client
HANNAFORD
Hannaford is a supermarket chain based in Scarborough, Maine. Founded in Portland, Maine, in 1883, Hannaford operates stores in New England and New York. The chain is now part of the Ahold Delhaize group based in the Netherlands.
As UX designer co-op
MY CONTRIBUTIONS
I started this project by learning about Hannaford. I had several meetings with the primary designer on the team as well as the PO to learn the history and design decisions. After having clarity on designs, I worked on the remaining MVP features for the application. As a secondary designer, I performed the following tasks -
Identified and designed flows for sad path, edge cases, bugs, and discovery
Refined user flow, IA, and completed remaining and new user stories hi-fi screens
Deliver clickable prototype to the dev team for development and implementation
Work closely collaborating with front end developers, QA & stakeholders
01 / Identifying the problem
HOW MIGHT WE?
During the early stages of the project, a Design Thinking session was conducted by the primary designer and PO with the clients to understand the core problem.
How might we solve the stress of preparing meals, waiting in lines, and access to freshly cooked meals for our customers who are hungry and always on the move?
02 / Empathizing with users
PERSONAS
Analyzing the potential user of the problem was the next step. The design team along with the clients were able to identify one user group who feels “I need a simple and convenient way to order, pay and pick up my fresh and trusted meal solutions from Hannaford”.
Mary Larson
Age
Occupation
Family
32 Years Old
Nurse
2 Kids, 1 Dog
Fun Facts
Active Volunteer,
Take kids to school
Foodie
03 / Setting goals
MVP
As I joined the project mid-way, the team had conducted serval design thinking sessions with the shareholders and finalized the MVP features for POC. Design Thinking session was conducted with the client and the team to understand what the need was and how we could possibly approach it. Some of the features that the service was required to offer include -
Register &
Sign In
Managing
Shopping Cart
Menu Browsing
offering
Submitting
Orders
Electronic
Payments
Order History
05 / What's the flow?
HI-LEVEL USER FLOW
This is a project currently being developed under an agile & scrum environment. This means it is constantly changing and adapting to new timelines and changes requested by the client. The use flows that follow show the last the iteration that was presented and what is yet to be determined.
03 / Designing and prototyping
FEATURES I WORKED ON
As the design systems and some MVP features were designed by the primary designer, I worked on the remaining features for the application. I did market research, user flows, low-fo, and hi-fi wireframes for the following features. I used the design systems designed by the primary designer.
Order Email
Confirmation
Payment Processing
Out of Stock/
Unavailable items
Order History, Status & Tracking
View app as
Guest
Lable Text /
Error Handling
02 / Market Research
LEARNING FROM OTHER PLAYERS IN THE MARKET
While working on the MVP features, I remembered Jakob's law - users prefer products that are in line with what they are used to. With that, I identified a few products that were already exemplifying aspects of my design goals really well to see what I could learn from them.
MVP Feature
VIEW AS GUEST
Users can browse the menu as a guest. Continue as a guest will allow users to browse the menu and search items through a search engine. However, if the user wants to place an order, the application will prompt the modal and the user to signup or sign in in order to submit the order.
MVP Feature
ORDER EMAIL CONFIRMATION
Once the user has placed the order through the app, the user will get an order email confirmation on their registered email ID. The confirmation email will include details on when the order was placed, the requested pickup item, the order number, order details, and instructions for picking up the order from the store.
MVP Feature
OUT OF STOCK
In case of out of stock items, the application will inform the user with a red flag "Unavailable". The red flag will inform the user about the unavailability of the item and restrict them from adding that item to the cart.
MVP Feature
LABEL TEXT
Label text is used to inform users as to what information is requested for a text field. Every text field has a label in the application. The ultimate purpose of labels is to help users understand what information is required in one glance.
MVP Feature
ORDER HISTORY
Users can view their order history by going into the profile and past orders. Past orders will keep track of all the past orders the customer has placed through the app. Along with keeping track of past orders, customers can also keep track of upcoming orders. If the customer has scheduled an order for pickup, the customer can track the order through the upcoming order and see the status of the order along with order details.
MVP Feature
EDGE CASES
Edge cases deal with core flow but not necessarily the happy path of the user journey. This includes app update screens, empty states, feedback snack bar, error screens like network error, API error, etc. Users don’t see this screen often but they need it to provide accurate feedback according to the context of the situation.
05 / What's next?
ROADMAP
The design and development phase of this project was about a year and half. The roadmap shows how and when the features were designed and developed by the engineering team. The app is scheduled to have the POC launch by December and will be available for close friends and family in Q1 2021.
.png)
WHAT I LEARNED
Edge cases: A common mistake is to only plan for the perfect scenario. Great designs prepare for the unexpected, as well as the ideal. Working on designs with the front end and back end developers, I learned the skill of thinking it through. I learned to map all the happy and sad paths for every feature.
Be precise with your designs: Be cautious of padding and margins in the designs. Developers won't know what values to set if you don't. I learned to take the guesswork out of it and make the designs pixel perfect.