STREETEAGLE
Providing the next generation of GPS tracking, monitoring, and protection for your vehicle. With real-time GPS tracking, automatic location updates, vehicle history mapping and reports, vehicle monitoring alerts, and vehicle control from any connected device, StreetEagle helps you stay connected 24/7.
MY ROLE
• Personas
• Userflows
• Design Audit
• Wireframing
MY ROLE
• Prototyping
• UI Design
• Visual Design
THE CHALLENGE
StreetEagle Advanced GPS Tracking hosts the latest technology for vehicle monitoring, protection, and control from any PC, tablet, or smartphone. Creating an easy to navigate, user centric product was the highest of priority.
THE PROCESS
Research & Stakeholder Interviews
I looked for inspiration and researched existing solutions. There were a plethora of GPS tracking apps, but none that could be a 1 to 1 comparison with StreetEagle’s needed features. After diving into the current market solutions I scheduled interviews with customers, product managers, and key members of the marketing team to decided out how key features would be used.
Personas
From the research gathered by the client and Product Manager, I have nailed down numerous personas for the StreetEagle product. Below is one of the key personas for StreetEagle, the delivery fleet driver. The product needs to be simple, easy to use and clear for these hard working individuals.
Userflows
I started out brainstorming with sticky notes to make sure I listed out every interaction. After I had a stack of possible paths, I chose a direction that best solved the problem at hand and start wireframing out product flows. Making sure we display the right information, and all the relevant features are easy to access for the user.
Ideation & Wireframes
I then moved to loose sketches in my notebook, creating them in pretty quick succession. Next I started testing low fidelity prototype’s with stakeholders and users. It’s very important to test presumptions before investing in a high-fidelity prototype.
Prototyping
Refinement of the wireframes leads to the stylized prototype. I reorganized the information and used wireframes to review and gain alignment with the management and product teams. I wanted to do some quick digital sketching on how the main tablet that would be used would roughly house all the needed GPS information. After a couple of different explorations, I can up the general mockup below highlighting the use of space on the screen. I also wanted to quickly get into how I could create different component and how those interacted with the GPS map below.
High Fidelity Designs
Sticking with the bold red and toned back blues of the brand, the product experience was a delight for users. Simple, intuitive flows and the ability to easily navigate through every screen gave users the exact workflow that they were searching for. Clear menu choices and icons were used to accentuate a delightful user interface. A split-screen approach was also used so that users could see the written direction as well as the native map.
Visual Design & Style Guide
Updating the brand to be more simple and clean was needed for StreetEagle. To accompany the fresh app design, they needed to be consistent so a comprehensive style guide was included with the initial launch. This included fonts, icons, button styles, hovers, and even spacing arrangements. Using the Google Materials style guide as a base really helped cut down design time and usability concerns.
RESULTS
An improved and innovative app experience for fleet drivers and their managers
I wanted to design an experience that scaled the value of the tool for fleet vehicles with multiple different features built-in. Location tracking, best route calculation, and previous stops were all information that needed to be accounted for. The design I created allowed for a smooth transition from screen to screen and made sure to not overwhelm the user.