From idea to fully designed product resulting in 12 new companies as clients

Company

Lifekeys
B2B startup

Type

Real project
Full time
Remote

Product

Web-app dashboard

Team

One designer (me)
Three developers
CTO
Co-founder
Product owner

Problem

Companies lose money due to decreased productivity caused by mental health-related issues, which often go unnoticed, but are easily preventable if detected early.

Outcome

From zero to the successful launch and market adoption of an HR manager's mental health tracking tool, aiding in the prevention of mental health issues and driving sales within target markets.

My contribution and deliverables

Stakeholder interviews

Competitive analysis

Relevant proto-persona

Userflow diagram

Wireframes

Moodboard

High-fidelity UI

Collaboration with developers

Iterations based on user feedback

About

My first ever UX/UI job in a B2B startup where my primary objective was to craft a digital tool catering to HR managers. This tool was designed to enable the tracking of mental health within workplace by sending periodic mental health related questions to employees.

A very small ~10 people startup with an ambitious vision, but without design assets or preparations necessary to start.

I worked here for over a year and did all sorts of things including graphic design and branding, however for this case study I will focus on dashboard.

Constrains
  • Zero budget for user research.
  • Defined list of mostly non-negotiable features and functionality.
  • Poorly made visual identity with no style guide.
  • No lead or senior designers (or any other designers besides me).
  • I had ZERO prior UX/UI experience, this was my first job in this field.

Stakeholder interview

When I joined the company, I was informed that we would be creating a digital product for mental health tracking from scratch.

However, there was no clarity on the business or user goals, nor on the desired outcome. Additionally, there was an opportunity to bridge the knowledge gap regarding other important details.

Why?

Key takeaways

  • Similar, but not good enough for mental health tracking product exist
  • Product users are going to be CEO’s, managers and HR managers
  • We have to complete this project in about 3 months.
  • Solution must be based on HTML (no apps).
  • Stakeholders lack a budget for research and prioritize a swift product launch to test it in real-life scenarios.

Competitor analysis

Stakeholders drew significant inspiration from the web app known as "&frankly" for its similar functionality but with a slightly different focus. Therefore, it was crucial to delve deeper into understanding this product, along with exploring alternatives like "Agendrix" and "Leapson."

The primary objective was to gain insights into user experiences, industry trends, and feedback.

Why?

&frankly analysis showed:

  • The outdated appearance and inaccessible contrast levels, failing to meet WCAG standards, contribute to usability challenges.
  • The product touches on mental health, but lacks a primary focus, resulting in insufficient emphasis to address the problem effectively.
  • Lacking desired features customers complain about.

Angendrix and Leapsome analysis showed:

  • Bulk actions are a common time-saving feature for companies with hundreds of employees.
Christian

I would like to see more options in design when it comes to types of questions, adaptability, themes, icons, images and color.

Johan

There's no easy way to delete packages of questions without support from the software supplier.

Alex

It is not very intuitive, especially the answers section.

Relevant proto-persona

Why?

Before designing, I empathized with our ideal customer based on prior research, creating a preliminary persona. The main goal was to focus on relevant information to base my design decisions in my further work.

How we benefted from proto persona:

  • Assisted in mapping a user flow diagrams and decide in what sequence user is expected to interact with the product to help them achieve their goals faster and smoother.
  • Helped prioritize features that were most commonly used by the persona based on her goals.
Sarah

HR manager

Sarah works at a mid-sized technology firm specializing in software development. As part of her responsibilities, she seeks solutions to address employee performance issues which become apparent in recent months.

Pain points

  • Limited time and resources, lack of expertise in mental health.
  • Identifying the factors contributing to declining performance, implementing effective interventions to support employee mental health and overcoming stigma surrounding mental health discussions in the workplace.

Goals

  • Sarah aims to identify the root causes of decreased productivity and employee disengagement within the company and solve them.
  • Sarah aims to prevent productivity related issues

Needs

  • Sarah requires actionable insights and data-driven tools to assess employee well-being, identify trends, and implement targeted interventions.
  • She seeks solutions that prioritize employee privacy, offer customizable features, and provide access to resources for promoting mental health awareness and support within the organization.

Wireframing

Even though the stakeholders knew what they wanted, they didn't know how they wanted it.

Wireframes allowed us to present the features quickly and clearly, facilitating discussions with stakeholders without delving into aesthetic details.

Why?

Wireframes allowed us to:

  • Save time and money by providing developers with validated wireframes for core functionalities, allowing development to proceed while visual design is in progress.
  • Meaningful feedback streamlined the process by catching potential mistakes early, thus saving time that would have been spent fixing them later.
  • It revealed new opportunities that stakeholders may not have considered initially, enriching further product development with fresh insights and ideas sparked by the wireframes.

High fidelity

Before delving into high-fidelity design, I needed to establish a visual direction, as the company lacked any existing visual guidelines.

Although they had a website characterized by three predominant blue colors and background photography in each section, there was no formal style guide.
‍
To ensure consistency with the brand, I opted to align the dashboard's aesthetics with those of the website, creating a seamless visual experience.

Outcomes:

  • The final design received praise from stakeholders.
  • Following the product launch, we sold it to our first clients within the first month and continuously gained new clients ever since.
Employee answers

After the dashboard was completed, I also had to design question templates for mobile that employees would receive through a link.

These questions were designed to serve a dual purpose: to be interactive and enjoyable for employees to answer, and to serve as easily modifiable templates for HR managers. This allowed HR managers to fill them with different text to create entirely new questions while still making sense.

Conclusions

This was my first ever product ux/ui case study, woohoo! 🎉 The project was definitely an eyes-opening experience for me which provided me tons of opportunity to learn and grow!

"I learned a lot from David. He is always willing to lend a hand to anyone who needs it. His ability to overcome challenges with a smile made his stand out as a cut above the rest! Any company would be lucky to have David on their payroll."

Michaela
Product owner at Lifekeys
1. For very small projects always use UI kits and existing libraries if possible.

All free and paid UI kits, design systems and libraries are heavily customizable and you can achieve brand appropriate looks pretty easily while saving tons of time without having crafting each atom and molecule from scratch and save tons of time. I didn't know it during the project, but I won't repeat this mistake again.

2. No matter how little research you can do, always try to base design decisions on evidence no matter how little - it's better than nothing.

During the project I did plenty of competitor analysis and product review analysis as well as stakeholder interviews to inform my design decisions even though first hand experience such as interviews weren't available for me at the time, however I could have done better job informing stakeholders on importance of user research even if they think they knew about their client best.

3. It's impossible to create a perfect product without testing.

After final design was developed some confusing few confusing places for users emerged. The issues were small and easily fixed, however it thought me a lesson that user is not a designer nor stakeholders - it's users. So if I still worked for this company, my next step would be to do usability testing and iterate from there.