Adventure Ride heading

The "Adventure Ride" App

The Adventure Ride app UI design by Agrizha Puspita Sari

The Project

Adventure Ride is a mobile application that I designed as a portion of my UX Experience for my portfolio. As a UI/UX designer, I created this project from inception to completion using research, ideation, and UX design concepts.

Duration: 3 months.

Methods

  • surveys
  • interviews
  • card sorting
  • affinity mapping
  • preference tests
  • Usability Heuristics test
  • wireframes
  • prototyping

Tools

  • Diagram.Net
  • Adobe XD
  • Balsamiq
  • Figma

The Context

According to my research, one in every four Americans has a disability. Not everyone with a disability can explore and find tranquility in nature. And not everyone with a disability can use a mobile app to assist them to run errands. This app was created specifically for persons with disabilities.

Navigating a mobile application, on the other hand, might be intimidating and overwhelming. This app is designed to aid them in locating the most convenient way to seek assistance when preparing to go and explore nature on their own. This program is intended to provide them with the 24/7 care and help they require based on their medical records. Anyone can travel without having to worry about anything.

The Steps

Research – Define – Ideate – Prototype – Iterate

Design thinking diagram

Research

Competitive Analysis

I studied three prominent ride-hailing apps—Uber, Lyft, and Grab—to understand the market. None offers enough information for riders with disabilities, making weekend getaways difficult.

Surveys

I surveyed people with disabilities about navigation challenges. Many found layouts confusing, so screen readers became a core feature.

Interviews

At OSU I interviewed students registered with Disability Access Services about traveling alone by taxi or ride-share and the help they need.

A family member with epilepsy inspired the design. Technology should remove barriers for people with disabilities.

Both surveys and interviews conducted have helped gain better research and analysis.

Define

Problem Statement

In this instance, all passengers with disabilities require a way to find an easily understandable and reliable service that can provide them with a long but safe ride, as well as understand their needs and constraints, because they need to make informed and safe decisions about their travel plans for the day.

User Personas

Using the Design Thinking process, I developed user personas based on people I met who had similar needs. I also considered their emotions when determining their personalities. They discussed their experiences and daily challenges, particularly when it comes to travel.

As a college magazine journalist. I frequently interviewed persons I thought would be great for my story. As part of my job, when it comes to interviewing sources and conducting analyses, I always make sure that I understand their true emotions by putting myself in their shoes and "seeing" things through his/her eyes when they contribute to my story articles or projects. I always value their input and appreciate their time. The veracity of the information I acquire is critical to comprehending User Interaction.

Zoom in to read each profile!

User persona 1 User persona 2 User persona 3

I returned to these user personas frequently to remind myself of my users' requirements and problems, and to keep a user-centric focus throughout the project.

Mental Models

I constructed a mental model for each user persona using all of the research I gathered to comprehend how the user would interact with the app and to deliver a highly intuitive user experience.

Using Jakob's Law, which asserts that because users spend the majority of their time on other sites, they anticipate a site to function similarly to other sites they've visited. I could then draw each user's perspective on the design.

Zoom in to read each Mental Model!

Mental model 1 Mental model 2 Mental model 3

Site Map

With these basic characteristics in mind, I ran a card sort to get a sense of how consumers may anticipate the content to be organized and displayed and then utilized the results to develop a sitemap.

Site map diagram

Ideate

Low Fidelity Wireframes

Because one of the main goals of 'Adventure Ride' is simplicity and ease of use, the number of screens was kept to a minimum and I wanted to focus on displaying the key functions. I usually began with pen drawing on paper. Still, in this case, I use Balsamiq to develop numerous iterations of each screen until I discovered a combination of features and aspects that I thought would match the users' demands and be as intuitive as feasible.

Then, in Balsamiq, I created the mid-fidelity versions of these wireframes, a clickable prototype, and had one person who has disabilities test them out.

Wireframes
Mockup design 1 Mockup design 2 Mockup design 3

Test

Usability Testing

I was able to refine what users found beneficial and entirely change what they didn't like by running usability studies. The users were required to complete a few scenario-based tasks that tested the app's primary capabilities, and I also asked them about their feelings about the app overall. The findings of the usability tests were documented and analyzed using a spreadsheet and an affinity map.

Key Findings

Positive Findings

  • Users were able to perform tasks promptly.
  • Users have praised the concept of providing a function for requesting accommodations for various disabilities and needs.
  • Users found the navigation to be very easy to understand.

Negative Findings

  • Users were perplexed by the 24-hour customer service, which was not yet available.
  • Users have some difficulty locating information.
  • Users reported that the text and icons were difficult to read.

Iterate

I made improvements based on user feedback and then I browsed on the internet how most developers design their great and interesting apps that are now available in the market. I developed a higher-fidelity version of the app with more white space, larger icons, and clearer typography.

To guarantee uniformity throughout the app, I used the Gestalt Principles, grids, and color theory in my design.

Final Product

After numerous tests and modifications, my final product met all of the goals I set for it, including the three core features necessary, which are the Screen Reader, the "Upload Your Medical Documents" option, and the "Change/Cancel My Trip" option for users to book a trip conveniently and safely, while also seeming visually appealing and simple to use.

Search results listing categories like national parks and Grand Canyon National Park Confirmed trip to Grand Canyon with requested accessibility accommodations and change or cancel option Set your trip screen with destination, pickup, accommodation request, and medical document upload Leave a review page with tipping choices and feedback field Home screen inviting users to explore nature with search bar and explore button Adventure Ride splash screen displaying the app logo

View the final interactive prototype on Figma

Revisions to the final design

I revised the 'Leave A Review' design to have more vibrant and fun looks, where users can add complimentary by choosing which icons they think better describe the driver's overall service and behavior.

UI Element

With the tip suggestion ranging from 20% to 35% demonstrated in percentage charts gives much more clarity on how much tipping is appropriate.

Tip UI element

I added a 'Wishlists' page to the design because listing the future destinations in a wishlist is very necessary for this type of ride services app.

Feel free to contact me for any feedback and to collaborate!

← Back to home