Baseline App

Building fundamentals and key flows for a team-oriented resource management app

What is Baseline

Baseline is a Resource Management Software that helps teams with project planning, budgeting, visualizing project progress and most importantly manage team capacity and employee work health.

My Role

I joined the team as the Lead UI Designer to turn client requests and wireframes into intuitive UIs and features. Besides building the design and prototype, I also worked closely with engineers, made detailed user flows for different scenarios, component library and style guide to make sure that the design is translated seamlessly into a fully functional software.

Who it’s for

Baseline is a SaaS application for project based companies such as PR agencies, consulting companies, and design agencies etc. With hundreds or even sometimes thousands of employees and various projects going on at the same time, it’s always been a challenge for companies as such to have a clear picture of what is going on within the organization and therefore result in misallocation of resources and miscommunication of information. It was created first for a multinational PR company to solve the existing communication and resource management challenges that they faced and then generalized into a product that could be used for organizations with similar needs.

Baseline aims to organize all the information in a straightforward but insightful way and create a focus around employees in order to create an efficient and healthy work style for the company.

How I helped

Before I joined, a primitive prototype was built to showcase the concept and used as a research tool to learn more about the client’s problems and needs, but it was far from complete in terms of features and style. I came onboard and spent a good amount of time studying the prototype and the wireframes that were made after a few months of user research with our first testing client. After getting a full understanding of the complexity and scope of the project, I organized the user journeys for all different types of users, transformed wireframes into features and flows, and built the entire UX of the product from ground up. I also made the Design Guideline, organized the UIs into reusable components and documented product logic to ensure that the design can be translated smoothly into a fully functional application.

 

1. Understanding

The very first step, and the most important is to listen and understand how the seemingly complicated system works. There are 3 main players in this system: employees, clients, and projects. Everything that happens in our client’s daily operation revolves around these 3 elements. For a resource management system, the key event flow is actually very straightforward: create a project, assign resources (in this case employees) to the project and monitor the project progress until it ends. However there are many conditional events that could happen along the way that will change the path or status of main events. On top of that, the users of the system (the employees), depending on their roles, have various access to control the conditional events and have different interests in the information, but at the same time all need to be in sync on all the changes that happened and are relevant to them. The layering of conditional events, roles of employees and ever-updating status of relevant information make up the complexity of the system, and are also the main problem that this application is trying to solve for.

2. Basic Structure: building the application around the 3 main players: employees, clients, projects.

After understanding the building blocks of our client’s workflow and the key actions concerning the building blocks, the structure of the application became clear.

S

Site structure

3. Design the key elements

Once the basic site structure is clear, the next things to do is to show what needs to be shown for employees, clients, and projects. Keeping in mind what users most need to know and the actions they perform in different sections of the application, I designed the overview and details page for employees, clients and projects respectively. 

Project.png

People.png
Client.png

4. Connect the building blocks with intuitive features and flows that are learned from user’s daily needs

Flow 1.png
Flow 2.png
Flow 3.png
Flow 4.png

5. Component library & design system for smooth handoff

Navigation.png
Style Guide.png
Previous
Previous

BookPeople App

Next
Next

Baseline Dashboard