1. BACKGROUND
Watchlist plays a critical role in a financial software platform. Its a list of companies of financial professionals to invest stock market. Since we have watchlist as a product on our platform for over two years, we gather feedback from our users. The inefficiency manage workflows blocked clients from using the watchlist and the downstream applications, for example, the email alerts settings application.
Previously, I led a workshop for the product design workshop with marketing, product, and development teams to clarify our product mission, summarize user's archetypes, analyze requirements, and brainstorm features. After we balanced these features into three stages, we made a short-term to a long-term plan.
2.CHANLLENGE
The main changeling was the time issue. In the three months short-term plan, there were twenty-four features need to design into nine workflows for the watchlist. All these features focused on how to manage watchlist user-friendly and encouraged users to use downstream applications via the watchlist. Finally, I designed nine workflows with high fidelity prototypes for the engineering team to develop.
3. PLAN & EXECUTION
To design features to high fidelity prototypes followed these steps,
1. Grouped these features by the operations and start/endpoint into workflows draft, for example, the creation process on homepage or deletion a watchlist on watchlist maintenance page.
2. Planned workflows and added missing features to make workflow complete.
3. Sketched low fidelity pages and linked them together for a user testing session.
4. Designed high fidelity prototypes. Another user testing and updated the design before I delivered it to programmers.
3.1 Group Features into a workflow draft
I place all these features into users' operation groups. These operations may but not limited to, creation, deletion, search, display, modification, and share. And then list the start point and endpoint.
Some of the workflows shared the same start point and endpoint. That was one reason that I considered to combine them into one workflow and each of them to be a branch of this new one — for example, tow methods for creating a watchlist on the homepage. Another reason was from the product perspective. Before the workshop, I studied our data; around 70% of our users uploaded a file to create a watchlist. The product manager trend to promote another way is 'search & add.' In this way, we suggest companies based on recently viewed. It was more efficiently and accurately for users to create a watchlist than they upload a file. I want to give these users a chance to inform this method.
3.2 Steps
In this step, the main task was to design the number of steps to finish one workflow. Users may complete the workflow in one window or multiple windows; it depended on the complexity of the workflow. One window refers to a page or a modal, even or the whole screen. For the creation workflow, I balanced the number of actions and each how many information users needed to process for each operation.
I designed three steps. First, users chose which way to create a watchlist. In the middle, users would fix company codes or searching their interested companies and then added to the list. In the end, users could select email alters settings or not.
3.3 Low fidelity prototype
In this step, the critical job was to make sure this workflow helpes users achieve their goals with enough information, like created a watchlist with a name.
The second job was that design this workflow smoothly. To make sure the workflow was smooth, I would follow the similar layouts and consistency visual flow to lead the users to finish the task. Usually, I would design at least two versions to compare. Since this was the prototype, I would like to ask two or three co-workers testing quickly, to check any blockers for them to finish the task.
The third one was efficiency. Here, I would use investigation results from my user data-mining study. For example, pre-selected companies for a user to create a watchlist were 30 recently viewed companies, which the number came from the average number in a watchlist. Another one was, I give a watchlist a suggestion name to save time. The naming role was combing add one to an ordinal number of user current had and today's date. It covers 80% of user's scenarios.
3.4 Hifi prototype
Usually, I would implement the design system or UI library content to my low fidelity design and then got the Hifi design. Since we are under a UI refresh project, I choose to select the data table for my redesign part. One reason is the current one had obstacles for users to understand the workflow, and the new design helped them to understand the workflow easily. Another one was this part is easy to code after I discussed it with the development team.
3.5 testing
I planned and facilitated internal usability testing for the watchlist creation process. I hired four new onboard employees in the marketing team and product team because they have a financial background but not that familiar with our product. All of them finish the tasks without any help, yet I improve some language on my design.
3.6 deliverables
In the end, we got a roadmap having three terms. The short-term started with fundamental features right away for the next sprint. Mid-term would begin in three to six monther; we need to hold user testing to iterate the short-term design. For the long-term plan, we would focus on more innovative design features.
4 Takeaway
A logical work process leads to design practical with fewer efforts.
User testing with clear goals reminded me of design with empathy.