Summary

After meeting the founders over Zoom, I fell in love with the problem & product. I joined Harmony as the first team member and have revamped the UI, created the UX for a Chrome extension, and built the website & marketing materials.*

*project still in progress

Problem

UI did not reflect the professional feel of the tool, and UX was built for developers first. Designs were inconsistent

UI did not reflect the professional feel of the tool, and UX was built for developers first. Designs were inconsistent

Goal

Create a design system to decrease development time and maintain consistency. Update UX for designers

Create a design system to decrease development time and maintain consistency. Update UX for designers

Tools

Figma, Framer, Linear, Material Design, Human Interface Guidelines, WCAG standards

Figma, Framer, Linear, Material Design, Human Interface Guidelines, WCAG standards

Market Research

Before building a revamped product, we wanted to ensure that demand was there. We spoke with Project Managers, Designers, Developers, Agency Owners, Freelancers, and Executives to understand their needs. This chat embodies what we heard again and again - that designs & code were disconnected, slowing down implementation.

"The hours I could save by not bugging the developers every time I need something small changed on the app! Yes, please."


Every designer, probably

"The hours I could save by not bugging the developers every time I need something small changed on the app! Yes, please."


Every designer, probably

"The hours I could save by not bugging the developers every time I need something small changed on the app! Yes, please."


Every designer, probably

User Personas

We created a persona for the ideal customer: a small SaaS startup designer that is filling in for a front-end designer. We named this person Eric.

Eric has a lot of responsibilities, including branding, UX, and UI. He worries about staying ahead of developers, and often finds that his designs aren't implemented exactly as he designed them.

Journey Mapping

I mapped out the typical flow of getting UI updates from sketchbook to production. I identified 3 problems that Harmony could solve: A/B testing, implementation speeds, and design QA.

UI update task flow

Visual design

Creating a usable design system for Harmony from scratch was new to me. I over complicated it at first, adding too many colors and fonts without having a use for them. I pared those back until we only had a few styles, and added more when needed. Here's a before and after:

Prototyping

Since our target audience is designers, I took inspiration from common design tools like Figma and Webflow. Iterations here reflected what we could do within Harmony vs what we wanted long-term.

Iterations: designer panel

Developer handoff

We created "stories" for documentation and handoff, including notes for states, styles, etc.

Additionally, I created a system in Linear to differentiate between new features and minor adjustments, allowing our developers to increase development speed by grouping updates.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.

I create exceptional digital experiences & highly usable products that increase value & revenue by engaging users.

© 2024 Wyatt Thacker. All rights reserved.