UX DESIGN

Adobe

App

Go Away

- Designing for Usability -

Location

Boston | MA, US

 

Brief

Create and test prototype the user interface and user experience for travel and booking mobile application from the ground up - looking at all stages of the project and user journey. Perform research and interviews for data analytics to inform the mobile app's direction and functionality.

 

Tools

Adobe XD, Adobe Photoshop & Adobe Illustrator, Market Research

Creating a travel app from scratch involved adhering to core principles of UX and UI design while following a structured process, including in-depth user research, crafting detailed personas and scenarios, and finally prototyping the app in Adobe XD (now discontinued).

 

In response to these challenges, Go Away seeks to develop a mobile travel app that serves as a comprehensive solution for travellers. The app aims to streamline the travel planning process, offering users a centralized platform to research destinations, book flights and accommodations, and organize their itineraries. By leveraging technology and industry expertise. The approach was informed by data analytics through the research interviews and market research to produce a clear streamlined booking application.

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen

...We always dream of the adventure -going to the places where miracles and the impossibles happen...

Personas &

Scenarios

The first stage was to conduct a series of research interviews for a travel app. I went with Expedia, Sky Scanner as well as Blackberry travel feeling that would provide a diverse range of applications styles and markets.

We then had to get three users to use the app performing the task of booking a flight and observe and note down any good and bad points. I found this useful in determining what I should include, leave out or try differently.

Mockup of the Go Away travel app, showcasing streamlined UX/UI design, user-friendly navigation, and travel itinerary features."

Production

Stage

The next stage was to look at creating wireframes for my app.   The assignment required some wireframes created by either hand or using an application. I was overly and sickeningly keen to I did both so I could get a better idea of the process on both sides of the fence.

 

My planning stages of the app went through multiple iterations and I came up with different though processes at each stage as I discovered more about how the app was shaped through each process and so the final app prototype differs greatly from the initial sketches and wireframes. This was largely due to learning more and more as I researched and practiced what works and what did not work.

 

From there I took the sketches and worked them up in Balsamiq where I could further experiment with the wireframe process and make changes and amends as I saw fit.

Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.

Testing

Stage

The app then needed to undergo testing so ascertain which features had worked and more importantly which features had not worked and which need to be worked on some more

This was done with the same previous testers and involved observing users going through the process of using the prototype.

Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b

From there the next step was to create a prototype using whatever application we desired. I opted to use XD which, at the time writing, is in beta so a little limited in what I could accomplish but I thought it would be useful to learn the application when it is in it’s infancy so I would be able to master what I could so subsequently I would be easily be able to add to my knowledge as the application matured.

Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

The footer evolved from a blue element to a off-white so as to highlight the navigation better. I initially wanted to frame the content of the app with blue above and below but ultimately the navigation just wasn’t obvious enough.

 

Finally we were asked to create a mockup of the app or website and subsequently undergo a series of usability tests - between 3-5 in order to get the most effective amount of feedback. Personally I made adjustments between each test which I am not sure was the correct procedure but I wanted to tinker with the app to get the best possible experience. This included changing the navigation footer elements for a clearer experience.

SIMILAR PROJECTS

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Clickable home icon to inicate to the user that tapping this will take them to the homepage
About icon button in mobile navigation to visit the About page
About icon (active) – You are viewing the About Us page.
"Product icon (active) – Currently browsing our print-on-demand store.
Product icon linking to our print-on-demand store page for browsing and purchasing items.
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Testimonials icon showcasing customer reviews.
Active contact icon indicating you are on the Contact page
Contact icon directing to the social and contact page.

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Clickable home icon to inicate to the user that tapping this will take them to the homepage
About icon (active) – You are viewing the About Us page.
Arrow icon; click to go back to the previous page you were on
Mail icon providing a direct link for users to contact the website via email.
Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Rory J. Murphy Logo - Click to go back home
Clickable home icon to inicate to the user that tapping this will take them to the homepage

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Clickable home icon to inicate to the user that tapping this will take them to the homepage
Arrow icon; click to go back to the previous page you were on

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Rory J. Murphy Logo - Click to go back home
Clickable home icon to inicate to the user that tapping this will take them to the homepage
About icon button in mobile navigation to visit the About page
About icon (active) – You are viewing the About Us page.
"Product icon (active) – Currently browsing our print-on-demand store.
Product icon linking to our print-on-demand store page for browsing and purchasing items.
Highlighted Praise icon in navigation showing you are currently on the Testimonials page
Testimonials icon showcasing customer reviews.
Active contact icon indicating you are on the Contact page
Contact icon directing to the social and contact page.

Photo of a woman holding a mobile device displaying the Go Away app, with a focused expression as she interacts with the screen
Notebook with UI/UX screen concepts, interface sketches, and layout planning—ideal for app design and web development.
Notebook with UI/UX pre-production notes, wireframes, and user flow sketches—ideal for product development, website design, and app prototyping.
Wireframe screens of a travel booking app, illustrating user flow and user journey for an optimized booking experience.
User journey map and wireframes for a travel app, mapping the booking process to enhance UX and streamline navigation.
Photo of a man using a flight booking app on his mobile, exploring travel planning features and the app’s user-friendly interface for seamless b
Woman on a sofa using a flight booking app to browse destinations, book flights, and plan her trip with seamless mobile travel booking.
Isometric view of three app screens showcasing the splash screen, ticket booking interface, and user profile screen.

Rory J. Murphy Logo - Click to go back home