UX Audit
How auditing your user experience empowers your team to focus on people — not pixels.
Project Overview
Project Duration
November 2021 — March 2022
My Role
Programs
Figma, Jira, Slack, Zoom, Metabase
Key Skills
UX Designer
Rapid concept ideation, team collaboration, visual design, wireframing, project management, and public speaking
My Team
Matt C. — Lead Software Engineer
Mike I. — Software Engineer
Umar I. — Software Engineer
Ahsan Muhammad - Software Engineer
Christian G. — Product Manager
Nikita Guryanov — Quality Assurance Engineer
Background
Through cutting edge software, Transect empowers energy companies and land developers to finally automate the environmental permitting process, receiving a report of any red flags in minutes - not weeks or months.
Original UI/UX
Some users of our software
Research
In early November, I asked my CEO if I could take a month to flag any poor user experience items throughout the app as we approached the holidays. Things were winding down for the year. I wanted to do some house cleaning. Small things.
I met with 6 of our users. Over zoom. Over coffee. I needed to figure out what was working and what wasn’t. I got started right away and things became apparent quickly.
“The map is too small. I want to see more of my area”
“I’m confused by all these tabs. What is the difference between projects and reports?”
“What tab do I need start in?”
“I don’t know where to start drawing my project area. It took me 10 min to find this button”
Original UI/UX
Vision: Find Your Site
A Typical Path
All of my user interviews boiled down to this user journey, showing emotional states and expectations. This helped me track where exactly the friction and frustration was.
Takeaways
Transect customers need a product that’s intuitive, highly functional and delightful. So I, as the design team, needed to recreate a design system and user flow that would help us fulfill those needs on a continual basis. We needed:
A clear idea of how to work through creating a project report
To combine user paths that are duplicative and confusing
Redesign the dashboard to show users what is most useful — their projects
A new design system to accommodate for web accessibility guidelines
UI that inspired delight
Increase projects created by 20%
Ultimately, I wanted to craft a new design for our product that would be as delightful and easy to use as any of the consumer apps our customers used every day.
But with that came the realization of a universal truth:
A huge undertaking was building out a new design system, which included a component library, style guide, and color palette. I had to eliminate the inconsistencies that had made its way into our UI.
The root of the problem was our interface had inconsistencies across the platform, which made it harder to use and navigate the tool.
New Design System
Redesigning our platform meant we would need to engage our product, design, and engineering teams across two continents. It meant we would need to divert some design and engineering resources away from creating new experiences so we could fix existing ones.
Beginning Fresh
Eliminating Assumptions
Creating a new user flow
Report and Projects need to combine to become “My Portfolio”
Dashboard needs to show a list of current projects to help users track progress
New design system needs to eliminate incorrect use of color and create an accessibility-compliant palette
The Dashboard
Projects and Reports tabs need to be combined to eliminate confusion
Header needs to be removed to allow for more map visibility
Tabs need to be ordered in the workflow of a project creation
Starting a project needs to be extremely obvious and next steps should be as well
Vision: Where Projects Start
Focus: Vision
Much was done during this UI/UX revamp but none more important than the Vision redesign. It’s where a user needs to start and where much of the application’s real value comes into play. I will focus on this flow for this case study to show off more of the details of the process.
Competitive & Comparative Analysis
Context
One of the most important UX lessons I learned in this body of work was the value of asking “What is the next thing the user is wanting to do at this very second?”. The value of context, and what is triggered once something is clicked or acted on, is what brought me to design CTA buttons that wouldn’t reveal until the user was done drawing.
Hallway Testing
I needed to test this idea of what would happen after a user would stop drawing. I solicited free user testing by walking into the offices of neighboring companies near to my company’s headquarters. I tested with 4 users.
Option A
Option B
More Testing
Refine
I realized my designs were getting close. After some user testing, a few things needed to be designed to accommodate an intuitive flow:
Clear starting project creation buttons, located at the top left
A “Manage” modal that would appear once the user
Bold color to signify what the next step was
Clear indicators to go back to a starting point
Before
After
Users now understand how to get back to their starting point if they change their mind
“How do I get back if I change my mind?”
Directional Help
Bold Color Used To Signify Next Steps
Before
After
The Launch
Finally, in March 2022, we deployed all of the design changes to our user base. Using Metabase, an open-source analytics and business intelligence application that allows users to create data dashboards, we tracked the impact of this design overhaul.
An actual quote:
“I just want to say. What you have done with this — I feel like with Transect I’m driving a Lamborghini and [Competitor Name] is like driving a Honda Civic. Excellent work here.”
Goal: Increase in projects created in Vision by 20%
Conclusion
This was a huge endeavor and a complete redesign is always getting tweaked. Whenever a new component is built or improved, it’s rolled back into the Figma library and is accessible to everyone in the company. This greatly reduces the number of rogue components or duplicate components. We also saw user delight and activity increase.
To combine user paths that are duplicative and confusing - Success
Redesign the dashboard to show users what is most useful - Success
A new design system to accommodate for web accessibility guidelines - Success
UI that inspired delight - Success
Increase projects created by 20% - Success
I learned that it’s always better to ask the question, “What will be true for our users in 6-12 months?” and improve those features and flows before jumping into building brand new things. I also learned that I should’ve done user testing sooner with sketches and wireframes, rather than waiting until the higher fidelity models.