.webp)
A tech startup enlisted me to design a mobile & web app for fleet management that provided visibility of the workforce and key project data in real time, built with the end user in mind.
The mobile and web apps would have separate user flows and versions of the app, based on each of the three types of users and their varying levels of permissions and user needs. I should mention that due to NDA restrictions, I’ve changed some of the core elements of the app for the purpose of including it here as a UX case study.
One of the clients has been working in the industry for several years, which gave him the unique opportunity to really understand users’ needs. I learned from this research that the level of technical literacy varied among each type of user, but that the overall level is lower than the average consumer. This meant that the UI and UX for completing a task must be simple, using design patterns already established so the user’s understanding of how to use the app would be as minimal as possible.
I also learned that for two of the three user types, there is a good chance they would be wearing work gloves while using the app, meaning that the UI elements, especially buttons and text links, must be large enough to accommodate gloved fingers. I requested a pair of these gloves to perform my own testing as I progressed through the development and iterations of design.
Here are two examples of the user personas I created based on this research, showing the different levels of technical literacy, challenges and needs for these two types of users.
.webp)
This app contains complexities and interdependencies throughout the user journey, which require notifications, approvals and connections to multiple team members at all levels. For example, when a project manager requests a new team member for one of the projects on her plate, she taps on the “Project View” tab in the bottom app bar and again on “Requests.” She fills out a form with the dates required, certification requirements and preferred skills of the worker, and taps the “Submit” button. This request is uploaded to the database as a new row in the table that’s on one of the dashboards in the web app, and a notification is automatically sent to the supervisor and anyone else the PM adds to the distribution list. Once the supervisor fills this request, another notification is sent to the PM, the worker, and the rest of the distribution list, marking the request as filled. This process not only requires a thoughtful planning of the information architecture of the web and mobile apps, but of the database permissions necessary to have in place throughout.
I have included annotations of these processes in the Figma UI mockups, so the development team can note the chain of events triggered by such a button tap. Here is a look at the site map I created for one of the types of users, showing a simplified map of the areas of content within the mobile app.
I collaborated with the client and the development team to further narrow the parameters of the project requirements, based on what was feasible, affordable and according to best practices.
The client has at least two additional modules they wanted to include – timecards and daily reports – which offer new ways to meet the customers’ needs. However, due to budgetary constraints, they felt the need to stick with the most viable product for the initial launch and add more features for future releases of the app.
In order to communicate as much as I could with the dev team, I created the mobile app wireframes with annotations and flow lines for each type of user.
At this point the project is still ongoing, and we set about tackling the mobile app first; we are currently in the process of wireframing the web app in the same manner.
.png)
Based on feedback and user testing with the wireframes, I set about creating high-definition UI mockups for the mobile app, as well as fully interactive prototypes for further testing and marketing purposes. The prototypes show important functionalities throughout the app, and includes all the major user workflows, from the initial welcome screen, creation of a new account, logging in, and navigating specific tasks for each user type.
With the goal of keeping the user front and center, the development team will continue user testing, as they work in design sprints with specific goals in mind for each sprint. As the lead UI/UX designer on this project, during this process I will keep in close contact with the dev team through the initial product launch date and beyond.
.png)
.webp)
Alongside creating the brand identity for the StrataVue app, I created a design system with atoms/building blocks and various components. I also created local components that are based on the main design system for both the mobile and web app, which live on a separate page in each Figma document. Here are some details taken from the design system.
.webp)
As part of the brand identity, after designing the StrataVue logo I created an animation to play once when a user first views the welcome screen. The logo starts with the logo icon from the app’s parent company, Strata, and morphs into the new StrataVue logo.
I created the background design motif as inspired by the geometric shapes in the StrataVue logo, and was intentional in including the brand personality in the app, as seen in the visual hierarchies, typography, colors, grid system, and interactive elements throughout the app.
As the product lifecycle is still ongoing, we haven't yet reached the stage of analyzing sales and customer feedback yet. Without these metrics in place, we can determine that there are still rounds of iteration coming in the near future, and this will help continue to strengthen the efficiency and user satisfaction of this product. As my largest and most complex UI/UX project yet, this has been a learning experience for me, but I'm proud of the work I've done and the value I've been able to add to this product.
Pam Golafshar's expertise has been critical to the successful development of our application. She understands complex processes and is able to map and design with an eye towards both aesthetics and function. She has listened attentively to our specific needs and her insights for design impact on end user experience as well as for creating ready-to-market features have been invaluable for our team. From UI/UX to marketing designs, Pam has provided us with premium service from start to finish.
– David R. Wilson, Ph.D., CEO