Tag and Track

UX / UI design for a mobile and web apps (Vodafone Business)
Category:
Mobile App (iOs/Android)
Web App
Technologies used:
Sketch, Zepelin, Invision,
My Contribution:
UX design, Wireframes, User Flows
UI design, Interactive Protorype

Problem Statement

Business owners and managers require seamless and reliable tools to track their commercial vehicles and ensure the safety and efficiency of their operations. While existing GPS tracking solutions provide functional tracking capabilities, they often fail to meet the specific needs of businesses, such as intuitive multi-user management, streamlined setup processes, and robust safety features like geofencing (safe zones). Additionally, many current platforms present challenges in onboarding and user-friendliness, making it difficult for businesses to adopt and effectively utilise these systems.

This project aimed to design a user-friendly tracking application tailored to business users, featuring a streamlined sign-up process with two-factor authentication (2FA), tracker setup and management, geofencing (safe zones), real-time notifications, historical location tracking, multi-user account management, and comprehensive support tools. The app was designed for mobile (iOS and Android) and web platforms to provide maximum accessibility and efficiency.

The app’s design process was informed by a user-centered approach, complemented by close collaboration with external technology providers to ensure proper implementation of the required GPS and tracking technologies. The research and collaboration process included:

  • Collaborative Design Workshops: Workshops with stakeholders, business owners, and internal team members to co-design user workflows, such as tracker setup, safe zone creation, and multi-user account management. These workshops ensured the app’s features aligned with the users' business priorities and expectations.

  • Peer Reviews: Worked alongside colleagues and industry peers to gather feedback on proposed workflows and features. These reviews highlighted the importance of clear onboarding flows, intuitive geofencing tools, and efficient user and tracker management, refining the design to better suit business use cases.

  • Collaboration with External Technology Providers: Worked closely with external GPS and IoT technology providers to collect and incorporate technical requirements into the app design. This collaboration ensured the technical feasibility of features such as real-time location tracking, geofencing, and historical tracking.

  • Interactive Prototyping & Testing: Developed interactive prototypes simulating core user journeys, such as signing up with 2FA, adding trackers, managing safe zones, viewing trackers on maps, and handling account settings. These prototypes were iteratively tested, and feedback informed refinements in the app's usability and functionality.

By combining insights from stakeholders, peers, and technology providers, the design process ensured the app met both user expectations and technical requirements, resulting in a streamlined, reliable, and intuitive solution for business tracking needs.

Research

User Journeys

User journey maps were created to outline the app's overall structure and core workflows, providing a clear visual representation of the user experience. Detailed iterative maps were also developed for more complex processes, such as tracker setup and safe zone management, ensuring every step was intuitive and aligned with user needs. These maps were refined through collaboration and feedback, forming a critical foundation for the app's design and functionality.

Wireframes

High-level wireframes were developed to outline key user flows, ensuring a clear and logical structure. These wireframes served as a foundation for collaboration and refinement during design workshops and prototyping, aligning functionality with user needs and technical feasibility.

Solution

The solution focused on creating a seamless and intuitive user experience for business users tracking their commercial vehicles. I worked on the entire user interface (UI) for both mobile (iOS and Android) and web platforms, delivering screens tailored to each device type while adhering to Vodafone Business's brand guidelines.

The UI included a comprehensive range of sections, each designed with both functionality and ease of use in mind:

  • Account Creation: Streamlined sign-up flow with two-factor authentication (2FA) to ensure secure and smooth user onboarding.

  • Tracker Setup: Simplified process for adding and configuring devices, enabling users to quickly start tracking their vehicles.

  • Zone Management: Easy-to-use interface for creating, managing, and customizing safe zones to monitor vehicle movement within designated areas.

  • Notification Settings: A flexible notifications section where users can set alerts for various events, such as entering/exiting a zone or device status changes.

  • Account Management: Comprehensive account management tools for users to update their profiles, manage permissions, and add or remove devices and users.

  • Help and Support: A user-friendly support section providing FAQs, troubleshooting guides, and direct access to customer service.

  • Tracker History: A clear, organized display of each tracker’s historical data, including location history and movements over time.

  • Add Device/Tracker: A straightforward flow for adding and managing individual devices, with custom screens to suit each device type on both mobile and web platforms.

Each section was tailored to provide the most relevant features for business users while ensuring a cohesive and intuitive user interface across all platforms.

Web App Interface

Lessons Learned

One key lesson learned was the importance of balancing simplicity and functionality.

While the app needed to offer robust features like multi-device management, geofencing, and real-time tracking, it was crucial to keep the user interface intuitive and straightforward. Iterative testing and feedback from stakeholders helped fine-tune features and streamline complex processes. Additionally, collaborating closely with technology providers highlighted the need for careful consideration of technical constraints and real-time data handling, ensuring a seamless integration between the app and the GPS tracking systems.

Results and Impact

The app addressed the needs of business users by providing a reliable, easy-to-use solution for vehicle tracking and fleet management. The consistent use of Vodafone Business's branding reinforced the company’s image and credibility in the business sector.

The project also showcased the value of a collaborative design process, where user feedback, iterative prototyping, and stakeholder involvement led to a refined and impactful final product.