Redesign OwlTing Market E-Commerce Platform

Project Includes | Rebranding . Refactor Website . App . UX Research . UI Design

Project Scale | 5 departments, 15 members

My Role | UI/UX Designer

Project Background

OwlTing Market is a e-commerce platform which dedicated to promoting Taiwanese brands with 2,000+ local partners.
However, the website is not responsive and page layout is not conform to user's browsing habit, these inefficient browsing experience cause high bounce rate and low conversion rate.
Department manager reported that our website often been criticized by usability and security, which cause team member to lost confidence in the product.

Challenges and Solutions

  • Website structure is complicated to refactor
    In this refactoring we adjust not only the UX flow and front-end framework, but also involves back-end date structure, which made this refactoring become very complicated. So in early stage I discussed the revision scale with engineers through information architecture, in the end we decided iterate by pages.
  • Having different opinion with CEO
    REMOVE THE BANNER SECTION ! This is how CEO said about homepage, in his opinion the huge carousel waste the most important section of web page and user often ignore them. I verified the situation by google analytics and heat-maps. Eventually I designed four-segment banner layout to reach an effective promotional information.

Let's see the results first 👀

+230%

New Users

+81%

Avg. Session Duration

-24%

Bounce Rate

...

1

Goals

The problems we'd solve

  • Redesign a responsive e-commerce platform, and must consider experience of existing users.
  • Carry out rebranding by cross departmental
  • Through e-commerce platform to helping local partners promote products .

2

Empathize

Understand our user

I. User interview

I conducted one-on-one interviews with different level members to understand users pain point and their expectation.

The webpage is difficult to browse form desktop. Usually I use search bar to find the items, really hope there has some product info on homepage.
...
😕

Cindy Wu

Member

It's inconvenience of can't track shipping status.
...
😫

Vincent Chang

Premier member

Hope category bar can be clearly, also banners section is too small to notice.
...
😧

Lily text

Member

When meeting with clients it's embarrassed by showing our non support responsive web page , and the tiny banners cause low conversion rates. I'll do my best to support this revision!
...
👏

Joyce Chen

Sales manager

II. User journey map

Based on user interviews, data analysis, we depict a customer-journey map.We use this persona to shared understanding, so we're all thinking and referring in the same way with our user.

...

3

Define

Identify current problems

  • Non-responsive web design - Based on 80% of our visited came from mobile devices, mobile first is the right decision at the beginning, however non-responsive desktop webpage cause an unpleasant browse experience .
  • Information is unstructured - User can't find any product information at home page, also small banners can't capture user's attention.
  • Lack of brand identity - We hope to bring organic food, healthy lifestyle for our consumers, however the website is lack of brand identity so it's hard to convey our spirit to customers.
...

4

Ideate

Ideate brand identity

In brainstorming we base on brand sprity 'Stay Simple, Stay Humble' to ideate brand identity, which also includes color patterns and photo style, we want to create a brand with healthy, local and friendly.

...

5

Design

Optimization and discussion

I. Information architecture

After a few rounds of evaluation as a team,we agreed to iterate by pages.
In the IA picture the bright outlines are new pages and others are pages need to be redesigned. Furthermore, I marked the number for each, it will be easily to discuss.

...
II. Wireframe
...
Remove Banners !
...
Whaa... Which e-commerce platform has no banners ?
Isn't it the way that user use to ?

This story happen when I was planning homepage, CEO has opposite opinion with user habit. After discussed I knew that in his opinion the huge carousel waste the most important section of web page. And I verified the situation by google analytics and heat-maps.
Eventually I designed four-segment banner layout to reach an effective promotional information.

...
...
...
...
III. Design System

Via the branding identity I define design system to maintain product consistency.
💡 : UI kits must include component state, and micro animation if it needed. It can helps engineers clarify elements and reduce modify repeatedly.

...
IV. Prototype

Before launch we invited our coworkers who also is OwlTing market user to conduct user task, based on screen recording and heatmap analysis to modify web layout and ensure our origin users have delightful experience.

Xd icon View Prototype
...

6

Result

Page Display

This revision is carried out by pages iterated. As of October 2021, the design revision has been completed 100%; the engineering implementation has been completed 80%.

🌟 View Project

+230%

New Users

+81%

Avg. Session Duration

-24%

Bounce Rate

...
Homepage browsing - According to user's preference to arrange website content
...
Navbar category - Category is been ordered by users preference.
...
Category page browsing - Optimize hover effect to provide an ease user experience.

...
404 page - I reconsider 404 page, is can be not only a page to showed info but also can provide useful contents for user to keep browsing.

7

Iterate

Via data to optimize

Tracking data shows that Banner section has increased CTR, and verify keep navbar for user is the right decision.
Also, we uphold the user-centered principle to adjusted page sections, after that we found data shows that the users has batter browsing experiences and brings more CTR.

...

8

APP

Product caused by COVID

OwlTing Market APP is produced by increased online shopping sales due to the outbreak of COVID-19 in May 2021. It was instructed to develop with high efficiency and unchanged current users experiences as the goal.

從App Store下載APP從App Store下載APP
...

9

Takeaway

Feedbacks are opportunity for optimization

  • Break the rules - Without using carousel for banners it was a challenge for me, however it also helped me to explore a new way for design.
  • I feel the most when I'm also the target audience - In the project, I'm not only the UI/UX designer but also a user. From rebranding to development, it is the most precious experience for me. I feel so proud when I saw our product can truly help local farmers.

More Works

...
OwlTing Official Website
Refactor Website | UX Research | UI Design | Official Website
View the case study
...
OwlNest Admin System
UX Research | UI Design | B2B | SaaS
View the case study