Vehicle Deployment App UI Design

Designing a responsive interface for a tech startup.

The Challenge

How might we design an app that displays necessary information to the right user, on the right device?

Our Process

Our client needed help creating an app for vehicle fleet management. Because these vehicles were electric, they wanted all the vehicle and driver details easily available to drivers, fleet managers, and administrators.

While stakeholders had the features they wanted displayed on a prototype, they needed the interface to match the high-tech capabilities of their offerings.

The Solution

We needed the interface to display all the capabilities of the app in an organized and modern way, and develop how task flows might look for the different user personas.

With the guidance of stakeholder direction, our team at Standard Beagle set out to create a high-fidelity mockup that not only looked great, but applied our knowledge of UX design to make it easy to use.

Our goals for designing this platform were:

  • Determine the hierarchy of information
  • Create a style guide and library of components for developers to reference
  • Design a clickable prototype showcasing each user flow

Results

We delivered a high-fidelity prototype and style guide in an intensive, weeklong turnaround.

Stakeholders were happy with the results and our ability to meet their needs on a tight schedule, and our willingness to follow up after the initial delivery.

This design has received an award:

Scope

The project scope included high-fidelity wireframes and clickable prototype, delivered through Figma files and a pdf booklet, and a library of basic UI components and a style tile.

Constraints

This project was completed over the course of 1 week, with an additional week of stakeholder feedback and iterations. While a mobile version of the app was not in our scope, we designed with responsivity in mind.

Implementation

We implemented our knowledge of design principles to make an effective and pleasing interface, able to function on both tablet and desktop for different user personas.

Understand

Before we could dive into design, we needed to get acquainted with the app.

Stakeholder Interviews

We first spoke with stakeholders to understand their platform. They wanted to build an app for managing their fleets of electric vehicles. This app would have different levels of access depending on the user persona, and could be used on desktop and tablet with a mobile version for future iterations.

We received their main user personas and a demonstration of the functions they wanted to display.

We also received access to the demo prototype they had built.

With these materials and stakeholder goals, we created a strategy for the project.

Explore

We started examining the prototype and, with our notes from the stakeholders, began take stock of the screens and built a sitemap.

Sitemap

width=

The sitemap helped us visualize and answer several questions:

  • Gave us a visual breakdown of which users needed which screens
  • Highlighted the most important screens for each persona
  • Created the hierarchy of information we needed to organize the app

Design

Style Tile

Before moving onto high-fidelity screens, we designed a style tile alongside stakeholder feedback and approval.

The styling expanded upon stakeholder branding requirements, adding bright color pops to call attention to important information and alerts. Color styling was also applied to a new library of icons.

Components

Our component library contained the basic elements needed to build essential screens.

We wanted to provide developers with card details, button states, and differences between tablet and desktop elements.

Create

Screens from the prototype

Validate

After building out the wireframes and clickable prototype, we presented our work to stakeholders.

Feedback

While stakeholders were pleased with the overall design, they had several points that needed to be iterated upon. These included:

  • Removing several features displayed in the wireframes for future iterations
  • Adding screens in the prototype to show an edit vehicle and driver option
  • Adding screens to show the functionality of dropdowns
  • Adding an alerts section

These changes were incorporated into the design with regular communication and approval from stakeholders.

Ultimately, stakeholders were very happy with the design and the prototype of the important functions of the app.

Get in Touch

Learn how Standard Beagle can help you turn your customers into raving fans.
Schedule a short conversation to talk about how Standard Beagle can be your guide.