The Challenge
For modern brands, having a coherent and stylized webface and functional webstore is one of the most valuable tools for digital e-commerce.

It is essential to design a streamlined and personalized shopping experience for mobile users first because they are also more selective about their shopping approach on mobile devices and they are the predominant web shoppers.

The Approach
We will adopt a mobile-first approach to our design solution that focuses primarily on branding and stylization.

Listen and Learn

1. Surveying Users

Do's and Don'ts
We conducted surveys to understand users' expectations for webstore product pages and in-store searching systems. We sought insights into what they anticipate when navigating through online shopping platforms and exploring physical stores. Additionally, we inquired about aspects they found displeasing in specific store pages, aiming to identify pain points and areas that could be improved. This comprehensive approach allowed us to gather valuable feedback on user preferences and dislikes, guiding us in enhancing both online and offline shopping experiences.

What Now?
After talking to everyone in our group and looking at the info, it's clear that what users really want are two main things. First, they want a personalized experience where they can easily find stuff that suits their preferences. Second, they want the option to see all the items available so they can explore everything on their own terms. This is why it is important for us to prioritize these functions earlier on in their journey on the page.

Watch and Learn

2. Understanding the Market

Navigation and Searching Systems
Many webstores use overly complex navigation menus. Simplifying these navigation hierarchies and options will allow users to not feel overwhelmed when looking for products.

Common Product Page Organization Systems
By breaking down the page content into key elements and priority, we can build a hierarchy of information to gather an understanding of what needs to be shown to the user first for efficient communication. From this, we can create a framework that feels familiar to users as well as builds a consistent product across multiple platforms like mobile and desktop.

What Now?
By cross-analyzing the information architecture and market research, we can create mockups informed by both the needs and behaviors of our target audience and the current state of the market.

Establish a Familiar Feeling

3. Understanding Product Screens

Wireframing & Mockups
Our approach begins by analyzing the Information Architecture laid out earlier, activating the design based on what users need and expect first.

By utilizing an asset pack in Figma, we can quickly create medium-fidelity mockups to provide clarity on how elements appear on the webpage.

What Now?
By combining the mockups into a cohesive and intuitive navigation solution, we streamline user experience and address previously identified pain points. This strategy enhances user-friendliness, satisfaction, and reduces bounce rates.

Apply Learnings

4. High Fidelity Mobile-First Mockup