A 24-hour collaborative tech sprint / hackathon challenging BrainStation students to create digital solutions for one of BrainStation’s Industry Partners.
Role: UX Designer
Timeline: 24 Hours
Tools: Figma, Zoom
Platform: Responsive Website
Team: (1) UX Designer, (2) Data Analysts, (3) Software Engineers
Result: Winning Team 🎉
About Loblaw Digital
Loblaw Digital is the digital and e-commerce division of Loblaw Companies Limited, one of the largest food and pharmacy retailers in Canada. The company's digital offerings include online grocery shopping, pharmacy services, and various mobile apps and platforms for managing prescriptions, loyalty programs, and more.
Problem Space
-
The act of grocery shopping is expanding well beyond the wall of physical grocery stores.
-
COVID skyrocketed the demand for online grocery experiences and home grocery delivery.
-
This consumer trend has continued, however, online grocery shopping still faces barriers of:
-
High cost expectations
-
Poor product selection
-
Lack of flexibility
-
How Might We
How might we imagine the future of online grocery utilizing innovative digital solutions?
Process
With only 24 hours to create our solution, my team had to really condense our process. That being said, we still stayed true to the principles of design thinking, validating our assumptions as much as possible and taking a data-backed approach to our decisions.
We created the following framework to work from:
💡 Click any of the links to jump ahead to a step of the process
Then to wrap things up, we prepared a presentation for the Loblaw Digital stakeholders and reflected as a group.
Brainstorm
Current Audit
Our first step was to audit the current experience. We took note of strengths and weaknesses with consideration to usability, accessibility, and other design principles.
After discussing as a group, we decided the best opportunity for improvement was user personalization.
In the current landscape, one of the barriers to online grocery shopping is a lack of control over the experience despite the fact that they may have highly specific preferences that won't be captured by the SKU alone.
.png)
Validation
The data analysts worked to validate our assumptions and provided the following statistics:
Identification
Finally, as a team, we discussed the qualities of our target user and a user persona began to emerge.
This resulted in the creation of a revised How Might We Statement:
How might we increase personalization for Loblaw online shoppers so that their experience is more tailored to their preferences & needs?
Ideate
Persona, User Stories, and Task Flow
The target user persona that emerged was a budget-conscious shopper.
Due to time constraints, we were unable to conduct extensive user research for our project. Therefore, we decided to focus on a user demographic that we were familiar with either from personal experience or knowing someone similar to them.
.png)
As our team's UX designer, I took the lead in creating some user stories based on our persona.
.png)
These user stories then informed the task flow.
Inspiration
I drew UI inspiration from other online grocery solutions and budgeting solutions
Build
Low Fidelity Wireframes
Dashboard Home
The main purpose of the dashboard home is to display the user's budget status for the month in multiple views for easy and convenient scanning and digestion.
Settings & Preferences
The user can customize their budget and shopping preferences so they can get a more personalized experience.
Product Recommendations
Machine learning will recommend the best products for the user based on buying patterns and overall demographics.
**Due to time constraints, we did not include the product recommendations as a full feature screen on it's own, but rather incorporated it into the main landing page.
High Fidelity Prototype
Click through the prototype here:
Watch a walkthrough of the prototype here:
Present & Reflect
Take a look at what we presented to our stakeholders!
Next Steps & Future Considerations
By implementing machine learning technology, Loblaw can offer a more personalized shopping experience. It works by analyzing the demographics and buying preferences of the user, and recommending items they might be interested in. These recommendations are based on availability, promotions, and are aligned with the goals of both the user and the business.
.png)
Success Metrics
-
Overall revenue increase after the dashboard establishes
-
Percentage of items purchased through our dashboard
-
Time spent on the dashboard page
Next Steps
-
Ask for ratings of users for their experience on the dashboard
-
Add shared shopping list feature in the dashboard
-
Promotion to invite friends/family as new users
-
Challenges & Key Learnings
As a part of my project for Loblaw Digital, my team and I were tasked with improving the current online grocery experience.
We discussed some solutions that could be very helpful to the brand, but not as helpful to the user, and some solutions that would be very helpful to the user but could be detrimental to the brand’s profits.
The solution we landed on (creating an enhanced dashboard experience) was a huge value-add for both the user and the brand. It is helpful to the user because it would allow them to have a better understanding of their spending patterns and recommended products, and was beneficial to the brand because it fostered trust between them and their customers and also provided insight into their customer’s patterns and goals.