The Situation

Project

D.I.Y. Mutual Fund Website

Role

Researcher, UX Designer

Goal(s)

Clarify the information architecture of the website
Improve usability of fund creation process

Results

Utilized research results to clarify and design header navigation
Developed improved user flow and designed new wireframes to increase clarity and ease of use in the fund creation process on the website



The Process

Tools/Techniques Used

  • Sketch
  • Paper and pencil
  • Whiteboarding
  • Card Sorting
  • User interviews
  • Stakeholder interviews
  • User Flows
  • Wireframing

Testing

I worked with a Product Manager to develop a card sort to inform the team of any changes needed to refine the header navigation and design, per the client’s stated priorities. We hypothesized that as a user, 1) I don’t care about having the blog, FAQ, & media content front & center. I expect help to be available along the way so I don’t have to seek it out, 2) I expect to have settings in the primary nav so I can log out, manage my account, etc. and 3) I expect the currency toggles to work instantly & to have more options available. With the card sort, we led users through a practice round to get them familiar with the test, then the sort for the site itself. We used a hybrid approach – we gave users a set of cards, and the ability to create cards of their own if they felt a section was missing or could be utilized in a better way. We didn’t give specific headers, but let users identify what they would expect to see.

In addition to the card sort, we conducted user interviews to discover user expectations regarding functionality of the website, what sort of data they expected to be presented to them, and how they would expect/like to manipulate that data themselves in creating their mass mutual fund. We showed users a print-prototype of the screens as a visual aid.

Information Architecture

Per the results of the card sort, I developed a navigation that would meet user expectations. I analyzed the results of the card sort to find the common threads and used that to inform the top level links on the header, the menu navigation, and where other pieces of information ought to live – body of the page, the footer, etc.

User Flows

With the new information architecture, I developed user flows to show how the new structure would link the website together, and what steps users would be taking through different experiences.

From the user interviews, I developed a concise, streamlined flow specifically for the creation of a user’s mutual fund.

Wireframes

With the information from the user interviews, I developed a visual guide to laying out the information architecture changes. I focused on things like hierarchy of type to clarify information for users, outlining places for tooltips on the body of the page, and how that content should be revealed, and what content should live in and/or be moved to the footer. Additionally, I identified places on the body of the page where explanatory text/simple instructions were needed in order to help users understand where they were on the page, what they were doing, and what was going on in the background.

In addition to identifying a need for simple instructions, per user interviews, I broke down the mutual fund creation process into steps, labeled those steps, and identified useful data visualization that would inform users in addition to attracting visual interest (in one example, changing pie charts to stack bar graphs). I also included unhappy path options and directions for helping a user navigate themselves back on the right path. At every step, I attempted to create a linguistic and visual tone that would reassure and support users without being condescending or confusing.

I worked with the UI Designer on the team to develop an aesthetic that would support a clear, reassuring experience with easy to use navigation.