Reimagine the future of Kroger Online Channels
Kroger
Duration: Jan - May 2022
Sponsor: Kroger Technology
Role: UX Designer, Team Member
Team of 7 UX Design students
Overview
Tasks
Kroger Technology tasked our team to generate design concepts that will boost online engagement with college students on Kroger grocery shopping platforms. College students are unfamiliar and often feeling overwhelmed with online grocery shopping, following with multiple anticipated challenges.
My Role
This is my first UX work with a company like Kroger and I was a dedicated team member in a team of 7. I collaborated with my team to develop interview protocols and analysis to discover user’s needs. I also took charge in designing wireframes using Whimsical, and managed to conduct some testing sessions at the end.
After the project had concluded, I made high-fidelity prototypes to best visualize our design concepts using Figma (as a way to practice my design skills)
Insights
1
Users struggle to
find desired information
High-priority info like delivery policy, note to driver, …. were inconsistent and hidden that may be detrimental to the user's decision making.
Ex 1: Return wrong search answer
(eg. coffee instead of fish)
Ex 2: Policies are hidden behind seemingly
non-clickable buttons
2
Users feel little
excitement shopping here
Participants were unaware of the AEON website until testing, preferring to shop on other grocers with cleaner UIs and unique offers.
Ex 1: Traditional browsing menu,
making users overwhelmed
Ex 2: Random, non-relevant ads
and deals for homemakers
Discussed themes became our primary focus because they fit our resources best while adding more values to users and stakeholders when solved. Many lower-ranking usability issues were noted and later resolved.
ideation & dESIGN
Design Goal
Solve high-impact pain points for users while offering AEON new features that will polish its place in the grocers' race in the long run.
Constraint
Cannot assume monetary gifts and highly advanced tech from AEON to be viable solutions.
Iteratively improving wireframes & info architecture
Methods: research, rapid wireframing
While refining ideas sometimes met dead-ends, we all committed to daily collaboration for feedback & discussion.
Insights drawn from competitive analysis, desk research, and mentor feedback accelerated this phase.
Accelerating design process
With a tight deadline for high-fidelity designs and testing, strategic task delegation allowed us to cover multiple areas in parallel. As team lead, I quickly sorted through what needed to be done and assigned sensible tasks to each member's strength and capacity.
Utilize Existing Design System
Designing with ready-to-use components & AEON's branding reinforces consistency and polished look
Content & UX Writing Matter
Gathering images, product description, pricing is vital to design and testing
Cross-check User Flow with Info Architecture
Making sure the prototype doesn't break between different touchpoint and pages
Think Ahead about Testing Protocol
Brainstorming what we wanted to know with the new design
final design - highlighted features
Keep delivery info updated & accurate
Info about delivery time and locations was the top priority for many users shopping online. And AEON has a unique delivery policy for fresh produce where it depends on certain time and address.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Finish Grocery Task Faster with the Interactive Browsing Map
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Special for Families - Convenient for Shoppers
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Family Meal Set
Short-Dated Items
App Integration takes care of Post-Order Experience
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Many more redesigned elements, check them out!
There are more elements that we're really proud of, but I couldn't include them all in here.
Enjoy our end-to-end purchasing experience with the demonstration video & our Figma clickable prototype.
Figma Prototype
impact on aeon's business?
Driving order completion - Decreasing drop-off rate
Current
Users were stuck at certain step and considering dropping the order due to lack of info & clarity
Future
The new flow promotes transparency and seamless transition between many tasks & pages & even platform (web & mobile experiences).
-> This drives completion rates with less shoppers drop off on AEON website.
Improving sales for items through diverse selections
Current
General aisle displays and selections make it harder for users to have great findings
Future
The redesign features new options (family meal kits, short-dated item aisle, etc) that provide a shortcut to shopping for users.
assessment
Methods: usability testing (4 users)
Feedback for our redesign
UX writing matters
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Visibility of elements matters
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
Nudge for review writing still needs more work
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
reflection
Good Leadership = Empowering your Teammates
Our team members come from different backgrounds, spanning from front-end dev to UI design and even human resources.
As first-time leading a design project like this, I recognized that we overcame the biggest challenge by having team members to proactively contribute and take ownership of certain parts.
This diversity allowed us to learn from one another, make faster progress, and bring in new perspectives.
Designing with Constraints Breeds Creativity
Our team carefully considered the constraints within AEON's current delivery system, optimizing what we can improve from a designer's POV.
We made a valuable trade-off by investing time in verifying AEON's operational processes before finalizing our designs. Thanks to our team members, I learned about different technical constraints from their work experience so that we managed to figure things out the way we intended to! Designing around these constraints, although being harder, helps us come up with the best possible outcomes.
Special thanks to our instructor, TA, and all members
This was one of my most intense projects, mainly because I was in the EST timezone when everyone was in Vietnam. The 12-hour time difference, on top of my teammates’ full-time jobs, created barriers to meeting a couple of nights a week. With my school work, the last few weeks were really the last stretch for the team.
I’m very thankful that everyone stepped up to assist me whenever I needed it. We grew to become friends, bonding over the trauma of the project and supporting one another. Can’t wait to meet and have a coffee with them sometime! 😆
Back to Top
