Micro Interactions and Wireframe Design

    

    

Team

Individual project

Tools

Processing&Unity | Kinect

My role

Research | Interaction design | Development

Duration

2018.07-2018.08

Company

Mobile Now Group

Tools

Sketch&Principles

Duration

2019.06-07

My role

Micro interaction design |
Wireframes design

Impact

More than a million users
Daily active users: 150k (30% ⬆️)

Project Overview

    

Background

Sephora is a French multinational chain of beauty stores that offers personal care and beauty products. My past employer Mobile Now has been worked with Sephora for years to build WeChat Mini-program (WeChat mini-programs are lightweight applications within the WeChat ecosystem).


WeChat is one of the most influential social media in China, therefore, enabling an e-commerce platform based on mini-program will allow WeChat users to access Sephora products conveniently and undoubtedly increase its market share in China.


After launching the first version of the Mini-program on Aug.13th, 2018, the company started to run design sprints to help further iterate the product.

Goal

Since June 2019, I joined Sephora project UX team to identify the latest user experience issues, ideate, quickly prototype, did user testing and eventually help Sephora generate significant traffic through the WeChat ecosystem. Here listed four main design sprints documentation. 

QR code

Download WeChat app and u

Design sprint#1

Micro Interaction Redesign
'Haowuquan' in product detail page

Haowuquan(Goodies) is a WeChat built-in feature that is considered as a "shopping version of Moments": users could share good products with their friends here.

Current Design analysis

Our client marketing department would love to increase daily active users through Haowuquan channel since it's a new feature of WeChat. In this case, Haowuquan feature should catch users' eyes when they are browsing the product details page and lead users to use this feature.

  

Redesign opportunities


There existed a sharing function sticky on the right side. Haowuquan is essentially a sharing feature, The two sharing features have to be distinguished while at the same time, they should end up with same layout.




1.  Current icon could also be misunderstood as "like" instead of "share goodie".

2. When users scroll up, this feature should not disappear with the product name.

Competitive analysis

Competitive analysis

Competitive analysis

I found some existing apps that shared the same 'haowuquan' feature and conducted competition analysis.

01 MissFresh

Redundant steps
If users reach the bottom of the page, they have to scroll back up to use the feature. 

02 Ctrip

Haowuquan stands out
The independent sticky element clearly stands out in the page while unlike our app, its sharing feature is at the bottom bar.

03 JD

Redundant steps
Haowuquan' is hidden inside a subpage which also makes it unnoticeable.

  

Findings

1. All of them include text to explain the feature instead of icon only, converying a clear message to users.
2. Make the feature shown directly on the page
3. A good animated effect will appeal to users and help generate more traffic .

Sketches

I learned from other competitors, sketched quickly, and iterated the design a couple of times. Through the iteration process, I kept the client’s business goal in mind as well as intuitive interaction.

   

   

   

Redesign


Text
beside the icon
Use text to clarify the feature
(meaning of the text: 'recommend good products')

Animated interaction
Get users' attention and increase the user activity of visiting products through Haowuquan

As users scroll up, Haowuquan elements will follows the page up until they touch the bottom of the right sidebar. It will be sticky to the screen as other two icons do.

Text only when it's sticky
Since there won’t be enough room for both text and icon, I changed the layout and chose to leave text only which could keep distinguished from other two icons and get more attention.

Also, I split four chinese characters to two lines and made them nicely fit the square.

Final Deliverable

I delievered not only a prototype file but also a graph of all required parameters to developers, which gave them a better idea how the interaction worked specifically.

  

Design sprint#2

Micro Interaction Redesign
Category page

A three-level category page where users could click or scroll to access the products freely.


*The above is two different states, animation to be updated.

Current Design analysis

  

Redesign opportunities

1. Enlarge efficient display area and the interactive area
There exists unnecessary information such as category entrance and navigation bar. Also, first-level category takes too much space.
2. Minimize the steps users have to take to find the product
Users have to scroll back and forth to find a specific category.

Redesign

Move category entrance to homepage
Brand and product category could be separated to two entrances in homepage instead of under a single 'All products' tab

Remove bottom navigation bar
Under this page, users mainly focus on the category searching. The bottom navigation bar takes space of main task while at the same time distracting users.



Display first-level category horizontally
under the search bar
Users could either scroll or click the tab to switch category.


Reduce first-level category height

Keep background picture
The background picture could represent brand identity and it will change as tab changes.






Added sidebar for all second-level categories on the left

Users don’t have to scroll and they could clearly see all second-level category entrances.

Design Sprint#3&4

Wireframe Redesign
Registration/Login page and My Account page

*More details about Wireframe design will be updated soon...

Haowuquan(Goodies) is a WeChat built-in feature that is considered as a "shopping version of Moments": users could share good products with their friends here.

Reflections

1 Design sprints push me to quickly grow

Design sprints allow me to work in time-constrained projects, which greatly improve my efficiency in researching, brainstorming and prototyping.

2 Take client business goals into consideration

Also, throughout the outside-classroom experience, I have to constantly consider needs from multiple stakeholders; I became more and more comfortable with helping the client to achieve business objectives as well as balance user needs and technological constraints. It was a challenging but thrilling experience to convince the client of our design concepts.

3 Collaborations with development team

During iteration part, there were constant communication and collaboration with software developers, from which, I learned to hand off concrete design documentation with clear specifics. 

  

Selected Projects