Overview
Mobile apps are a critical medium between brands and consumers for businesses of all sizes. I noticed recently that a local retail storefront - Blends - still does not have a dedicated mobile app and began building a prototype for their business.
Blends is a boutique retail business that has been operating several brick-and-mortar locations across Southern California for over ten years now. While their brand is well established with local customers, their business could stand to benefit further by developing an industry-standard eCommerce experience.
The team: Joseph Routt
My role: Research, Design, and Testing
Primary Tools: Figma, Miro
Timeline: 2 weeks
Objective: Create a digital product for mobile that drives sales for the business and provides an elevated experience for the user.
The Research
My first step in this project was an analysis of Blends’ website, as well as several other relevant businesses’ mobile products. Upon inspection, it was clear that Blends' mobile web store was missing some key features that they should be able to leverage.
The homepage for Blends' mobile browser site showed several areas for improvement off the bat.
Upon navigating to the "Footwear" section to view products, it was clear that this site's issues could seriously impede a shopping experience.
After taking a feature inventory of Blends' mobile website as well as other digital products from similar businesses, I moved on to conduct a brief series of interviews. I asked users to tell me about their expectations for a digital retail experience and made note of their insights.
Sample User Insights
The combination of my product research and user interviews gave me a better idea of who will use this product and what their needs are. I synthesized these findings into a user persona - Bobby - to humanize the experiences of using this platform. The Blends online store has products that Bobby wants, but missing features make shopping difficult and inefficient.
I developed a user flow for Bobby with specific goals and features in mind: updated UI, product filter+sort options, and intuitive pathways to specific products -
User Flow
The First Iteration
Once I had my target user and their main problem defined, I was able to begin building my first iteration of the product. My medium-fidelity design combined familiar aspects of popular commercial and social platforms - the bulk of the screen is dedicated to products for users to browse, with the experience being driven by the reimagined navigation bar at the bottom of the screen. A “Filter” CTA near the navigation bar provides options for users to focus their hunt for desired products, as well as sort the order of the products they are browsing.
Once the basis for the platform was established, I observed a few users navigate through it and noted their reactions. Accessing the filter panel and using its controls showed to be intuitive. I used my findings to take my initial prototype to the next level.
The Second Iteration
The most important feature is the updated Filter navigation which reduces screen clutter and adds an option to sort by Sale products. The landing page displays products prominently in 5 columns - this promotes browsing efficiency and aims to increase units sold per transaction by displaying more products alongside each other - inspiring users with different product combinations. Filtered results pages display in 3 columns with a familiar social-media feel.
Products can be browsed and found through the primary navigation, filters, search bar, and newly added launch calendar. This feature adds anticipation and perceived value to designated upcoming product releases to further engage customers and drive sales.
New features to this iteration include clickable products and navigation icons. The search button has been moved to the upper right of the screen and replaced on the primary Navigation with a calendar for upcoming product release dates.
Next Steps
The reiterated prototype meets the goals for our users' shopping experience, but there are still improvements that could be made. The next steps for this project might include increasing navigation affordance sizes slightly, as well as updating the product listing cards to include more features such as sharing links and product description text fields. I attempted to remove excess content wherever possible - emphasizing a precise and efficient shopping experience over comprehensive product communication - however, more space may be created to add further product information and supplementary content down the road should the business desire.