MVP Web App UX/UI Design, Design System and Research

Hanna Pak

0

User Researcher

Product Designer

Design Systems Specialist

Atlassian

Figma

Maze

Product Overview

Deskhero is an AI-enhanced customer support software platform aimed at helping businesses streamline their customer interactions and improve service efficiency.

My Contributions

I played a pivotal role in shaping the product's evolution and developing a seamless user experience from the ground up. In my role, I collaborated closely with the founder and took full ownership of the design process, guiding the product through several stages of development over a span of five years.
Product Preview
Product Preview

Key Objectives

Develop a Cohesive UX/UI: Create a design that scales with the product while remaining intuitive and user-friendly
Implement a Design System: Ensure visual and functional consistency across all product components
Address Complex User Needs: Tackle challenging user scenarios while maintaining a seamless user experience
Integrate User Feedback: Continuously refine the product by incorporating insights from user feedback.
Information Architechture
Information Architechture

UX Research

Starting with Market Research, I have created an extensive Notion board with an overview of each competitor, highlighting the features that overlap with our product and UX/UI of the solutions that they have implemented. Researched forums, blogs and even Reddit communities that are connected to customer support to understand the sentiment, which led to the empathy map and contributed to the User Personas. Following my research, I connected to a group of people who matched our target audience and they agreed to participate in a survey, which shaped UX strategy and product positioning direction. This, together with user personas,  immensely helped us shaping the product by delivering improved UX of familiar interactions.
Competitor Analysis
Competitor Analysis
Quantitative Research
Quantitative Research
User Personas
User Personas

Design Process

Ideation and Wireframing

The design process began with creating low-fidelity wireframes to outline the user flow and key features. I iterated on the design based on feedback from the founder and potential users, completing the platform’s information architecture to ensure usability. Throughout the process, the focus was on developing a clear, logical structure that minimized cognitive load for users.
Lo-Fi Prototypes
Lo-Fi Prototypes

High Fidelity Design

In the high-fidelity design phase, I developed mockups using Figma, prioritizing a clean and modern aesthetic. Special attention was given to creating a visual hierarchy that intuitively guides users through tasks.
Hi-Fi Prototypes
Hi-Fi Prototypes

Design System

I created Deskhero's Design System, ensuring a consistent look and feel across all product interfaces. This involved introducing tools like Zeplin for design handoff, Storybook for component documentation, and Chromatic for visual regression testing. Additionally, I developed comprehensive Design System documentation that outlined bottlenecks, states, and key rules for optimal UI implementation.
Component Breakdown
Component Breakdown
Component Documentstion
Component Documentstion
Style Guide
Style Guide

Prototyping & Usability Testing

I developed interactive prototypes to validate design decisions, which were then tested in usability sessions to gather both qualitative and quantitative feedback. Based on the results, I iterated on the designs, making usability improvements and visual refinements to ensure an optimal user experience.
User Flow
User Flow
Usability Testing results
Usability Testing results

Conclusion

Deliverables: 170+ Figma mockups, Interactive Prototype, Information Architecture, User Flows, UX Research, Design System, Design Guidelines, Usability Testing, Product Analytics, Web Design.

Results & Impact

The successful launch of the Deskhero customer support platform was a significant achievement, receiving positive feedback from users across the board. The introduction of a comprehensive Design System played a crucial role in this success, reducing design and development time, improving consistency, and making updates more efficient. As a result, user satisfaction scores saw a notable improvement, particularly in terms of ease of use and overall functionality.

Reflection

This experience underscored the importance of aligning design decisions with both user needs and business goals, highlighting the essential role of clear communication and collaboration between design and development teams. Moving forward, the focus will be on iterating the product based on ongoing user feedback, as well as exploring new features and integrations to further enhance the platform’s value proposition.
Like this project
0

Posted Nov 4, 2024

Deskhero is an AI-enhanced customer support software platform aimed at helping businesses streamline their customer interactions and improve service efficiency.

Likes

0

Views

2

Clients

Deskhero

Tags

User Researcher

Product Designer

Design Systems Specialist

Atlassian

Figma

Maze

Website for a Deep Tech Startup
Website for a Deep Tech Startup
MVP for Fintech StartUp | UX/UI Design
MVP for Fintech StartUp | UX/UI Design