Sproot AR Wayfinding
Timeline
16 Weeks
Role
UX/UI Designer
Tools
Challenge
In person grocery shopping in large stores, like Loblaws can lead to frustration for some of the following reasons:
- Shoppers can't find items easily
- Lack of personalized recommendations
- Digital coupons and promotions go unnoticed
Retailers face their own issues: missed opportunities to promote deals or suggest relevant products. These gaps highlighted a need for a smart, fast, shopper-focused digital assistant.
Solution
Sproot is an AR-powered grocery companion app. It uses a smartphone camera to guide users through the store and deliver instant product information. Key features of this app include:
- AR Navigation: Real-time arrows guide shoppers directly to the items
- Personalized Recommendations: Based on past purchases and preferences
- Promotion recommendations:Recommended sale items offered to user based on items in their shopping list
The result is a faster, smarter trips for users and better visibility for retailers.
Process & Approach
Research
To investigate the struggles of everyday grocery shopping and shoppers, I conducted a thorough research plan to understand shoppers' needs and find gaps in existing apps. This involved Field Research, User Interviews along with competitive analysis of the competition.
Following a competitive analysis of other grocery apps, I was able to list features they offered and the strengths of that feature, and this led me to discover some gaps Sproot could fill.
Here's a summary of what I found:
| Category | Loblaws (PC Express) | Walmart App | Instacart |
|---|---|---|---|
| Product | Loblaws' grocery pickup & delivery app with PC Optimum loyalty integration | Walmarts shopping app (groceries & general merchandise) | 3rd-party grocery delivery platform connecting customers with local retailers |
| Key Features |
|
|
|
| Strengths |
|
|
|
| Weaknesses |
|
|
|
One important takeaway from this analysis is that these apps focus mostly on online orders and delivery – they fell short in the actual in-store experience. No app specifically focused on helping shoppers inside the aisles or offering real-time promotion nudges. Using this information, it led to focus on the in store experience by making the in-store trip faster, smarter, and less frustrating.
Surveys and user interviews were also conducted to validate the findings above, the core pain points that the project aimed to solve:
- Time is Gold: Shoppers desperately want to save time and make their trips more efficient.
- Health Matters: Easy access to nutritional info and health benefits is a huge priority.
- "Where Is It?!" Most in-store apps just weren't cutting it for navigation or finding deals, leading to wasted time and missed savings.
These insights solidified the core problem: shoppers are frustrated by "not finding items", and missing coupons.
With these insights in mind, I created two personas that embodied the diverse needs and frustrations found in my research. These personas give me a focus point to ensure Sproot's features were designed with real users in mind, driving every decision from AR navigation to personalized recommendations.
Sproot Moodboard: Visual inspiration and color palette for the app.
User Persona: Sarah - Understanding the busy mom's needs and goals.
User Persona: Alex - Catering to the tech-savvy student.
Sproot Storyboard: Visualizing the user's journey through the app.
Design
- User Flows mapped the key tasks: locating items, scanning products, redeeming discounts
- Wireframes and Sketches explored layout and interaction models for AR navigation and scanning
- Visual System:
- Vibrant orange and green palette = energy and health
- Friendly, clean typography for legibility in busy environments
- Prototypes:
- Mid-fidelity screens tested AR overlays and scan interfaces
- Quick usability tests led to clearer icons, simplified menus, and unobstructed camera views
- Final UI prioritized speed and clarity:
- Large visuals
- Minimal text
- Smart cues like color-coded deal tags
Storyboard Example
- Enter Store: App highlights nearby deals e.g. baby carrots on sale in produce.
- Scan Product: A pasta box reveals calories, nutrition facts, and a spinach lasagna recipe.
- Find Item: Olive oil needed? AR arrow points straight to Aisle 4.
- Checkout: A digital yogurt coupon is auto-applied e.g. just scan and save.
This flow illustrates how real-time guidance, smart suggestions, and product insights all work together.
Key Features
AR Wayfinding
Interactive wayfinding feature to help users navigate the store using arrows and a map view.
Personalized Recommendations
Using the users shopping history and preferences, the app will recommend products and deals.
One-Click Checkout
Streamlined checkout process with saved payment options and shipping details.
Digital Lookbook
Interactive digital lookbook with shoppable product links and styling tips.
Final Design
Showcasing the culmination of the design process, the final mockups and interactive prototypes.
Results & Impact
- For Users: Time saved. Smarter decisions. Better shopping experiences.
- For Retailers: Improved engagement, promotion visibility, and data on shopper behavior.
The app bridges digital and physical retail, with AR as a tool to help shoppers find products faster and smarter.
Logo & Brand Design
The Sproot identity was crafted to reflect speed, health, and accessibility:
- Icon: A stylized carrot = natural, fresh, fast
- Motion Lines: Visual shorthand for quick navigation
- Colors: Bright orange (energy) + green (vitality)
- Typography: Clean, rounded, and mobile-optimized
Explorations included variations with other vegetables and motion symbols. The carrot stood out as clear, friendly, and brand-appropriate.
Lessons Learned
- Simplicity beats complexity - especially in AR
- Testing early improves feature clarity and UI visibility
- Real-world environments require thoughtful adjustments to keep overlays usable and intuitive
A field test in a real store would be the next step in order to fine-tune the user experience and accuracy of the AR features.