Timeline: Nov 2022 – May 2023

Responsibility: Prototyping, Ideation, Usability testing, wireframing

Tools: Figma, Miro

Team: 1 Project Lead, CEO, 3 Developers

Platform: Web

Designing for data-heavy SaaS platform

Project Overview

An early-stage startup is embarking on an exciting project to develop a revolutionary SaaS web app that aims to transform the construction industry by redefining how materials are ordered and managed on-site. They aim to set the industry up for success by introducing a powerful application that seamlessly links materials to project schedules and manages the material lifecycles across the entire supply chain.

*To comply with the NDA on this project, any confidential information of this company and this project will not be disclosed.

Role

As a UX Designer joining an early-stage startup, the role involved designing the foundation while bringing new perspectives for the layout, information architecture and enhancing the user experience by designing high-fidelity mockups and prototypes to launch their MVP.

WHAT I ACCOMPLISHED IN MY ROLE:

  • Collaborate with developers to ensure smooth implementation of designs, providing necessary design assets, documentation, and support during the development phase.

  • Participated in cross-functional team meetings, presentations to share progress, gather feedback, and advocate for user-centered design principles.

  • Created a design system

  • Designed the holistic experience from concept to the final product

  • Delivered all design screens on time, even though the deadline was extremely tight

  • Handled UI/UX design alone

My colleagues handed me the research data they conducted with the target audience (they had research data even before I joined). Due to budget and time constraints, I couldn’t conduct further research by myself. But conducted a competitive analysis to better understand similar products.

COMPETITIVE ANALYSIS:

I took time to look at other SaaS products. I went through the products

  1. To understand flows

  2. Analyze the overall UI design

  3. Use the product as a user to complete tasks and identify pain points

Process

I assessed the current state of the existing UX design, methodologies, and design assets left by the previous designer to understand the product.

Ideation

Together with the CEO and product owner, we conducted several brainstorming sessions, developed user flow, sketches and built initial wireframes. After several low-fidelity iterations, I created a mid-fidelity based on the best design flows, for a secondary review to the team to align with the project objectives. The feedback from the CEO and team were simple changes and I was able to incorporate them.

Balancing Ideas

Throughout the process, there were several good ideas that emerged. However, due to constraints such as time, budget, and technical limitations, some ideas had to be evaluated and, unfortunately, put on hold or discarded.

Iterative Refinement

The ideation process was iterative, involving continuous refinement of ideas. This approach allowed for constant evaluation and improvement of the design concepts.

Problem-Solving

Engaging in the ideation process allowed me to approach challenges with a fresh perspective. Through brainstorming sessions, I was able to generate ideas and solutions that addressed the pain points.

HOW IDEATION HELPED ME IN MY DESIGN PROCESS

Design Decisions

*For confidentiality reasons, I cannot discuss certain key features but will walk you through a few design decisions I made.

Design system:

When working on components, I wanted them to be:

  • Robust, fresh, and modern, representing the high standards we set for our product design.

  • Easy collaboration with the developers to provide efficient development experience.

  • Designed to be adaptable and scalable, enabling seamless support for various use cases within the product.

ANATOMY OF UI

Vertical navigation

Cons

Open drop-down submenus may overlap the main content and not easily scannable.

After reviewing the concept design with the team, why we chose vertical navigation?

  1. Vertical navigation supports more efficient scanning than horizontal navigation. From eye-tracking studies, attention leans left on websites: users look at the left half of the screen 80% of the time (nngroup)

  2. Users are familiar with vertical navigation: like Slack and Gmail

  3. Best for complex apps and websites

  4. Less number of navigational items to choose in our application and there are no multiple levels

Pros

Useful for grouping items, Item names can be longer, and easily scannable.

Cons

Requires more space, long list creates a user cognitive load.

Horizontal navigation

Pros

Takes up less space, allows multiple levels (1,2,3) and used widely in websites.

Sidebar with nested navigation throughout the platform.

*Without getting deep into 50+ page design, here are a few design choices I made on layouts.

Handling data complexity in the tables

Sidepanel

The main layout with random data

The top bar allows users to control their profile settings, manage their projects, and view the company logo.

The main area for the main content.

Grouping contents into cards

Empty states

Progress indicators

Summary

Challenges: The task of building a design system sounded daunting at first. As I had never built a design system all by myself but just tinkered around it until now. After binge reading several articles on how to create a visual style guide, I started to draw all the widgets in the Figma file. Working on a tight deadline to ship the designs from initial concepts.I was the only designer and owned the design process so I had to pay extra attention to details, how things flowed, making sure other team members understood the designs, and listening to any feedback to make the right judgment calls before finalizing screens.

Takeaways: Learned how to build a design system, communicating and collaborating with the team helped me grow in an agile environment, and working for a startup helped me wear different hats and learn about UX.

See other projects:

ABB Thesis

 

SFO Airport

WHCC website