Home / lytx
When I first joined Lytx, our Safety Suite application was optimized only for desktop use. Transforming this application into a fully responsive web app was my first project.
I was tasked with refining the existing design features and coming up with a way to make those features responsive without redesigning the entire experience. While leading this redesign effort, I collaborated with product managers, developers, client success managers, and our end users.
When I started, we were getting customer feedback that clients wanted the ability to access our application on their mobile devices.
The product manager and I scheduled calls with our clients to gain a better understanding of their problem. We learned that, as a safety manager, they wanted to be able to access our application on the road. Because our clients are in industries such as construction, distribution, field services, trucking, and waste, the majority of them are on the road every day. They needed a way to access our application without using a laptop or desktop computer.
We soon realized that the feedback was a critical business need, and so we were given a short turnaround time to implement these updates. Because the application was already developed in Angular, a framework with responsive capabilities, we were able to keep the existing desktop application as-is. I was then constrained to the current designs while designing the mobile version of the app. My challenge was to figure out a way to make the designs responsive, to fit any screen size.
I worked with our product managers, client success managers, sales reps, and our clients throughout the process to gain insight and feedback.
I documented the safety managers’ users’ journeys so I could prioritize features and components. We decided to start with our navigation, tables, filters, and the coaching page.
I then dived into the designs. I compared the current tables to each other and thought through the different use cases for each page. I also conducted a competitive analysis what what's responsive designs were available.
I came to the conclusion that there are two different use cases for our tables. For a page that has a list of events, vehicles, or users, the end user is looking at each table row independent of each other. They are looking at a row to get information on a particular event. For our report and score tables, the end user is looking at multiple rows to compare and contrast information.
Based on my research, I recommended to the team that we create two components, for these two different kinds of tables, that render differently in mobile.
The solutions we proposed would require the creation of components that would be used across multiple applications, so it was important for us to have an elegant design. We got some initial hesitation and pushback but we were able to advocate in favor of our design needs in the end. We presented examples from the web to show that it was technically feasible to convert a table into a card format in mobile.
Once the development team was onboard, we then got feedback on our designs. Here are some of the different iterations of the designs.
1. Keeping the table in its original table format gives users flexibility in how they compare data. For reports that have a ton of columns, we’ve also implemented a feature where we would keep the first column sticky so we would prevent the user from forgetting who or what they’re comparing.
2. By allowing the table to convert into individual cards, we could reduce cognitive overload and allow the user to focus on individual items one at a time. This would minimize their need to recall pieces of information since it’s all available without needing to scroll back and forth.
Once we had implemented the new respondsive designs, our clients were empowered to utilize our product from any device of their choosing. We’ve increased mobile usage from less than 1% to 12%.