Bohemian Research helps businesses gain insights through market research.
Their Multipolls app solves this, but they need a rebranded app for a different market.

Maintaining two products with the same functionality but different branding means ensuring both stay updated simultaneously. While manual updates are an option, a system that automates updates across both products makes the process more efficient and scalable.

Bohemian Research helps businesses and organizations uncover actionable insights through global market research. With 5 million users across 50+ countries, they offer surveys, interviews, and flexible research methods to deliver meaningful results quickly and cost-effectively through their app, Multipolls.

Now, they need a new app, Golden Survey, to do the same thing but with a new brand and color scheme tailored for a new market.

Our primary goal in the Multipolls redesign was a UI refresh. The product had good traction, but the team wanted a more polished interface and smoother flow to enhance user engagement and minimize friction. While UX was important, the main focus was on improving the UI.
What We Did:

• Conducted a UI audit: Reviewed the entire app to identify strengths and areas for improvement.
• Analyzed competitors: Studied what they were doing better and how their UI stood out.
• Explored opportunities for improvement: Identified ways to elevate Multipolls' UI to the next level.
• Collected stakeholder insights: Ensured alignment with the broader business strategy.

• Redesigned UI Flows for a seamless user experience
• Refreshed user interface with a clean and intuitive design
• Improved Color Contrast to improved accessibility and compliance

Creating the right semantic token structure proved to be a big task. The major challenge was finding a structure that would be scalable without requiring unnecessary naming conventions. I wanted something simple and easy to understand as you follow the token hierarchy. I didn’t want a token structure with too many levels, as that would make it overly complex. At the same time, we didn’t want a structure that lacked clarity in its naming.

Eventually, I ended up with a four-level semantic token structure.

1. Usage (Surface, Text, Icon, Border, etc.): This defines how colors are applied within the UI, such as for backgrounds, text, icons, or borders. Yes, I used Surface instead of Background. Material designed influence me :)
2. Sentiment (Default, Success, Warning, Danger): This represents the emotional or functional meaning of a color, such as green for success, yellow for warnings, and red for errors.
3. Prominence (Default, Weak, Medium, Strong): This controls the visual hierarchy by defining how bold or subtle a color appears. For example, stronger prominence may be used for primary buttons, while weaker prominence is used for secondary actions.
4. Interaction (Default, Hover, Active, Disabled): This defines how colors change based on user interactions, such as hover states, active clicks, or disabled elements. This ensures clear affordances and feedback in the UI.

We knew we wanted purple and yellow to be part of the new brand identity, but we were not sure of the ideal combination. To explore our options, we tested various color variations using our variables panel to seamlessly switch between them.

In the second round, we narrowed it down to three options and decided to stay with the design in light mode. I ran several tests to ensure the color combinations were accessible.

We ultimately went with a yellow primary colour with purple as the accent. Our sentiment and background colours remain unchanged. We ensured that all color combinations met the Web Content Accessibility Guidelines (WCAG) to ensure the design is inclusive and accessible to all users, including those with visual impairments.

Contrast & Legibility: When working on semantic color tokens, I discovered that ensuring accessibility was more challenging than expected. Simply swapping colors for their opposites on the color scale didn’t meet WCAG standards for dark backgrounds. Contrast had to be adjusted, as mathematically opposite colors didn’t always provide enough readability. I tested colors in context, used contrast checkers, and refined them to balance accessibility and design consistency.