Case Study 03:
Empowering Users with Product Design in a SASS App Ecosystem
Tech Startup: Truckxi, LLC
UX/UI Product Designer
Feb–Jun 2017
Problem
Truckxi,LLC is a promising B2B SaaS startup, secured investment with a revolutionary ERP and CRM platform. Their target: replacing the outdated software of their primary investor, a major investor. While affordability and speed won the initial investment, a usability crisis threatened to derail the entire project. I was hired to the team to revamp the user experience (UX) and user interface (UI) using product design best practices to salvage the crucial investment.
Mr Owl Matheo Cadena
UX/UI Product Designer
Project Overview
Truckxi’s new app competing with SAP and other supply chain platforms, faced it’s near end due to cumbersome learn user interface (UI). The UI was left to the engineers who did not know how to implement usability best practices for a better user experience (UX). When the stakeholder tried their app he rejected it because it was too hard to use. As a result of this negative user experience, Truckxi’s brand perception was damaged and it nearly cost them their major investor, jeopardizing the startups future. Mr Owl was brought onto the team to solve the usability problem.
Discovery Process
Researching the Problem
- Poorly Designed User Interface: The client’s key stakeholder struggled to navigate the platform. He rejected the app, because the engineer’s UI took three times longer to complete daily tasks.
- Negative User Experience: User tests revealed the app interface which was designed by the engineering team was so hard to use that tasks which took 1 min to complete now took 5 min to complete, which was unacceptable.
- Threatened Investment: The client’s frustration led to potential termination of investment, jeopardizing Truckxi’s future.
Problem Summary
My research revealed that the product design needed to reorganize all UI components with the user’s mental model.
The stakeholder had a very clear mental model of steps each employee needed to follow to be fast at their job.
Solution
Conducted user interviews with the key stakeholder user and manager. I created a low-fidelity wireframe. Then presented this wireframe to the engineering team and got the greenlight to begin making it interactive. Once I had the interactive app prototype, and conducted a timed usability test.
Design Process
Design Process
Mr Owl used the interactive prototype to test the new app UI redesign. As a result, the startup saved time and money by not having to code a new solution . Instead, we were able to validate the UI design before writing a single line of code.
Tools & Teamwork
Engineering Discovery Interviews
I interviewed the front-end and back-end dev team, to learn about their UI design decisions. Using the team’s insights, I redesigned the UI.
Designing the Interactive Prototype
Created an interactive app prototype. Fit all key UI components of within single viewport, while auto-filling where possible, creating a faster and smoother UX.
Usability Test with Key Stakeholder
Using my interactive prototype I conducted a usability test with the key stakeholder. Their feedback was overwhelmingly positive. Giving the engineering team the greenlight implement.
Results
Due to my app redesign, was able 80% faster. The primary task was down from 5 min to 1 min. This could only be made possible by validating my design ideas with the engineering team using my low-fidelity wireframe. Once I had their feedback integrated into my wireframe, I used this to inform the design of my interactive prototype. Finally, I was able to conduct a timed usability test using my interactive prototype, which showed promising results.
Redesigned & Redefined UX/UI
80% Faster
Conducted a user test with the key stakeholder using my interactive prototype of the app redesign. Previously, the engineers UI design took 5 min to complete the primary task, whereas my UI redesign took 1 min.
Saved Time & Money
Ultimately, saved the tech startup time and money. The team of 4 engineers, 2 front-end and 2 back-end developers. They estimated that it would take 5 days working 8 hours a day as a team to build an interactive prototype. That’s 5 days times 8 hours a day is 40 hours x 4 developers wages of 120 hours. My design solution only took 40 hours to complete. That’s 80 billable hours saved.
Secured Investment
Thanks to my UI redesign the key stakeholder agreed to continue to working with the tech startup. This secured their investment for the next year. As this client was a main backer of the project.
Reflection
This project was a crucial point in my career, because working with a tech startup I saw the direct impact of my work on the product and the team.
Working with larger organizations I was not able to see how my design work always impacted the end outcome. However, with this tech startup, I worked directly with the front-end and back-end developers, which grew my understanding of coding. I radically changed the way I approach making design systems as a result of the great teamwork at Truckxi.
Looking Back
What I’d Do Differently
More User Testing
In hind sight, I’d spend more time testing with different user groups to further improve the efficiency across the team. Further user research would help identity other areas for improvement that the existing team wouldn’t be able to find.
Let’s Work Together
Hiring a Designer?
If you’re looking for someone who’s passionate about design, advocates for accessibility, and is a voice for your users’ needs — then, fly me an email.
Next Case Study
Brand Acupuncture:
Integrating Web Accessibility & ADA Compliance into the UX/UI Design Process
Product Designer
Case Study 04
Redesigned the client’s healthcare website integrating Web Content Accessibility Guidelines (WCAG) into the user interface (UI). For the purpose of compliance with the American with Disabilities Act (ADA).