Project overview
Project overview
Embedded Files
The product
NaviShop is a mobile app for a local grocery store that helps in-store shoppers easily find products.
It features an interactive store map, real-time product search, and aisle-level navigation-like “Google Maps for groceries.”
The problem
Shoppers waste time searching for products they know are in stock, leading to frustration, abandoned baskets, and lost sales.
The goal
Transform grocery shopping into a smooth, guided experience by giving users an intelligent, personalised navigation tool that improves satisfaction and boosts sales.
Project Understanding the User
Project Understanding the User
Research methods
Interviewed 5 grocery shoppers
Ran a short survey with 10+ responses.
Focus: navigation habits, frustrations, shopping list features
Key pain points
Hard to find specific items quickly
Long shopping lists slow things down
Poor signage adds to confusion
User Journey
User Journey
This journey map follows Maria, a busy working mum, through her typical grocery trip.
It highlights key frustrations and moments where smarter in-store navigation could reduce stress and improve her experience.
Early Ideation
Early Ideation
I built user-focused flows to ensure that my personas could successfully complete their key objectives while reducing any existing pain points.
Paper wireframes
Paper wireframes
Focusing on the core features identified during user research, I sketched the first wireframes using pen and paper.
Sitemap
Sitemap
I built user-focused flows to ensure that my personas could successfully complete their key objectives while reducing any existing pain points.
Website wireframes
Website wireframes
After sketching out ideas on paper, I moved to Figma to create low-fidelity wireframes for the
website.
Elevating ‘Downloads, Guides, Resources, and Make a Shopping List’ above the fold on the homepage is optimized to align with users’ top tasks, ensuring immediate visibility and effortless access.
Elevating ‘Downloads, Guides, Resources, and Make a Shopping List’ above the fold on the homepage is optimized to align with users’ top tasks, ensuring immediate visibility and effortless access.
Website wireframes
Website wireframes
After sketching out ideas on paper, I moved to Figma to create low-fidelity wireframes for the website.
View Figma, Lo-Fi Desktop prototype
Elevating ‘Downloads, Guides, Resources, and Make a Shopping List’ above the fold on the homepage is optimized to align with users’ top tasks, ensuring immediate visibility and effortless access.
Elevating ‘Downloads, Guides, Resources, and Make a Shopping List’ above the fold on the homepage is optimized to align with users’ top tasks, ensuring immediate visibility and effortless access.
App wireframes
App wireframes
To map out core functionality and layout. is optimized to align with users’ top tasks, ensuring immediate visibility and effortless access.
Core screens and flows mapped out to test list creation, navigation, and personalisation features.
View Figma, Lo-Fi App prototype
Usability study: Key insights
Usability study: Key insights
High-fidelity designs
High-fidelity designs
Refinements improved clarity, navigation, and interactivity across platforms.
🖥️ Web
📱 App
View Prototype:
Watch Prototype Walkthrough:
View Prototype:
Watch Prototype Walkthrough:
High-fidelity designs
High-fidelity designs
Refinements improved clarity, navigation, and interactivity across platforms.
Colour contrast test: primary blue (#2A6BE9)
High-Results & Reflection designs
High-Results & Reflection designs
This project provided valuable insights into user behaviour and design impact. Here’s a summary of what worked, what could be improved, and the overall design value delivered.
Let’s connect!
Let’s connect!
Visit my website: https://www.marekconnellenglish.com
Reach out: MarekConnell@hotmail.com
+34 622 403 884
Page updated
Google Sites
Report abuse