This Android app is designed from scratch, using the website form as a starting point. User research and testing, visual research, and applying UI/UX best practices. I've developed a human-centered design prototype to demonstrate a better user experience on a mobile app.

Project details

Institution: MacEwan University
Role: UI/UX Designer
Platform: Android
Year: 2022
Software Used: Adobe XD, Adobe Photoshop, Adobe Illustrator, Lucidchart, Balsamiq, and Camtasia
Institution: MacEwan University
Role: UI/UX Designer
Platform: Android
Year: 2022
Software Used: Adobe XD, Adobe Photoshop, Adobe Illustrator, and Camtasia

APP FEATURES

Camping and Reservation

Select your destination and link directly to the reservation service.

Campgrounds Near Me feature

Display locations from closest to furthest from your current position.

Add to Wishlist

Allows users to save campsite locations and save them in their user account for future reference.

Interactive Map

Site location with information images and ratings.

Camping and Reservation

Select your destination and link directly to the reservation service.

Campgrounds Near Me feature

Display locations from closest to furthest from your current position.

Add to Wishlist

Allows users to save campsite locations and save them in their user account for future reference.

Interactive Map

Site location with information images and ratings.

Camping and Reservation

Select your destination and link directly to the reservation service.

Campgrounds Near Me feature

Display locations from closest to furthest from your current position.

Add to Wishlist

Allows users to save campsite locations and save them in their user account for future reference.

Interactive Map

Site location with information images and ratings.

Problem

  • No App

  • Confusing navigation

  • Visually not appealing

  • Information is hard to digest

  • No App

  • Confusing navigation

  • Visually not appealing

  • Information is hard to digest

Form Analysis

DESIGN PROCESS

Visual Strategy

Research phase

UI Flow
App entry point
Search locations of campsite nearby
Looks at options for locations sites available and enter dates
Review selected site location and other informations
Enter booking reservation details
Review booking details and make payment
Confirmation of booking
Download the app
Swipe cards with photo, location, and reviews that can be clicked to select
A scrollable grid section with photos and information that can be clicked to select it

Calendar or date picket control (booking dates pattern)
Scrollable list of site photo, details,  price per night and campground map"

Book Now” button is shown that is clickable
Enters check-out page and shows reservation details for input of data required"

Proceed to Check-Out” button is shown that is clickable
Scroll input details

Clickable "Confirm & Pay”button
Scroll summary  data and shows clickable "Download receipt” button
UI Flow
App entry point
Search locations of campsite nearby
Looks at options for locations sites available and enter dates
Review selected site location and other informations
Enter booking reservation details
Review booking details and make payment
Confirmation of booking
Download the app
Swipe cards with photo, location, and reviews that can be clicked to select
A scrollable grid section with photos and information that can be clicked to select it

Calendar or date picket control (booking dates pattern)
Scrollable list of site photo, details,  price per night and campground map"

Book Now” button is shown that is clickable
Enters check-out page and shows reservation details for input of data required"

Proceed to Check-Out” button is shown that is clickable
Scroll input details

Clickable "Confirm & Pay”button
Scroll summary  data and shows clickable "Download receipt” button

MOCKUP

Low-Fidelity Wireframe (Rough Sketch)

High-Fidelity Prototype

High-Fidelity Prototype

High-Fidelity Prototype

High-Fidelity Prototype

output

Appendix

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.

Components are interactive building blocks for creating a user interface. They can be organized into five categories based on their purpose: Action, containment, navigation, selection, and text input.

Following these well-established — but frequently ignored — UX design guidelines to ensure users can successfully complete your website forms.

Someone who uses your app or website has a particular goal. Often, the one thing standing between the user and their goal is a form.

Interested?

Get in touch

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.