MY ROLE
• Lead interaction and visual designer who worked closely with product manager as well as engineers
• Conducted user studies, tested and validated ideas and assumptions with customers
BACKGROUND AND CHALLENGES
Chart builder, now called ANSWERS, is one of the core functionalities of BECKON. There will not be a dashboard without the Chart builder. This is where most activities created by advanced users happen. The goal is the to improve customer satisfaction on Chart builder and reduce the number of bugs related to Chart builder. The following were the usability problems we identified from the previous version of the Chart builder:
• Performance due to chart thumbnails
• Do not what chart to use
• Chart settings are hard to understand
• 2 different UI for creating and edit charts, hard to maintain
• Greater power and more flexibility to define limits of dimension output displayed in chart types
• Chart builder is hard to use on a laptop/smaller screens
SOLUTIONS
• Using icons for chart type selectors, instead of thumbnails and categorized by functions to help user choose a better chart
• Dynamic and smarter chart settings base on what chart type is selected
• Unify create and edit workflow into a single UI
• Dynamic UI of how to limits dimension output in a chart base on the type of chart and settings that are selected
• New design for multi-select drop-down to accommodate a large list
PROCESS
• Getting an idea of how big the project is, timeline, resources, and stakeholders
• Set up an interview to find out pain points of the current feature from real users both internal and external.
I interviewed both basic and advanced users but this feature is mainly for more of advanced users.
• Collecting common use cases and edge cases of the chart builder.
Also, collecting examples of charts that were unable to create from the current UI. I tried recreating the chart myself so I fully
understand *why* it is hard.
• Sketching the new workflow on paper and bouncing back ideas with the users I have interviewed, engineers and product managers
• After paper wireframes, creating clickable prototype using Invision and Adobe Experience Design
• Collecting more feedback from users by conducting additional usability using the clickable prototype/wireframes
• Revise the workflows and started working on the visual direction (there are multiple rounds of these)
• Signing-off on the final workflow and UI by stakeholders and creating high-fidelity mockups for engineers
• Working closely with front-end engineers to make sure the workflows, UI components, and interactions are correct
• QAing once there are new changes, until launch
• Collecting more feedback after the launch to see if users find it's easier to use or not
