Redesigning an App in 3 days — The Roadsurfer App
My Role —
UX/ UI Designer, User, Researcher
Starting Point
Roadsurfer is a company offering the possibility to rent a high quality and highly equipped van for your road trips. I used it during a summer on a Roadtrip in Spain with my sister, and I had several ideas to redesign it, implementing changes in its functionality and proposing a complete rebranding of the App.
Scope —
UX Research
Visual Design
Branding
Interaction Design
Prototyping
Summary of the Project
The Challenge
Specifications
& tools
The Process
The App before redesign & Defining
Ideation to Wireframes
Brand re-design
Design Critique
The Solution
Hi Fi mockups
Prototyping
Next steps
Project Next Steps
Warm Thank You
The Challenge
Specifications
3 days
Target device — Mobile App
Redesigning 3 to 7 screens
No use of UI kits
Presentation of the design during a 15-minute Design Critique to receive feedback along the process
Tool — Figma
Deliverables — Moodboard, Style tile, Style Guide, HI FI, Prototyping, Micro-interactions
The Process
The App before redesign & Defining
Through my Heuristics Evaluation with the 10 Nielsen’s Design Principles, I noted several points:
Impossible to change the App’s language, help through the chat was inefficient
The Homepage’s Information Architecture was overwhelming with no clear presentation, and mostly long inspirational carousels of images
In the Bookings page, it was confusing how the future bookings were differentiated from the past ones
The purpose of the App: Bookings for your night stays, blended with a lot of inspirational cards which feels contradictory to the use when you are already on the road
Lack of guidance for Van Life when it is an App destined for Amateur road trippers
Furthermore, the photos being taken by the hosts, they did not provide the same quality effect as the professional lifestyle photos of Van Life the App provided in quantity on its Homepage, which created high discrepancies in visual experience throughout the app.
Competitive Analysis
As I wanted to bring a practical Van Life function to the App to answer its user needs, I went to Van life Apps such as Campedium, IOverlander, Campernight, Par4Night.
Grows & glows about Competitor Apps —
A Map to find your spots
Straigth-forward Van Life information
Interesting metrics like Rating of Security, traveling as a woman alone, the greeting/ welcome, medical assistance, amenities available at the Spot and more
Key Insight —
Implement easy access to key Van Life Guidance & information so the user doesn’t need to download different Apps when on the road.
The Process
Ideation to Wireframes
Brainstorming buttons, main topics of Van Life guidance, navigation tabs
Low Fidelity Wireframing the 4 Main Screens of the Mobile App
Implementation of a consistent header throughout the App
Homepage — Complete removal of the inspirational carousels, replaced by Van Life Guidance & the navigation categories
Bookings — Clear separation of Past & Future Bookings
Profile — Did not change a lot in this stage yet it evolved from LO-FI to HI-FI
The Process
Brand redesign
Brand Attributes —
Style Tile —
Prepared prior to the High Fidelity Wireframe, translating the Branding to the UI.
Warm, Youthful, Beachy, Sunset tones, 70s Graphic Design, Hand drawn illustrations
Additional inspiration from other App designs —
Components & icons —
The library to the UI design on the High Fidelity Wireframe.
Final mockups & Prototype
Navigating through the screens from Login to the Profile page.
Next steps
Project Next steps
If I was to continue building my version of the RoadSurfer App, I would work on adding the possibility to change languages (one of my big user blockers), with English in priority. I would also continue building each page, in its own rustic way of straight-forward and clear access to information and help, smoothed with its beachy sunset colours and surfing icons ☀.
Warm thank you
Thank you so much for your attention, I loved working on this project and I hope you enjoyed discovering about it!