Ride Amigos
Identity, Design System & User Interface

Project Type
Mobile & Desktop App

Client
RideAmigos

Agency
Parkside Interactive GmbH

Role
Art Direction, UI Design Lead, UX

Year
2018

Recognition
Fast Company Design Awards 2019 / Honorable Mention — UX, Mobility categories.
Constantinus Prize 2022 / International Projects — 2nd Place.

RideAmigos is a US-based commuter engagement hub, used by businesses and communities to help commuters overcome parking, traffic and pollution issues.

Approach

Our team was assigned the monumental task of revamping the user experience, enhancing the design elements, and optimizing the app's architecture. The project was segmented into three main components: the Commute Tracker app, the user dashboard, and the website. Each segment presented its own set of distinct challenges.

Our preliminary steps involved an exhaustive review of the UX and design aspects across the entire ecosystem. We started by meticulously mapping out user flows for all critical interactions within the mobile app. This encompassed the onboarding process, the addition and deletion of commutes, and user participation in various challenges.

After establishing these user flows, we transitioned to wireframes that represented the skeletal structure of the app's interface. These wireframes served as the blueprint for our design, laying out the arrangement of elements on the screen and providing a visual guide for the development team.

Subsequently, we escalated to the prototype stage. Prototypes allowed us to experiment with interaction design in a simulated yet close-to-real environment. These interactive models served as a practical testbed for assessing the flow, layout, and overall usability of the app. Through a series of usability tests, A/B tests, and feedback loops, we ensured that all interactions were intuitive and met user expectations. This iterative process was crucial for identifying any usability hiccups or bottlenecks that needed to be refined before moving on to the development phase. By the end of this stage, we had not only refined our initial wireframes and prototypes but also established a solid foundation for the subsequent phases of design and development.

Moving on to the next phase of our project, we embarked on the creation of a comprehensive design system that would be adaptable and cohesive across both mobile and desktop platforms. This was a crucial step in ensuring a consistent and seamless user experience throughout the entire digital ecosystem.

To optimize the app development process and achieve cross-platform uniformity, we adopted the principles of Atomic Design. This methodical approach allowed us to break down complex UI elements into basic 'atoms,' such as buttons and text fields, which were then assembled into more complex 'molecules' and 'organisms.' By creating a library of these reusable components, we significantly accelerated the development timeline, reduced potential errors, and ensured a consistent, scalable design that was easily adaptable across both mobile and desktop platforms.

To establish a distinct identity for the RideAmigos platform, as well as the brand as a whole, we devised a theme centered around 'utopian environmentalism.' This concept served as a focal point that crystallized the RideAmigos vision. Gradually, we incorporated a series of custom illustrations, imbuing the platform with its own visual lexicon and enhancing its unique allure.