How we set the UI design direction for UMHealthResearch
And 6 steps to set your own
On June 1 of 2018, UMHealthResearch launched a major redesign of its study team side. This launch completes a UI design unification process that started back in 2016. Up until June 1, we had separate UI frameworks for our study teams and our volunteers. We now have a unified design framework across the entire application. That includes basics such as typography, colors, grids and buttons to complex UI components such as a study snippet or a list of participants. But how did we actually start this process? How did we set our design direction in the first place?
1. Set an overreaching design philosophy
Our user research in the field taught us that our users were diverse in all respects. It also told us that using UMHealthResearch.org was something that users, especially our volunteers did sporadically. There is also a lot of jargon, misinformation and misrepresentation about health research in the world. This information formed the basis of our overarching design philosophy. It lead us to believe that our final designs needed to be visually simple, with discoverability being the primary objective and efficiency being the secondary.
Pro Tip: User Research can be a great place to look for inspiration in terms of setting an overarching design philosophy.
2. Identify core UI components
UMHealthResearch is a double-sided marketplace, which means that it has two distinct audiences — volunteers and researchers. We made a conscious decision to start with our volunteers. Without them, there is no UMHealthResearch. For our volunteers, finding studies, understanding the details about those studies and providing information while showing interest in a study, are central to their experience. We mapped these experiences to the UI components that bring about these experiences. That left us looking at the following UI components as core:
- A study snippet/handle that volunteers can use to pick a study
- The study details page
- The form that volunteers complete to show interest
Pro Tip: Conversion funnels are a good place to start when trying to identify your core UI components.
3. Establish what visual treatment will make these core components succeed
3.1. Study Details page
We looked at the study details page first. The page exists to communicate information about a study to potential volunteers. This information is communicated through (sometime dense) text. That meant the most important thing this page needed to succeed was good typography — typography that was set for long, dense passages of text. Through the process of trying to make this page work for our volunteers, we finalized our body typeface (we decided to go with the one suggested by the University), set our typographic grid, and picked our font colors. In other words, we started to lay the foundations for our typographic system that we then ended up building upon and using throughout the platform.
3.2. Study Snippet
Now that we had a typography system, we took to designing the study snippet. Our research had told us the pieces of information volunteers were using to decide if they wanted to know more about a study. We also knew that studies could have different states (new, actively enrolling, not enrolling etc) that we needed to distinguish between. This was our first chance in the project at chunking overview information together in a snippet. We first tried a simple box with the information in it. When we showed this to our volunteers, they felt overwhelmed. We then researched successful ways to present heterogenous chunks of scannable and actionable information on a single topic. There is a lot of literature out there on this topic but for our purposes, Google’s Material Design’s cards pattern fit that bill. We tried study snippets in form of cards. Volunteers reacted better to this presentation — it provided them with clear separation between the studies. Volunteers felt it was easier for them to understand each study, and in-turn take action on it. The card pattern became the foundation on which we built more complex design interactions, especially where presenting heterogeneous pieces of information was concerned.
3.3 Forms
Given the diversity of our users, we needed our forms to be obvious and clear. We started with designing the text input fields. We maintained a larger than normal field font size, and created a standard for how and where our errors would display. We then moved on to radio buttons and checkboxes. We maintained large clickable areas for use on multiple devices. The cards pattern helped us design the field-sets. It was then time to look at more complex components such as usernames and passwords. Testing this particular form with users helped us set the standard for all forms on the application.
Pro Tip: Test different visual design options for your core components with real users and see what performs better and why.
4. Set up your color palette
Our next order of business was to think of colors. Our volunteers had pointed out that they trusted the University of Michigan (U-M) brand, and it played an important part in their decision to participate. Breaking away from the U-M brand would mean risking our volunteer’s trust. That being said, being exactly like all other websites on campus would mean losing our identity, especially with study teams. To balance the two, we stayed within the U-M color palette, picking primary U-M colors for overarching components such as headers and footers, but picking secondary U-M colors for smaller branding elements such as buttons and card-borders.
Pro Tip: If a style guide exists for your organization, use it. That brand probably stands for some values and in most cases, your product will benefit from aligning with those values.
5. Incorporate these decisions into your design system
We then incorporated the typography we designed for our study details page, the cards we designed for our study snippets, the forms and the colors into a design system with the goal to use these for the new components we worked on next.
Pro Tip: Create a design system. Document the decisions you took, and the reasons you took them for so that your team can build off it.
6. Build more expansive components
The decisions that we took with the fundamental components listed above became the seeds that would then germinate to form an entire design system. We built many, many more interactions after this point, but all of their origins can be traced back to the fundamental components described above.
Pro Tip: Start with small components and use them as seeds for more complex interactions.
Conclusion
Setting a design direction is a tough ask that needs thinking at the systems level. It is easy to loose sight of the granular user experience when working at that scale. Focusing on a few core components of the user experience gave us a solid base to lay our design direction on. It helped us see immediately the effects that our decisions would have on pivotal micro-interactions. Once a design direction is set, you can build more complex components with predictable and consistent results.
Sign up for my (free) 5-day Mini Masters on Navigating Ambiguous Problems.
This course introduces concepts in fuzzy (used interchangeably with ‘ambiguous’) problem-solving relevant to UX professionals, service designers, patient experience professionals, and the product community.
