Challenge

Improve key flows for the mobile version of a customer feedback site IdeaExchange

Solution

Streamlined user experience and refined interface built on Lightning Design System

My Role

Independent product designer (not associated with Salesforce)

 
 

How It’s Started

I recently came across Salesforce IdeaExchange platform and the need to improve it. I took on a challenge of improving the key flows as well as aesthetics based on the guidelines and assets provided in Lightning Design System.

Salesforce IdeaExchange is a platform where customers can share ideas about features. Ideas with over a number of votes get reviewed by the team. Once an idea passes the review, it gets implemented for the future release.

Screen Shot 2019-07-26 at 10.08.15 AM.png

Problem

Salesforce IdeaExchange has sub-optimal flows for the key tasks and dated visual design that doesn’t follow the brand guidelines. It’s preventing Salesforce customers to post ideas freely, especially from their mobile phone. The idea status is confusing to understand and it’s difficult to sort and filter ideas.

Hypothesis

By redesigning the platform and improving the key flows, Salesforce TrailBlazer community members will share valuable ideas to improve the product with ease. If my redesign effort is successful, we’ll know by an increase in ideas and votes.

 

My Thoughts

After spending some time on both desktop and mobile versions of the site, I noticed the following:

  • The design looks outdated. The background pattern is distracting particularly on the desktop.

  • The filtering and sorting mechanism can be improved

  • Not sure if downvoting is necessary

  • The placements of the elements aren’t strategic

  • Need to simplify the idea status

Screen Shot 2019-07-26 at 8.18.03 PM.png
Screen Shot 2019-07-26 at 8.40.59 PM.png

On the idea details page:

  • There are legibility issues, such as a small font size and the container width being too wide.

  • The comment field doesn’t need to take up a large space initially.

  • If there are many comments, it’s hard to skim through as there is no way to find specific information or filter them.

Screen Shot 2019-07-26 at 8.22.36 PM.png
Screen Shot 2019-07-26 at 8.44.49 PM.png

At this point, I got curious about what real Salesforce customers think about the platform. So I came up with a plan to test the current site with people who are familiar with IdeaExchange.

 

Others’ Thoughts

Before I recruited participants, first I wrote a usability test script to create the overall structure and write scenarios for the key tasks, such as “Post an idea” and “Voting”.

After conducting a couple of sessions, I realized that people usually come to the site with a specific idea in mind and search to see if there are already similar ideas submitted. So I eventually created the following three task scenarios:

Scenario 1: Search for an idea

There is a missing feature that your customers have been telling you about for some time. You are curious if the idea has been already submitted through IdeaExchange.

Task: Search for an idea and see details

Scenario 2: Voting on an idea

You found a similar idea to the feature you’ve been searching for. After checking out the details and comments, you’ve decided it’s a good idea and covers most of the missing feature.

Task: Vote on an idea

Scenario 3: Post an idea

After searching for some time, you couldn’t find an idea that could accurately represent the feature you’ve been looking for. You decided to submit the feature as a new idea.

Task: Post a new idea

 

Research Insights

Search results

When you search on IdeaExchange, you’ll see everything in search results, not just ideas. The usability testing and Trailblazer community comments confirmed that people want to see only ideas in search results when they conduct search on IdeaExchange.

Screen Shot 2019-07-26 at 8.51.20 PM.png
Screen Shot 2019-07-26 at 8.53.31 PM.png

Vote / Undo voting

There are some doubts about if downvoting is necessary. Some didn’t mention it directly but they never downvoted anything. You can’t undo voting, which people felt it’s too final especially for downvoting in case they change their mind later.

Screen Shot 2019-07-26 at 8.55.15 PM.png
Screen Shot 2019-07-26 at 8.55.42 PM.png

Post a new idea

When you post an idea, categories are presented in an additional popover on top of the main popover. All participants clicked on the “Cancel” button on the bottom, which canceled the entire process. This was a clear mistake and needed to be addressed.

Screen Shot 2019-07-27 at 9.19.19 AM.png
Screen Shot 2019-07-27 at 9.19.33 AM.png
 

Designing my solution

One of the reasons why I chose a Salesforce product was because they had Lightning Design System and downloadable UI kit. I wanted to take advantage of the resources and design my solution by leveraging an existing design system.

Screen Shot 2019-07-26 at 9.33.36 AM.png

After sketching out screens on paper, I created mockups for the three key flows identified from usability testing and heuristics evaluation.

 

Filters & Sort

Created buttons for Filters and Sort, which brings up all the options in a separate screen for the scalability.

Click to enlarge

 

Post an Idea

Inspired by social media and the inviting quality of a typical ‘create a post’ call-to-action.

Click to enlarge

 

Search

Followed the convention of modern search functions, such as showing recently searched items when the user taps on the search field and auto-suggestions when they start typing.

One of the complaints was that the search results showed all items, not just ideas. Reflected on this insight and made it possible to see only ideas. Kept the layout same as the normal list view for the consistency.

Click to enlarge

 

Vote / Undo Voting

Removed downvoting. Instead, added a capability to undo voting with an added confirmation step to ensure the intention.

Click to enlarge

 

Prototyping and testing

Based on the mockups, I created a prototype using InVision. I used Craft plugin to sync up the artboards, which was super handy.

 

InVision Prototype

Here are the prototypes you can interact with. Please free to check them out and leave a comment! (click on the ‘comments’ on the bottom right in the prototype screen to turn on the comment mode)

Search and Filter results

https://invis.io/GQSCDUL7YXK#/374881296_Search_1

Vote on an idea, then Undo voting

https://invis.io/GQSCDUL7YXK#/375571724_Vote_1

Post an idea

https://invis.io/GQSCDUL7YXK#/375571725_Post_1

 

Future Plan

Conduct quantitive testing

Measure the key metrics on both the current site and the prototype to compare the success rates, such as finding an idea and posting an idea

Create desktop, tablet mockups

Complete a set of responsive web design mockups for the key screens by creating desktop and tablet versions