Project Time: 2 months

Challenge 1:

in 3 weeks.

Research

Analysis: What can be improved with the current app?

To understand the problem, I first put myself as the target user: A marketing people who just got into social selling, and looking for an effective way to find prospects online; A person who's short attention span, always on the road and has very busy work schedule.

For our target users, two key user habits are:

They need very straight-forward and fast setup

They rely on notification to get information from apps

The experience is broken in so many different ways:

Problems:

Lack of content at empty state

Lack of explanation for giving permission

Lack of topic setup

Competitive Analysis

In order to explain the importance of designing user-onboarding experiences, I did a Competitive Analysis to show the team.

Key takeaways:

Use positive message. Instead of telling users "Sorry we are not able to offer you any content", the better way is to say "Why don't you do X, so that we can get some awesome content for you!"

Enhance call of action. In Instagram's example, it shows a picture of someone taking photos. This effectively inspires user to contribute content right away.

Initial setup is important. In order to avoid empty state, we could help user setup in quick an easy way. Pinterest took an interesting approach of forcing user to follow at least 5 topics. Tumblr auto-followed a "staff-account" so you have something to start with.

Design

Wireframe Sketching:

Communicating in the way that developers love

With the problems in mind, I drew the new screen-flow diagram with details of transitions for each screen.

The engineering team totally loved it, saying that this really helps bridging the gap between designing and developing because:

The sketch is simple enough but contains all essential elements for developers to work with.

Page elements are tagged with colours, which correspond to most text editiors.

The whole layout looks clean and fluent, easy to follow.

Sketching the new Onboarding Experience

When designing the new experience, I was aiming at:

Convey clear message: I tried to explain the process and product's core value by using of white space, typography, and colour contrast.

Creating rewarding experience: It is important to reward user for little accomplishment (i.e. connected Twitter account) so they are happy to move on to the next step.

Keynote mockup

User flow - Before

Login

Ask for permission

Connect Social Accounts

Connect CRM

Arrive home screen

User flow - After

Splash screen

Connect Social Accounts

Connect CRM

Topic setup

Arrive home screen

Ask for permission

Result

The new version was successfully delivered within 3 weeks with brand new user-onboarding feature.

Due to our testing, with the new version, user is able to finish the whole process within 1 minute, which includes connecting social accounts, importing contacts and following topics.

Challenge 2

Explain content's relevancy

Problem

For Sales Prodigy app, we wanted to know if users found the contents that we recommend are relevant or not.

The team first thought about favouriting. It has became a common UX pattern. However, it doesn't really apply to our product. After talking to our core users, we found that marketing people are very lazy with favouriting, and they want to see results instantly. Favouriting does not give them enough value.

Competitive Analysis

I first researched on how other products try to solve this problem.

Research on UX Patterns (Competitor Analysis)

Result: Non of the existing solutions fits our product. I need to lead our team to brainstorm on a brand-new solution.

Design

Bringing design-thinking to the dev team

In order to have a better understanding of the problem I invited our team to do a design workshop. We started to rethink all the components in our app.

Everyone in the company took part in the workshop and were able to express their thoughts on what should be improved and what new features we should add to the next version.

Design Workshop

Solution

Insights from our design workshop: instead of letting users to do the favouriting, we should be improving the way of how contents are shown.

To make user feel like the content is relevant to them, we should first explain why the content is relevant.

I decided to show categories on our feed by using tagging. I researched and looked into 3 different UX patterns for tagging:

Colours

Icons

Text

I assumed that the tagging system will help user understand why certain contents appears on their feed. The more they use the app, the more familiar they are with the tagging system. This would greatly improve their productivity.

User Testing

To test my assumption, I picked out the most promising ideas, then went out for quick testing.

Round 1: Paper prototype testing

I tested with around 6-10 of our core users and get their feedback.

Paper prototypes for user testing

Round 2: High fidelity prototype testing

Round 2 was conducted with clickable prototype using Invision.

Overall feedback

Prototype 6 - Corlour striping

Pros

Visually appealing

Cons

Possible visual burden after long term use

Prototype 5 - Text tagging

Pros

Easy-to-understand message

Cons

Competitive message, hard to digest

Testing with user

Based on the testing result, colour + text tagging is the most suitable pattern to explain content.

SP_GIFS

Color tagging every item on the feed.

Setting up color tagging for topics

Assign colour to specific contact

Our team implemented this pattern into the newest version and it can be downloaded here.