Sales prodigy App Design, Summer 2015

 

What problem does this product solve?

Sales Prodigy is a social selling tool for marketing people that 

  • Consolidate all of their social networks and online communities in one platform
  • Filter out the noise through targeted, listening streams
  • Listen for the right opportunities to engage with prospects and customers
  • Improve their understanding of target accounts in anticipation for sales calls
 

 

As the only designer on the team, I was responsible for leading the product UX including:

  1. design strategy
  2. user research/interview
  3. Fullstack design (UX + visual + interaction) 
  4. bring design thinking to the engineering team.

 

 

Project Time: 2 months

 

Sales Prodigy was picked as one of the finalists of Twitter Hatch and acquired by Hootsuite in Spring 2016.

 

Challenge 1:

Optimize the fuzzy user-onboarding process into a <1 minute quick setup,

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:

  1. The sketch is simple enough but contains all essential elements for developers to work with. 
  2. Page elements are tagged with colours, which correspond to most text editiors.
  3. 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

  1. Login
  2. Ask for permission
  3. Connect Social Accounts
  4. Connect CRM
  5. Arrive home screen

User flow - After

  1. Splash screen
  2. Connect Social Accounts
  3. Connect CRM
  4. Topic setup
  5. Arrive home screen
  6. 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

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

Testing with user

 

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

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


Actual screenshots from Sales Prodigy app