RideTogether: Enhancing Urban Mobility An initiative blending technology and community to reshape urban cycling culture. We defined the initial problem space through secondary research (literature review, anecdotes, forums) and collated information via an Affinity Diagram to then define the overall objectives of RideTogether

Potential Problem Spaces:

Aims:

Defining Problem Space

Flowchart with five pink and purple text boxes listing features of a cycling app, including user-friendly interface, real-time safety updates, cyclist networks, and maintenance services.
Four light green chat bubbles with black text discussing app features: increasing app downloads, introducing cycling goal-setting features, tracking carbon footprint savings, and promoting monthly cycling events.

RideTogether: Enhancing Urban Mobility An initiative blending technology and community to reshape urban cycling culture. We defined the initial problem space through secondary research (literature review, anecdotes, forums) and collated information via an Affinity Diagram to then define the overall objectives of RideTogether

User Research — Affinity Map

A detailed mind map focusing on various aspects of cycling community development. It includes sections on goals, needs, enhancements, safety, connectivity, partnerships, and services for cyclists, with color-coded nodes indicating specific topics such as safety updates, supportive cyclist networks, bike maintenance services, and community engagement.

The project team was partitioned into two synergistic work-streams. My involvement was within the Design contingent, responsible for the architectural conceptualization of the application, which encompassed the creation of system designs, the development of wireframe prototypes, and the execution of user experience testing. Concurrently, the Research division was engaged in rigorous investigative endeavors to yield a suite of design deliverables and to contribute substantive guidance for the design process.

Flowchart of the design thinking process displaying brainstorming, research workstream, user persona development, theory review, design workstream, prototyping, heuristic evaluation, and user testing.

User Research — Theme Discovery

Mobile App

User Research — Personas & Scenarios

The Research Team conducted further secondary research on the goals, motivations, and needs for the potential project. Codes and themes were emerged from research findings via Affinity Mapping.

A colorful mind map diagram titled 'Project Themes' with various interconnected branches and text boxes detailing project goals, needs, motivations, and features related to cycling, safety, community engagement, environmental impact, and technology integration.
A profile overview of Alexa T, including a smiling headshot on the left and details on the right. The profile highlights her as an analytical, tech-savvy, detail-oriented, and efficiency-driven software developer and cycling enthusiast, age 29, single, with a focus on integrating cycling apps and gadgets, with goals to develop a unified cycling platform and streamline routines.

The Persuasive System Design (PSD) Model is a framework developed to guide the design and evaluation of persuasive systems. These are interactive computing systems created for changing users' attitudes or behaviors without using coercion or deception. The model shows how to systematically approach the design of a system that aims to persuade users effectively.

A table with four columns listing different types of psychological supports and qualities. The columns are labeled 'Primary Task Support,' 'Dialogue Support,' 'Social Support,' and 'System Credibility Support.' Each column contains a list of terms, such as 'Self-Monitoring,' 'Rewards,' 'Social Comparison,' 'Trustworthiness,' and others.

In investigating the barriers to cycling adoption, we deployed a questionnaire informed by literature, gathering 18 responses indicative of the key challenges: inadequate bike lanes, unsafe routes, and problematic motorist behavior. Further exploration through semi-structured interviews with four participants, followed by rigorous data coding and affinity mapping in Figma, revealed two primary obstacles: safety concerns and a deficient cycling culture. These insights directly informed our user requirements, shaping design features to enhance safety without distracting cyclists and to cultivate a positive cycling culture through non-confrontational, community-oriented campaign strategies.

  1. Safety-Enhancing Features: Integrate technology that enhances cyclist safety without requiring significant attention, allowing cyclists to focus on the road.

  2. Ease of Use: Ensure that the system and device interactions are straightforward and memorable, even when in motion.

  3. Long-Term Engagement: Design devices and features with longevity in mind to support sustained use over time.

  4. Community Engagement: Develop campaign elements that captivate and engage passersby, promoting community participation in cycling activities.

  5. Motivational Incentives: Create incentives within the app to encourage and motivate both cyclists and non-cyclists to take action and participate.

  6. Non-Confrontational Messaging: Craft campaigns and messages that avoid antagonizing motorists, aiming for a harmonious shared road space.

  7. Scalability: Design the campaign to be scalable, ensuring it can expand and adapt to different community sizes and structures.

Prototyping & Storyboards

Over here, we delve into the visual planning of RideTogether's UX. This includes storyboards that narrate user interactions, wireframes outlining the app's structure, and mockups that bring the community board and hologram device to life, laying the foundation for intuitive design and user engagement.

We began by crafting low-fidelity wireframes for an interactive community board, guided by initial storyboards and research. We tested our design with a life-size mockup and a Wizard-of-Oz experiment, observing user interactions to refine the interface for ease of use and encourage app downloads.Storyboarding some of the main interactions that could occur between the user and the app, the user and the interactive community board, and passersby and the hologram was an important part of understanding how our product innovated.

A storyboard with six sketches illustrating a community event app development process. The first sketch shows three people looking at a display about a cycling event. The second shows screens with signs up for a community activity through QR codes. The third depicts a person scanning a QR code on a large display. The fourth illustrates a sign-up process via app, with a progress bar. The fifth shows creating a profile on the app, and the sixth reports a successful profile creation and device setup for fitness training.

Progressing with the hologram device design, we moved from initial sketches to two main concepts: a traditional 2D design and an immersive 3D version. These concepts were brought to life using Blender, with the aim of balancing informativeness and visual appeal. We sought user feedback through interviews, focusing on message clarity, legibility, and the importance of competition. Participants' preferences, especially for distinct borough representations, were instrumental in the design refinement.

