Web App Redesign

Web App Redesign

Runaway Bride

Runaway Bride

Wedding transportation

2022

Wedding transportation

2022

Freelance

Runaway Bride is a car rental app for weddings and special ceremonies. The project delivered was built to meet the needs of brides and grooms who are organizing their wedding day.

The web application allows users to find the perfect car and set up a ride for transportation to the event.

Process highlights

Process highlights

User

+1k people who rented car for weddings and special ceremonies.

Problem

Problem

Long flows with a lot with information required before payment.

Goals

Increase conversion rates and reduce contact rate on WhatsApp.

  1. Product exploration

  1. Product exploration

The discovery for the mobile first redesign started by exploring the product in its current state. I gained a comprehensive understanding of the product by capturing screenshots of both its mobile and web versions. Then, I analyzed the flow of the product, mapping any pain points related to usability and questions sent by users via WhatsApp.

Screenshots of previous web and mobile versions.

  1. Benchmark

  1. Benchmark

An audit was conduced comparing the current product with five different products, evaluating seven key points of interaction: Home page, Menu, Search functionality, Address search, Date-time picker, Results display, and Payment process.

Benchmark screenshots and analyzed apps logos.

  1. User flow

  1. User flow

A new user flow was proposed, addressing the usability issues and benchmark insights, improving upon the previous flow.

Detailed mobile user flow

  1. Wireframe

  1. Wireframe

A wireframe was used to align client expectations before any visual design. It was emphasized that there could be potential changes throughout the iteration process.

Mobile wireframe accepted by the client

  1. Medium-fidelity prototype for mobile

  1. Medium-fidelity prototype for mobile

A medium-fidelity prototype was designed to explore visuals and test component structure affordance with users before finalizing high-quality visuals. The approach prioritizes mobile-first design principles. I also developed a style guide and mobile components, based on Runaway Bride's brand identity and Material design 3.

Explorations for medium-fidelity prototype and design token definitions - colors, spacing and text styles.

  1. Figma hand off 

  1. Figma hand off 

The Figma hand off was delivered along with documentation including interaction details, web responsiveness guidelines, and specific component specifications.

  1. Hight-fidelity prototype for Web and mobile

  1. Hight-fidelity prototype for Web and mobile

Address search in the car search flow.

Available cars from search results.

Credit card addition in the payment flow.

© 2024 Gabriel Branco