Shopify plus Redesign

Role:Personal Project: UX Research + UI Design

Tool: Figma / Sketch

Time: 08/2022 — 09/2022

This project aims to address the barriers to personal experience in Shopify's web pages and redesign the home page to improve the efficiency of the company's employees in finding data relevant to their tasks -- through Background Research, User Research, setting up the prototype, and conducting follow-up Usability testing to solve problems and improve existing design shortcomings. This is an individual project completed in 1 month.

Design Preview

Redesign the homepage and design new features to support the user’s needs

Redesign the searching function

Overview

Initial Thoughts + Motives

When I first used this website, I was assigned to study how to design new features to help improve the page views of the introduction interface of some unwanted products. That meant I needed to find data on which items were selling best in Shopify Plus. However, in using it, I needed to constantly switch interfaces from task to Shopify to ensure that the data I was looking for was correct. It is also difficult to find general information efficiently on the homepage.

What Shopify Plus can do

Shopify Plus is designed for businesses that need a powerful and customizable e-commerce platform that can handle high volumes of traffic and sales, and provide advanced features for managing inventory, tracking customer data, and creating custom integrations.

Background Research

To define the target users of this platform and clarify the challenge

  • By conducting background research, I found out that over 5,300 businesses are using Shopify Plus, retail, fashion, and apparel dominate the use of platforms and Shopify Plus is only available to merchants with revenues between $1 million and $500 million.

“ Today, in addition to online platforms on desktop and mobile devices, many e-commerce players and online retailers sell their products via mobile shopping apps. According to research reported by Medium, consumers still prefer to purchase durable goods (that means fashion items, furniture and decor, and event tickets) over consumables (think food and drink, flowers, pet food, and other supplies).

The reason for this is likely due to delivery times and the perishable nature of consumable items. For example, the majority of grocery shopping still takes place in supermarkets, though meal delivery services are done online and continue to grow.

  • The dominant industries are all involved with eCommerce and online business.

  • Shopify is the top 3 platforms used in the eCommerce market

  • Increasing sales should be the number one objective for the eCommerce business.

Takeaways

Target Users

Merchants who focus more on their eCommerce and online businesses.

Users’ goal in using this platform

Because the order quantity is huge, Shopify plus is needed to provide them with more convenient and fast service to help them increase sales.

Challenge

How might a platform provide data to the company while allowing its employees to quickly access the data and use it to complete tasks effectively?

User Research

Think-Aloud and Interview

To identify user pain points to uncover the existing problems and Understand what people were frustrated with using the Shopify Plus

  • Participants: 10 persons who mostly work in the e-commerce industry

  • Research method: Think-aloud

  • Goal: Use an open-ended task to explore what people felt and were frustrated while using this platform.

  • Open-ended task: “Find the data related to customer needs as soon as possible ”.

  • During the process, I observed their actions and created a user flow to depict their common behavior. It helps me to better understand why the existing features didn't work. I also marked on the user flow with a green circle all the confused actions they felt while using the platform.

I also interviewed them to further understand what they thought while using it and found out:

How often do you use this platform in your daily job?

8 / 10

use it every workday

7 / 10

Couldn’t remember

Can you remember the task while searching?

5 / 10

want to see it directly on the homepage

How would you like to find the info you want?

  • Design feature for the website

  • Analyze the customer info

  • Discover the sales and order info in different time periods

  • Find some supporting info for their presentation

  • Complete the task

What do you usually use this platform for?

Key Painpoints

  • Users feel hard to remember the content of the task during long-time searching.

  • Users feel frustrated to switch different screens back and forth multiple times.

  • Users need a more convenient way to search for the correct info and utilize it.

Persona

Further identify the target user from a broad user group and identify their expectations to extract design solutions

  • I decided to create a persona with a background story to better understand and visualize how to build a solution that satisfies the needs and solves the problems of the specific user group

Storyboard

To better understand how a potential solution could help Kyle(our target audience) with his problem and provide convenience to his life.

  • I created a storyboard to depict the daily task that Kyle would face while using the platform.

  • Then, I circled the possible opportunities.

Solutions

Combining the insights from the different research sources as well as from the persona, it became clear that the platform had to focus on excelling in the following aspects.

I decided to add some auxiliary functions based on the original design and focus on improving the user experience of the homepage so that I can know if the design iterations meet users' expectations through subsequent usability testing.

Design Solutions

  • The solution should clarify to the user what information is relevant to the task.

    • Click a specific task and show the related info automatically

  • Users feel hard to remember the content of the task during long-time searching.

  • Help users to find the data and check the task simultaneously.

    • Integrate the task management function into the website

  • Users feel frustrated to switch different screens back and forth multiple times.

  • Minimize unnecessary user operations (such as manual typing search).

    • Show the list of tasks after users open the search function

  • Users need a convenient way to search for the correct info and utilize it.

  • Be more straightforward and recapitulative to show the information.

    • Reorganized the homepage layout

  • Users need a convenient way to search for the correct info and utilize it.

Prototyping & User Testing

With insights and user needs I defined before, I created a rough prototype to test out how the target audiences feel, find flaws in the logic/flow and generate feedback from others.

User Testing Insights

  • It is less efficient to add more description to emphasize the needed information

    • Extract keywords from each task and users can click the keywords to find data more conveniently

  • There is no clear button for users to combine data with the task

    • Add the “add” button by the side of the correct info

  • It improves the efficiency of viewing data and tasks simultaneously

  • The grid system shows the information much more clearer.

Final Design

01 Homepage reorganization

Add task management on the side

The task management function helps users to manage tasks and meeting schedules. Adding it on the side of the data's display can assist users in finding information more efficiently.

Related Design Goal:

  • Help users to find the data and check the task simultaneously.

Reorganize the structure of the homepage

Related Design Goal:

  • More straightforward and recapitulative to show the information.

02 Search Feature

Searching Function

I added a new " task " tag to the original search by tag and type. This change allows users to search for relevant information by clicking on different tasks.

Related Design Goal:

  • The search function should minimize unnecessary user operations (such as manual typing search).

Searching Function

After users click the “Task” tag, they can see a list of the tasks.

Related Design Goal:

  • The search function should minimize unnecessary user operations (such as manual typing search).

  • Help users to find the data and check the task simultaneously.

Searching Function

By clicking the specific task, users can see the related information that the website automatically matches for this task.

Related Design Goal:

  • Clarify to the user what information is relevant to the task.

  • Help users to find the data and check the task simultaneously.

03 Task Management

Editing the task

Related Design Goal:

  • Clarify to the user what information is relevant to the task.

  • Help users to find the data and check the task simultaneously.

Takeaways

The key takeaways from this project include the importance of conducting background research and analyzing data to fully understand the problems at hand. Additionally, the project highlighted the need to consider the user experience and make data easily accessible to improve the efficiency of the company's employees.

If given more time, developing a mobile version of the redesigned home page would be a valuable next step, as it would allow designers, market managers, and project managers to access and review the information at any time and from any location. This would further improve the accessibility and usefulness of the redesign and make it more convenient for employees to use in their daily work.

Previous
Previous

old -- PC Game — Shapetopia

Next
Next

old -- Better Travel