Designing for mobile e-Commerce — a UX design challenge from Yelp
Product search and detail page explorations optimized to increase conversion rates
--
Context and takeaways
I did this design challenge for Yelp’s Design team. Solving an open ended problem such as this one feels like an open canvas since you tend to have little-to-no insight into data points and user behavior.
I wanted to share my process and outcome with anyone going through interviews and is going to encounter similar open-ended design problems.
Time spent: 45 mins on research and planning, 3 hours on product search page and detail pages (including prototyping), 45 minutes documenting and submitting.
Roles assumed: IxD, visuals and a bit of user research.
Tools used: Sketch and Principle for Mac.
The Problem
—
Create an e-commerce product detail and search experience for Yelp’s Swag Store.
Components in a generic product
I was provided with a list of necessary product details to be surfaced in the designs. A generic product consisting of those details looks like this:
The experience you create needs to be optimized towards getting the users into the purchase funnel.
Preliminary research about the problem specifics
In order to gain a deeper understanding of the problem and mobile e-commerce, I started off by reading a few articles about:
- Behavior of users on mobile vs Desktop
- How tweaking a few things can lead to a better conversion rate
- …and so on
So given the components of the item and scope of this case study, our high level goal is to eliminate the problems such as complex navigation, poor loading time and poor usability.
In the next section, let’s define clear goals, scope and design principles we can adhere to.
Goals
—
User journey
Assumed business goals
Since we are aiming for conversion, I assumed a few business goals while brainstorming:
- Push the user forward: Optimize the design to funnel the user forward in the flow towards checkout and then placing the order.
- Encourage user input: Build trust around the product by surfacing and encouraging user generated content.
- To avoid confusion, the items in Yelp Swag store will all be single fulfillment, i.e Shipping or Pickup.
- Surface promotions and create urgency: Ties back to pushing the users forward, promotions and offer deadlines help the users think more in terms of purchasing.
Design principles
While researching and learning more about conversion, I identified a few design principles which served essential during decision making.
Principle 1: Less is more
Minimal and digestible content which is relevant and contextual.Principle 2: Clear way to move forward
Visible and actionable calls-to-actions at all points in the journey.Principle 3: Keep users engaged
Provide high quality and relevant content.Principle 4: Build trust
Surface reviews and make them dependable.Principle 5: Do the work for the user
Pre-select options for the user by predicting what they might select (anticipatory design).Principle 6: Urgency
Create urgency for the user by using tools like promotions, offer deadlines and so on.
Product search page for Yelp Swag Store
—
Task
User is looking for a specific product on Yelp Swag Store and searches for it.
Competitive audit
The first step in solving a problem with existing solutions should always be about exploring the domain and gather ‘goods’ and ‘bads’. For this challenge, I spent 15 minutes capturing three different categories of mobile web stores’ ‘search result’ pages.
Exploration
Next step, after understanding how other websites are handling similar problems was to explore different solutions. Referring back to our design principles and given information about product details, here is a sneak peak of what I came up with:
The ones with a green smiley were the ones which I wanted to explore further in Sketch. Next step was to fire up Sketch and start putting together visuals.
Visuals
I put together four screens explaining the search and long-press concept and then created a prototype to showcase how it will behave.
Assumptions
- I was uncertain of the inventory for Yelp’s Swag Store, but based on my best guess, I assumed that the inventory isn’t huge. This allowed me to strip off functionality such as sorting during search.
- There can be multiple entry points into the search results page. For this design exercise, I assumed that the user is searching for a product using the search feature.
- As I explored “long press” functionality, I was bugged by the thought that users won’t know. But I felt it is worth exploring because it takes the product straight to user’s cart avoiding product page altogether. (higher conversions)
- I also assumed that the Cart and Product page can handle complexities of updating the quantity.
Our goal at search level is to make the user add it to cart and continue browsing.
- I chose mobile over web because I envision more people buying swag products on their phone.
Design decisions
- Grid v/s List view: I favored grid view because it shows more search results in a single fold.
- Add to Cart not shown on search results page: Based on my previous experience, I felt that it’s safe to assume that most users purchase a product without looking at its details. Hence, I introduced long press.
Product detail page for Yelp Swag Store
—
Task
User is browsing details for a product he is interested in.
Competitive audit
I picked out a few product page screenshots and started ideating.
Exploration
In contrast to product search, I did a quick exploration (20 mins) within Sketch while still referring to the above competitive audit.
Visuals
Assumptions
- Additional elements tied to a product : Quantity (can be more than 1) and variants (options like color and size) were assumed and added to the product detail page (PDP).
- Entry points to PDP can be many including home page, product feed, search results and so on. For this challenge, I assumed that the user is landing from the search results page.
- Fulfillment channels: I assumed that all items in Yelp Swag Store are shipping items. Other kinds such as pickup can be thought about in later iterations.
- Audience: I assumed that this design is aimed for a millennial and younger audience. Just best guessing.
Design decisions
- Color choices: Referencing the above color chart based on shopping audience, I wanted to keep the tone of the app light and bright. I decided to explore with yelpy-red over white for the design. Some of the other choices were font (Open Sans) and font-color (partial black).
- Summarized reviews: There is a lot that can go on the product page. I wanted to keep things minimal and straight-forward. Summarizing user reviews until the user clicks for it keeps the page from being too busy.
- Prioritizing information on the page: This is coming from a personal preference and is subject to heavy testing. This also affects conversions directly. On the product page: available variants, quantity and price forms the top three things that are shown on the top in my design.
Closing thoughts
—
Reflections
I got really into it when I started researching on conversion and user behavior. There is a lot to digest. There are a ton of resources available to learn about buying experience vs user behavior. I limited myself to a few constraints and assumptions which helped me converge.
I brainstormed using paper, used Principle for prototyping and Sketch for visuals. I did this exercise in one sitting. I feel I could change that. Only because I feel solving something like this needs breaks in between and you need to come back with a fresh mind to think deeper and broader. The end result could still be made minimal (It still is text heavy).
Next steps
- Going to be super brief: Iterate on this, Think about: sharing, favoriting, more recommendations, other steps this page impacts and so on.
And that’s a wrap! More about me here: https://rachit91.github.io/
