Shop.Live E-commerce Platform Designed by Eliana Feng @ Polaris Design.
PROJECT OVERVIEW
Project Label Branding, Creative Direction, UX/UI Design, Digital Product Design.
Clients E-commerce Startup — Shop.Live
Intended Users The targeted users of this e-commerce platform are budget female shoppers between 18-32.
Timeline April 2019-June 2019
Role & Responsibilities
Eliana Feng @ Polaris Design — Branding, Creative Direction, UX/UI Design, Digital Product Design.
Kenny Hu & Q.P @ Shop.Live — Product Management.
International dev team @ Shop.Live — Full Stack Development.
PROJECT DESCRIPTION
Shop.Live was looking to launch an e-commerce platform featuring low-cost female clothings and shoes. Shop.Live was looking for 100% custom-made design and build (no Shopify).
Eliana Feng @ Polaris Design led the end to end design of the desktop e-commerce platform, working with in-house developers and product managers at Shop.Live.
Creative direction
Before starting any design, it is important to us that we thoroughly understand your product, its users, and the business strategy.
Shop.Live e-commerce platform sells in-house products as well as third-party brands, thus the branding of the platform should be relatively simple, clean and neutral, not to over-shine the third-party products/brands. Furthermore, the Shop.Live brand should also speak to its intended young and female demography. Below attached a sample of the styletile.
Design process
Syncing Up on Business Strategy and User Needs. After conversations with Shop.Live about the product and business strategy, Eliana Feng @ Polaris Design created a sitemap that includes all the core features needed for the launch. A sitemap is crucial in helping visualizing product and business strategy, as well as facilitating conversations between designers, developers and all stakeholders.
Design Research. Shein.com is the main competitor that Shop.Live wanted Polaris Design to look into. Shein.com has become one of the most successful e-commerce startups selling products at an extremely low cost. We also researched on other e-commerce platform design for comparison, and Carbon 38 is a well-done example.
Shein.com: low cost clothings and shoes, hence the design is heavily focused on the “sales” aspect. However, from the user experience perspective, it is too “in your face”. The clash of colors, multiple typographical style creates an unclear and messy visual hierarchy, and therefore, makes it hard to navigate through the platform. Low cost doesn’t mean that the user experience should be “low quality”!
Carbon 38: premium sports clothings. The editorial design and photographies make the products very attractive, and create an enjoyable and effortless shopping experience on the platform.
Even though Shop.Live sells low-cost products like Shein.com, we want to create a “premium” digital user experience that makes the whole shopping experience seamless. This requires a balance between the business strategy of emphasizing “sales” and the design goal of creating something attractive.
Design Explorations and Wireframing.
Homepage Design Sets the Tone. We started from homepage design because it activates the brand and sets the tone for the overall creative direction. The header and footer design is equally as important, because it incorporates all the important navigation links.
UX Design Challenge — Pagination, Infinite Scrolling or Load More. This might not seem like a design challenge, but it is crucial in creating a seamless user experience on the product category page, shown as below. Most e-commerce websites seem to take the pagination or infinite scrolling approach. According to a study from Baymard Institute, apparently only 8% of the top US 50 e-commerce websites use “Load More” approach! Below is our UX heuristic analysis and findings from several UX research studies:
Pagination: generally not an optimal user experience. It creates the perception that the platform is slower and adds to cognitive load as users need to figure out which page to go to next. According to the study from Baymard Institute, users spend much more time on the products on the first page as a result.
Infinite Scrolling: this does not require additional user actions other than the natural behavior of scrolling as well as shows the breadth of products quickly. However, it makes it hard for users to get to the footer which contains important navigation links.
Load More: this allows users to compare products across an entire list, instead of having to go up and down a page. However, this still requires active clicking and additional user actions.
The more optimal solution we found is to combine infinite scroll and load more approach. This combine approach is to initially load X amount of products, then lazy-load Y amount of products and then show the “Show Me More Products” button. After users click on “Show Me More Products” button, we load X amount of products, then lazy-load Y amount, and then show the button again. Repeat. In this combine approach, users are allowed to compare products across an entire list but does not need to actively click to see more as often. As for what the X and Y number should be, these should be fine-tuned and user-tested when the product comes live so that we can collect real user data.
Incorporating Business Strategy Into Design (Part I). In an effort to support the business strategy of marketing low cost products (mockups below),
#1 across all pages, a banner is designed to be sticky on the top that markets any discounts.
#2 top navigation across all pages, “Before They Go” (on sale) is a prominent navigational item.
#3 under any category (“Tops, bottoms, dresses or shoes”), in this case “Tops,” there is always a prominent sub-category of “Sale” for that specific category.
#4 on the homepage, the hero section is designed to market sales items.
#5 on the homepage, “Before They Go” would be the top editorial section.
#6 footer across all pages, “Before They Go” is a prominent footer link.
Incorporating Business and User Needs Into Design (Part II). There are many KPIs success metrics that an e-commerce platform could track. The check out flow design is crucial to many different KPIs, including the number of transactions, shopping cart abandonment rate, revenue per visitor etc. Whether requiring new users to sign-up/create an account in order to check out is an important decision. In conversations with Shop.Live PM team, we discussed the pros and cons of requiring new users to sign-up/create an account in check-out:
Cons: it might impede users’ goal of checking out efficiently, and hence resulting in a higher shopping cart abandonment rate.
Pros: it is beneficial from a business standpoint as it could help with new user acquisition and user retention; from a user’s perspective, it allows them to check out more efficiently (saving user information) in the future and have a more personalized shopping experience, such as saving items, tracking orders, accumulating reward points and many more.
The UX design challenge here is how do we incorporate sign-up in the check-out flow in a more seamless and intuitive way, so that it doesn’t impede users’ goal of checking out fast. Below is what we propose at Polaris Design, designed by Eliana Feng.
Users’ primary goal is to check out fast. Asking users to create an account in check-out explicitly interrupt users’ goal. However, as you can see, all the information required to create a new account is actually the same information needed to check out for the first time for new users. What if we reverse the process? Saving users’ information as they go through the check-out process and only asking them to enter a new passport at the end? It is the same amount of information that we are asking from the new users, but we do it without explicitly interrupting users’ goal.
Below is the proposed user flow in design, created by Eliana Feng @ Polaris Design.
Intricate Process Made Simple by Diagrams. At Polaris Design, we love diagrams. We love making logical diagrams that makes user flow and user journey clear. One of the most intricate user flows in e-commerce is the sign-in and sign-up process and how these two interact with each other. To facilitate the conversations with developers and stakeholders, Eliana Feng @ Polaris Design created the below diagrams.
The first chart is to illustrate how the whole sign-in and sign-up process works from a birds-eye view.
Below shows where users would enter the sign-up/sign-up form in design.
Below zooms in the design of how sign-in and sign-up forms interact with each other.
Consistent Design is Important to Us. Consistent design is key to creating a coherent user experience, and a styleguide is what helps making sure the consistency. Below is the styleguide created by Eliana Feng.
We do not overlook Micro-animation. Animation/transition does not need to be fancy. A subtle visual feedback makes a difference in creating a smooth user experience. Below is an animation guide put together by Eliana Feng.
Animation Guide Created by Eliana Feng @ Polaris Design.