Role |
|---|
UX Research |
UX Consulting |
UX Design |
Design specs and requirements |
Prototyping |
Who I collaborated with | How they helped |
|---|---|
UX Manager | Run ideas past them to receive design feedback |
2 Business Executives | Initiated request, provided education, made key decisions |
1 Business Analyst | Assisted with documentation of decisions |
1 Product Manager | Provided expertise and communicated with vendor |
1 Visual Designer | The visual designer was involved to provide the visual brand layer to the wireframes I provided. |
Background
This is a website development project for Great-West Life's financial advisors. The site's purpose is to support advisors by comparing the performance of segmented and mutual funds and enabling them to communicate decisions with their clients.
Project Restraints & Limitations
This project was outsourced to a third party and there were many limitations with what they were capable of doing for the mobile designs. This left me to work within those limitations and make suggestions rather than suggest complete design changes for the ‘ideal’ design. Working within those limitations I developed the first versions of wireframes to hand off to their developers.
Understanding the problem
Prior to starting the design process I met with business executives from another department within the company and went over their expectations and requirements for the new designs. After being given a rough ‘site map’ of what they would like included, and fully understanding the purpose of the tool, I was able to navigate the current site and document all of the areas that were pain points for usability.
Defining the problem
To help ensure that design decisions were focused on improving the advisor experience using the mutual and segmented funds tool, I used the following problem statement.
Problem statement
How might we... enable advisors to easily find and save the funds they want to show their clients?
Research
The majority of my research for this project was done on filter design. Unfortunately, many sources were specific to retail filters (categories for clothing, size, colour, etc) rather than for funds and large amounts of complicated data. Existing patterns used by Airbnb, Amazon, and MLS.com influenced the design of our filters for mobile use.
Best practices
Filter bars can be placed above specific parts of the page, to ensure it's clear to users that only those items will reflect the filter's input.
Dropdown menus are good for filters laid out as a top bar. Relying on filter dropdown menus to display additional options is useful and intuitive.
Inputs for the user need to reflect the type of data that is going to be provided. For example, checkmarks for multiple items or radio buttons for choices that can't be used together.
Avoid more than 5 options when possible so users don't fall into 'analysis paralysis' making it too difficult to choose what to filter by
Quick filters are great for commonly used filters, whereas advanced filters are better for providing the user choice and ability to filter more granularly.
For the first couple of wireframes, I was trying to find an appropriate pattern that worked well and mirrored the desktop design. I made several different iterations focusing on the layout of the filters, the flow of information, and breaking down desktop components into smaller mobile pieces. This was challenging because I was trying to scale down existing desktop designs and features to work on a mobile device.
Testing
From testing several layouts of the filter designs, it was clear:
The three different types of dropdowns (quick filters, sorting features, and advanced filters) needed to be more clearly labelled and not so close together to avoid user confusion
It also became apparent during testing that most people were unfamiliar with the filter icon, and didn’t look within it for more options.
With this in mind, I clearly labelled the simple filters with ‘Filter By:’ and ‘Sort by’, and made the advanced filters a floating button that hovers over the data table. I also created a menu that opened when users interact with the advanced filters which listed out all of the filtering options and sorting options that a user can select from.
Solution
This is a prototype I made in Invision of the mobile wireframes. As seen in the GIF below, the user simply fills out their information and can re-visit that information by opening up one of the expansion panels.
Final product
Below are the final hand-off pieces that were provided to the business executives. As part of this hand-off, I also provided a document that includes notes for developers about design interactions. You can download the hand-off document, below
Comentários