Mobile Application Design


Away is a day trip planning application, centered on planning around one main location. The goal is to help users quickly find and filter nearby locations and staying safe during COVID-19.

Geared towards various types of users, yet all achieving the same intent of allowing users to spend less time searching for recommendations and spend more time enjoying their trip. One mean of using this application can be achieved through GPS, as it can obtain the user’s current location and suggest additional locations that suit their interests and time needs. Planning ahead of time is also simple with A-way as travellers would enter a starting point, browse, and add their activities, and hit save.

In comparison to other trip planning application, this minimalist interface is intuitive to use, and never intends to overload the user with buttons, options, or information. A-way curates ten nearby recommendations based on the user’s search input, or GPS location, hence reducing the overwhelming options. In addition, finding reviews, store hours, and images are all gathered in one place, they are available just by tapping the “Details” button.

Project Details


Course Final Project


User Tester, Prototyper/Coder

Tools & Skills

Prototyping (Framer & Figma), User Testing, Wireframing


AWAY Application GPS


AWAY Application COVID Map

COVID-19 Exposure Map

AWAY Application Directions Example


AWAY Application Popular Trips

Popular Trips

AWAY Application Saved Trips

Saved Trips

AWAY Application Dropdown Menu

Dropdown Menu

AWAY Application Settings Page

Application Settings (Light Mode)

The main features of A-way are the searching and filtering elements, as they help narrow down the search results for the user. Such filters include category, location, and time duration. As well, A-way provides users an easy way to view detailed information for each suggested location just with a click of a button..

Additional features include a toggle for dark and light mode, a switch to display COVID-19 exposed areas, and a customizable interface by toggling the popular trips on the landing page.

Design Decisions

For our key interactions, we focused on creating an efficient and intuitive interface by making our affordances more apparent for our users who are on-the-go.

Our user testing revealed that users needed feedback on their progress, as per the visibility of system status heuristic. So, we added a progress bar above the map to show their progress in creating a trip.

AWAY Application Directions

Consistent formatting across pages

AWAY Application Current Trip

Consistent formatting across pages (cont.)

We distinguished the styling for our buttons, input fields, and filtering options so users would not confuse the different interactions. As well, we increased the size of the interactive elements as per Fitt’s Law to enhance the speed and accuracy of tapping elements. We paired labels with icons so users can know what to expect from each interaction.

AWAY Application Dropdown Menu

Distinct interaction styles

AWAY Application Button with Label

Labels for buttons

Key Paths

When redesigning our key interaction path, we focused on keeping the interface clear by reducing the interaction options to the necessities and by implementing accurate feedback for the user’s actions. We made our different interaction options more distinct and maintained consistent page structures and formatting. From the user study, our users struggled with creating a trip, so we incorporated an onboarding process that appears when users launch the application for the first time.

AWAY Application Dropdown Menu AWAY Application COVID Hotspot Marker Map

Reduced interaction options per step.

AWAY Application Current Trip AWAY Application Directions

Added progress bar.


By reducing the interaction options and visual clutter of the interface, it made the affordances clearer and improved the user’s experience, which was evident in our final user test in comparison to our initial user test.

AWAY Application simple and clean main interaction page

Reduced interaction options

AWAY Application Onboarding Example

Onboarding process clarifies interactions

Visual Language

The visual language was strengthened and helped clarify the interface’s options, type, and colours, hence allowing us to focus on the visual language and impression we wanted the application to give.

Away Application Colour Pallet
The final colour pallet has reduced colours and less visual clutter


Microinteractions such as feedback modules and personalization features, allow users to enhance their experience and grow a deeper connection with the application.

AWAY Application Personalization Features

Implemented personalization features

AWAY Application Feeback Modules

Increased feedback for user actions

Final Thoughts

Throughout this application, we started with a good foundational concept of a day trip planner. However, through user research, user testing, and obtaining feedback from the teaching staff, we were able to grow and develop the concept to our final stage. With the user interface, that was also evolved from the preliminary stages, which is evident from our wireframes, visual language, and user flows. Prototyping with Framer was my team’s first time and coding was not our strong suit, but through learning on the spot we were able to achieve a final prototype that represents the learning and skills we’re grown in this course.