Improve key flows for the mobile version of a customer feedback site IdeaExchange
Streamlined user experience and refined interface built on Lightning Design System
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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.
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.
Post an Idea
Inspired by social media and the inviting quality of a typical ‘create a post’ call-to-action.
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.
Vote / Undo Voting
Removed downvoting. Instead, added a capability to undo voting with an added confirmation step to ensure the intention.
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.
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
Vote on an idea, then Undo voting
Post an idea
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