Create a Leaderboard
February of 2019, I redesigned the form of “creating a leaderboard” for a company’s internal platform showing the ranking of their sales representatives’ outstanding achievement.
Final Prototype: Create a Leaderboard on Invision
Project Summary:
Problem: Current form has all steps nd information listed on one single webpage, and there is a long dropdown list for users to choose from on every step. It’s very tedious and complicated to click through. And if users put any information wrong or miss any step, they won’t know until hitting the “create“button after the very last step. It also takes users forever to fix incorrect information or locate the steps they have missed, the whole process is very frustrating and confusing.
Solution: 1. Create a wizard flow, separate the steps in different screens so that users can enter data in each view and proceed to the next step until completion. 2. Use clickable breadcrumbs to display different steps, so that users have options of going back to previous steps easily. This can also help reduce errors by making the user follow sequential steps
Role: UX/UI Designer (70%UX, 30%UI)
Time: February 2019
Tools: Sketch, Pen & Paper, Invision
Customer: NDA customer.
Goal: To simplify the Leaderboard creating process and make it more user-friendly.
Step 1: Create user flow to clarify each step and what information is needed per step
Client provided the list of the all the options users need to choose from at each step, some steps have over 20 options, it’s very overwhelming. By reading through the steps and drafting out the user flow, i also found that some steps can be categorized together. For example, current steps show: users choose background >>>> choose participants >>>>> choose a layout. But background and layout are actually steps that related to the look of the leaderboard, so I switched the order of the steps too to make them look more reasonable.
Step 2: Decide which screen are showing which steps
Since some steps are more simple than others, I sketched out which screen contains which steps in what way. I also tried to make the options from each step to be displayed in different forms. - Single selection: users can choose it from dropdown list. - Multiple selections, users can quickly click buttons or tick boxes, and quickly unclick & untick them to undo their choices.
Step 3: Redefine UI elements.
Besides adding breadcrumbs on the side for users to clearly view their process, I also added some colors for a better visual appearance. Besides the original Orange color the company is using, I used an aqua blue to add some dynamic when users doing multiple selections. In order to make the visual look more user- friendly, the preview window will pop out at the right time: When users choose video and image, they can see what they choose look like from the preview window. When users need to choose layout which contains 19 colors, users can see the actual colors on each buttons to easily make up their mind. These UI details will convey the information more clearly and make users more relaxed (have more fun!) during the long leaderboard creating process.
Final Outcome:
Redesigned form
Original Form (1 screen)
