UI/UX design
My Role: Project leader, participated in the user research, the interaction process and high-fidelity page design, Created visual identify for the new brand.

Project Description

As a UI designer in this project , I managed the project of CoastalVision from conception to design.

This project is about how we optimized our previous website. In collaboration with our IT department and product operation team, my role was to upgrade and ensure the website embraces the marketing needs of an online shop while  cooperating with offline activities. I contributed to the development of the online strategy and was responsible for creating initial sketches, wireframes and designs from start to completion.

Traditionally, the main purpose of a good user interface is to introduce its brand culture and sprite. And guild its users to achieve what they want on this website. But a good user interface of a e-commerce website should  also focus on stimulating viewers to buy and generating click-through rates and conversion rates.



What is Coastal Vision?3.jpg

Coastal Vision is a eyewear online store sells over 20 brands as well as our own range optical glasses and sunglasses.

Coastal Vision is originally from a Canadian eyewear online retail website called Coastal.com, since Essilor acquired it in 2014 an Asian version Coastal.com had been decided to build – and it’s full name is  Coastal Vision China, in short of CVC.

Basically, Coastal Vision China is like the younger brother of Coastal.com, we share the same family name, similar business model but we provide different products to different users.

Brand Spirit
Brand Wall
Price Range


There is a previous version of Coastal Vision PC website. Before we begin to optimize it, we ran some test of eye movement about the old one.8.jpg

The test is to figure out some confusions we had, such as which content is the most popular one, how long would people spend on looking at the promotion banner and how we present the products draws the most attentions to achieve the best results.

From the statistic, we found:

1, people spent less time on focusing on the product image than viewing a picture of a model wearing product.

2, Images with large size may draw more attention, but how to lease blank for the page is also an important issue.

3, people barely read the text.  9.jpg

The pervious version of  Coastal Vision PC website just wanted to satisfy all the possible user requirements, so it built too many modules and in a very basic and ordinary way. Users were easy to get bored and quite the website, because they couldn’t find anything innovative to arouse an emotional attachment during browsing the page. We can get the fourth conclusion:

4, Make it interesting by adding creative and proper interactions maybe.10.jpg

According to a official research given by Taobao.com which is the biggest online shopping platform in China, 85% of orders are purchased from smartphone through the Taobao App and only 15% orders are from it’s PC website. And for most of Taobao users, the PC website of a brand plays a role more likely a show space to tell customers it’s brand sprit and strength.

For optimize our 2.0 version user interface, we investigated recognition of 100 users towards categorization of glasses and their shopping demands, so as to integrate the information to a satisfactory menu which complies with customers’ demands.

The result verified the survey of Taobao user research.  In short, PC website gives designers more space and more freedom to build a brand images. App, on the other hand, is more like a motivate consuming tool.

Why Optimize It Now?11.jpg

The main reason why we decided to optimize our PC and mobile websites is because we believe it is a great opportunity to upgrade and enhance our competitiveness.

With the experience we gained the past years, we learned a lot about the Chinese market, our customers and their preferences. We believe the re-design of our UI is meaningful, and it is the first step of our re-branding process. A succeed optimization could ensure our brand to embraces the marketing needs of an online shop.

Secondly, the fashion trend changed every year,  new technology came out every day. It seems reasonable that update and optimize our websites every a few time.

Another important reason of the re-designing is because our company merged some new brands during 2015 to 2016. The price range of our products are much wilder than before. It changed our target group of  customers  on to a certain degree. To make those new customers to know and to like us, we did some research about them and optimize for their preferences.

Re-branding work of Design Team:

1, optimize our Logo;

2, optimize CVC PC website;

3, optimize CVC mobile/tablet website;

Logo Design

Previous logo:12

Why do we need a new logo? 

1, the shape was too common for a Logo.
2,  looks very massy because the gap of each letter C are various.
3, using 4 colors made the logo too complicated and hard to applied on colorful background.
4, failed to convey the brand sprit.

What kind new logo do we need:

1, elevate brand image,
2, relate to other group brands and emphasize brand identity,
3, show our characters: international, professional and youthful.
4, use simple shape, simple color and make it unforgettable.



This chart is called The Landolt C, used in visual acuity measurement in optical clinic. The task required here is to detect the location of the gap.


Our new Logo is inspired by the Landolt C, using the simple but unique layout, people can easily remember our logo. Plus the similar shape of our logo and Landolt C may give a professional impression.1516


Prototyping is iterating ideas to make the best experience for users. In this step,  a journey map is help to build the comprehensive journey that can enhance value of its features and giving the thoughtful experience to people who are viewing CoastalVision websites or our Tmall shop.


We decided to use the front main area of homepage to display 4 frames high-resolution pictures. Instead of showing some details of a product, each of those pictures shows the youthful and vivid brand spirit.

We put a top menu bar on the upper right space of the screen and there are six buttons can be clicked: Brand, Shape of Frame, Collections, Search, Log-in and cart. Those 6 buttons are the six most useful functions people need on PC website. When mouse pointing the button triggers the colour turn to black movement.20

We decided  to use home page -the most valuable and limit space- to show users the most important things we want to let them know, which are five sections: key visuals of the brand, the latest products, bestsellers,  promoting products and information area.

Pictures of wearing effects and 3D views of glasses are well-spaced in terms of arrangement. This could strengthen attractiveness of browsing the homepage.


In order to attract customers’ attentions and give them a good impression about the brand and product, we used at least 5 high-resolution pictures and very few texts in the product page.22The big and high-resolution pictures are white background and display products in a clear and simple way. Three product pictures taken from different angles to show every detail, and two more model-wearing pictures gives a reference how it looks on real people.

The text part is showed extremely brief, because we treat the web page as a showroom. Based on the research we made about the habit of user, we believe too many text will make users get bored easily.

We put a small picture of the alternative color on the left corner. While users click it, a new page about that color will opened.


Our website for mobile and tablet is built on the biggest e-commerce platform App in China –Taobao. Because of the huge number of users, we are willing to optimize our webpage to fit the frame template of Taobao App.

Based on the customer behavior research we mentioned before, the conclusion we can draw is App is more like a motivate consuming tool.  So, the UI of our e-shop is designed for purchasing on propose.23.jpg

For example, on the home page, we put coupons and promotion events following on a very noticeable place which is just after the key visual picture. That is because we hope this kind discount information could attract users to keep scrolling down.

Then, we put product catalog button and brand wall following. Because we have reason to believe brand and function are two of most common shopping logic.24.jpg

After the category button and brand wall. We list several products and classify them in different series, such as: The top sellers, The latest, The must-have, Same to celebrities, etc.25.jpg

We also showed the original price and discount price of each product on the home page. Believe we think price is one of our best advantages, also is the best strategy to  attract customers.26.jpg


In order to increase the conversion rate and courage customers to consume, we give all necessary information they may need with as much detail as possible.27.jpg

①At the first par, customers will be told the product name, price and all serveries and warranties we provided.

②All essentials such as size, weight, material, colors will be listed on part 2. 28

③A clear wearing effect will be demonstrated by model.

④Professional manufacturing information will be illustrated and explained with close detail images.

⑤Alternative colors will be shown following, high-resolution pictures of different angles.

⑥Similar products will be recommended on part 6.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s