Mike's Camera: A streamlined mobile shopping experience

Project Overview

Customers want the ability to shop via their phones, but the Mike’s Camera website is hard to navigate on mobile devices. This project aimed to design an engaging mobile eCommerce app that gives Mike’s Camera customers an easy-to-navigate and enjoyable mobile shopping experience.

Design Process

2 week sprint | Individual project

I used an agile approach with 4 phases including: Discover, Define, Develop, Deliver.

Design Toolkit

Discover

Research activities during the discover phase included performing a 1) competitor analysis, and 2) user interview with a local Colorado photographer.

Competitor Analysis

The aim of the competitor analysis was to identify any key features present in competitor mobile apps and websites that contributed to a strong shopping experience.

User Interview

After familiarizing myself with the competitors, I shifted towards developing a deeper understanding of users. I conducted an interview with Jonathan who matched the business’s target customer.

Jonathan is a busy wedding and events photographer who likes the idea of shopping local, but usually does a majority of his camera gear shopping on the B&H Photo mobile app due to the easy on-the-go access that fits his lifestyle.

During the interview, I led discussion topics covering the when, where, why, what, and how of his photography gear shopping habits.

Define

Insights from Research

Mobile = accessible for users

Photographers tend to be on the go. Having a mobile shopping experience makes shopping for photography gear significantly more accessible for this user demographic.

Intuitive categories + robust filters are key

Camera gear includes a wide range of products. Within subcategories, products have differentiating features that customers use to filter for what they want to find. Intuitive categories and robust filters empower users to easily find products.

Not all customer reviews are created equal

Users place more trust in customer reviews written by professionals and serious enthusiasts compared to reviews written by more inexperienced consumers.

Wishlists are a crucial step in the user journey

The high price of photography gear means that buying new gear is typically a big financial undertaking for users. Thus, users like to create shopping wishlists that include photography gear they're currently researching, but aren't yet ready to buy.

The Problem

Busy photographers rarely have enough time to shop at Mike's camera store in person with the demands of their photography businesses. They find it difficult to navigate the Mike's Camera store website from their phone so they end up shopping at other retailers who provide an intuitive mobile-centric shopping experience.

The Challenge

Design an engaging mobile eCommerce app that gives Mike’s Camera Shop customers the ability to shop for camera gear easily from their mobile device.

Develop

Product Categories

Since product categories played an important role in delivering an intuitive shopping experience, my first task was to flush out product categories that made sense from the user's perspective. I enlisted several users for a card sorting exercise to observe how they organized products sold by Mike's Camera.

I took the product categories generated during the card sorting exercise and mapped out a formalized product hierarchy to incorporate into the app design.

User Flow

I then created a user flow walking through the happy path for a shopper purchasing a product via the mobile shopping experience.

The user flow is split up into three channels that outline the a) current screen, b) what the user sees on that screen, and c) user action for each step of the process.

Wireframes

After developing the user flow, the next step was to create wireframes that illustrated the basic flow. From the requirements generated during user research, I had validated that users needed to easily navigate through the category options as well as save products to their own wishlist.

Deliver

High-Fidelity Design

Intuitive product categories

A clear product hierarchy and intuitive categories allow users to quickly drill down to view products.

Convenient shopping wishlists

Products can be added to a wishlist easily via the product page. A dedicated wishlists tab makes it quick to access wishlists from anywhere in the app.

Differentiating Customer Reviews

When reading product reviews, users valued knowing the experience level of the customers who wrote the reviews. During user testing, users noted they were spending a lot of time reading through customer reviews to find ones written by experts.

To help users find expert reviews more quickly, the final design iteration prompts reviewers to indicated themselves as Beginner, Enthusiast, or Pro when submitting their product review. This information is then prominently displayed under the title of each customer review.

Full-Fidelity Prototype

To bring the design to life, I built a prototype using InVision which included UI animations created in InVision Studio. A portion of the prototype is shown below.

Takeaways

This project taught me some of the fundamental aspects of designing for the user. It was exciting to see how the final design outcomes were driven by insights from user research and feedback from user testing. This process gave me the opportunity to understand how relevant users are to every aspect of the design process.

Next Project

Chase Bank