Lo-Fi Wireframes

The objective of creating Lo-Fi wireframes is to establish the basic layout and functionality of the RideTogether app without focusing too much on visual details. This phase emphasizes structure and user flow, ensuring all necessary components are included and correctly positioned.

Four smartphone screens displaying an app interface for RideTOGETHER, showing login, registration, app introduction, and menu screens.
A screenshot of a questionnaire or interview guide about environmental messaging, display methods, and colors in graphics, including questions about sustainability, teamwork, graphic types, and color meanings.
Two people looking at a large sheet of paper with handwritten notes taped to a wooden wall.
Two 3D modeled trees, one with pink flowers and a dark trunk, the other with purple flowers and a lighter trunk, on green grassy bases.
Four sketches of mobile app screens, including Hologram Settings, Preset Messages, Challenges, and Community pages.

Hi-Fi Wireframes

In the Hi-Fi wireframe stage, we translated our validated concepts into detailed visual designs. The focus was on incorporating brand identity, intuitive navigation, and engaging elements. User feedback guided iterative refinements, ensuring the app was both visually appealing and highly functional, promoting regular cycling and community engagement through a seamless digital experience.

To explore the detailed designs and prototypes of the RideTogether project, you can access the Figma files and interactive prototypes using the links below:

RideTogether Mobile App:

  • Figma Design Link: https://www.figma.com/design/kccxqb2MRNZaonH6fbqPa0/Ridetogether-Apps?node-id=0-1&t=oADblgvJXUO6mDgU-1

  • Figma Prototype Link: https://www.figma.com/proto/kccxqb2MRNZaonH6fbqPa0/Ridetogether-Apps?node-id=0-1&t=oADblgvJXUO6mDgU-1

RideTogether Community Board Wireframes:

  • Figma Design Link: https://www.figma.com/design/kccxqb2MRNZaonH6fbqPa0/Ridetogether-Apps?node-id=72-14&t=oADblgvJXUO6mDgU-1

RideTogether Website:

  • Figma Design Link: https://www.figma.com/design/kccxqb2MRNZaonH6fbqPa0/Ridetogether-Apps?node-id=96-2372&t=oADblgvJXUO6mDgU-1

  • Figma Prototype Link: https://www.figma.com/proto/kccxqb2MRNZaonH6fbqPa0/Ridetogether-Apps?node-id=96-2372&t=oADblgvJXUO6mDgU-1

Line drawing of four smartphone screens displaying a mobile app interface, including leaderboards, event logs, settings, and profile editing screens.
A flowchart illustrating environmental conservation steps: recycling waste, biking, planting trees, and creating small environmental models.
Four smartphone screens displaying app interfaces for user profiles and community features, including challenge tracking, messaging, and team management.

2 Personas that represent the target user group of RideTogether were developed on the finalised themes and codes.

Profile page for Mason L., an environmentally conscious individual with a smiling portrait on the left and a biography, personality traits, demographics, pain points, goals, motivations, and influence statements on the right in a professional layout.

User Requirements

Ride Together

Three mobile phone screens showing an eco-friendly cycling app with messages about saving the planet, tracking carbon footprint, and recent cycling activity, with colorful illustrations of trees, a globe, and a bicycle.

Project Overview:
The RideTogether campaign was a UCL group project that aimed at increasing cycling engagement across various boroughs in London. It utilises hologram projection devices, interactive leaderboards, and a mobile app to foster a competitive yet united community spirit.

Duration:
8 Weeks

My Role:
UX/PRODUCT Design
User Testing
Product Evaluation

Summary:
Creating an engaging app to incentivize cycling, fostering community spirit, and promoting environmental sustainability through technology.

User Testing

A bicycle with a green 3D polygonal apple-shaped object attached to it, surrounded by 3D trees and a circular text in blue that says 'I <3 40 TREES', on a flat surface against a blue sky background.
A man wearing a gray hoodie and a virtual reality headset using handheld controllers.

Our usability testing phase was integral in refining RideTogether's app and hologram interface. Engaging with five participants, we employed high-fidelity mockups and VR simulations to validate the functionality and user experience. This iterative process, including hands-on tasks and in-depth interviews, confirmed our design's intuitiveness and appeal, propelling us towards a user-centered final product. The testing outcomes, illustrated in the pictures below, were pivotal in finalizing the engaging features of our campaign element

City street scene with a red car parked along the side of the road, two bicycles, and a building with large windows and trees in the background.

Outcomes and Takeaways

Although this project was hypothetical, it provided valuable insights into the design process and user-centered methodologies. The Lo-Fi and Hi-Fi wireframe stages highlighted the importance of iterative testing and user feedback in refining design solutions.

Key Outcomes:

  • Enhanced User Clarity: Removal of confusing elements improved overall user satisfaction.

  • Engaging Visuals: High-fidelity designs aligned with brand identity and promoted user engagement.

  • Community Impact: Conceptualization showed potential for significant community building through cycling.

Takeaways:

  • Iterative Design: Continuous testing and feedback loops are crucial for effective UX design.

  • User-Centered Focus: Direct user input is essential in identifying and addressing pain points.

  • Scalable Solutions: Designing with scalability in mind ensures future adaptability and growth.

This project underscored the value of detailed planning and user engagement in creating impactful UX solutions.

Laptop screen displaying a website about a cycling community campaign called 'Ride Together' in London, with illustrations of people biking and green foliage.