BACKGROUND

This is the design resulting from App products when I was a UX designer in an ecommerce company. The purpose of this service is to provide merchants manage their orders and products, connect with staff, and track sales with the Shopline app. Whether they are managing one or multiple stores, this app make it easy for them to run their business from anywhere.

Please contact me for the authority of the document.

All Archives

VISUAL DESIGN

UI Elements & Design Library

Icon / Color Palette / Font Style

Further Insights of Whole Business

Use the analytics and reports to learn about data and reports of the sales and the customers. Analytics services are a great tool helping merchants to gain further insights into their business.

Orders / Products / Message

The product handles everything from marketing and payments, to secure checkout and shipping. With our admin platform, they can focus on the things they love, and start a business easier.

Ecommerce App Project: UX & UI Design

UX and UI research, job stories, flow charts, mockups, and prototypes.

BACKGROUND

There are four mainly types of feature to SHOPLINE admin platform: Analytics, Orders, Products, and other services. In addition, according to the customer feedbacks reports that as many as 70 percent of customers said they also included key customers, hoping to view these features on a mobile phone. Therefore, the team decided to develop the APP system for these main functions.

PROJECT GOAL

I used the feedbacks of usability testing from our customer which conducted by the development team. Users used Merchant App and gave some reviews through the Testflight, and I categorized these feedbacks into three project issue, in order to improve the features with the design strategy.

DESIGN PROCESS

I decided to follow Lean UX Design Thinking process to make sure that my design decisions were making the best practices of agile development, iterative development, user experience, creativity, prototyping and testing shine.

JOB STORIES

I used the feedbacks from our customer that conducted with the Textflight tools, which users would use Merchant app and help us to understand their motivation and desired outcome. I integrated their reviews and needs as following examples.

DEFINE CORE VALUE

In addition, I decided to follow the principle and belief of the organization, views, and design Merchant App with our core value which represent familiar, integrated, original and convenient. And transform the core values into four design keywords: friendly, flexible, unique, and intuitive.

RELATED RESEARCH

After defining the customer’s needs and insights, I analyzed the relevant interface, for instance, Shopify, Slack, ASOS as the main reference. For a deeper understanding of the behavior of searching orders and setting filters, I sort out a comparative table of the user interfaces and their task flow.

Research-1 Research-2

Then I prioritized each project issue based on its importance to the user as well as its importance to Merchant App. My assumptions about the importance to users were derived from the analysis of our customers testing feedbacks and requirements. Analytics, Order, Search and Filter were developed in the phase one, and they were also core functions of the product. Therefore, I did background research of these features, and studied their user task flow.

FLOW CHART

I also created a flow chart to show the solution model for the Merchant App. In the development phase one, the process as below illustrates mainly two features: Analytics and Orders. Follow from the processing step, the users first log in to their account and start at Analytics main page. Click the buttons below to see the workflow charts for Analytics+Orders or Products+Message.

Analytics, Orders Products, Message

IDEATING THE SOLUTION

The envisioning phase played a key to create preliminary ideas that focus on solving the user’s pain points and not mindlessly attempt to revise user interface of Merchant APP. Therefore, I did some lo-Fi drafts and used the feedback of the user testing to refine my sketches and narrow down my solutions for the hi-Fi mockups.

After sufficiently discussing with my teammates, I jumped into Sketch present hi-fi mockups of my design decisions and create a clickable prototype with Invision App.

PROTOTYPING AND VALIDATION

Below are the hi-fi mockups of my final solutions, including the results of the before and after implementing my design solutions. Click the buttons below to see the prototypes for Orders+Filter or Analytics+Products.

Orders+Filter Analytics+Products

Pain Point 1: Analytics

Design solution: The key problem of Analytics interface is a user overloaded with too much information, in order to cut out this clutter, I assigned the them into groups depends on their constituent elements such as today's number, a line chart, a rank table, a bar chart. A user scrolls down the page, and reads card layouts in sequence with coherent visual metaphors.

Pain Point 2: Orders and Order Detail

Design solution: It is important for users to make them feel familiar with the order status that they can search the orders easily, so I designed them following the color principle of admin dashboard. Furthermore, users can quickly edit order status in order details, and click chevron to view more customer's information or delivery address.

Pain Point 3: Search and Filter

Design solution: In spite of the filter usually be considered as an additional search tool, they are a crucial method to help users refine their search. To set up the filter, users click the button to set up the options. In the filter page they can browse through the title of categories first, then find out the option in the short list, or click the reset button to clear up the criteria. After refining the search, a tick shows beside the filter button to remind users of it.

SUMMARY

Considering the difference between mobile and desktop screens, users have the habit of thumb scroll down on mobiles, and that happens quicker than scrolling with a mouse. We decided to build a Mobile app for our customers. Merchant App will gradually start getting mainstream because of their accessibility and adaptability, which will change the way to do business. In this trend, a product designer has to lean design and build the interface on a small screen, making the instruction clear. Depending on the audience type and kind, we have to accordingly decide on what navigation, font sizes, spacing, colors, etc., to use. And sometimes, a reasonable decision like where to place the entry of the filter can have a crucial influence on user experiences.