IXD104 Travel App- Sketches and Wireframes

For my travel app, I have decided to move forward in creating a Star Wars-themed outcome that allows user to travel the Galaxy virtually through the app and learn about the planets that feature within the franchise. As Disney is continuing to release Star Wars films and new series developing characters stories further, this app will not only target established Star Wars fans but also those only beginning to watch the films and series for the first time. Therefore a big focus for me will be making information accurate and easy to source and understand.

First sketches of travel app

I began the sketching process by doing a detailed overview of everything I wanted in my app as shown above. The primary concept is a Star Wars themed travel app that allows the user to travel the galaxy virtually, select planets and find out detailed information on the planets including terrain, the sector it’s located in, which Star Wars movies it features in etc. I, therefore, wanted the home screen to resemble google earth in that it would appear as though you were viewing a 3D view of space. I also wanted to give the user the option of finding planets by zooming and moving around this view of the galaxy and by using a search bar that would automatically take them to the planet they are looking for. Alternatively, I thought it might also be helpful to include a list option that would allow the user to find a planet by scrolling through a list.

1st wireframe set

As I wanted to take some time to focus on variations of UI I completed the above wireframe of a number of screens I wanted to include in my app. In the above set, I have also included a page that keeps a log of planets viewed as an option that would allow a user to easily return to a planet even if they have forgotten the planets name. I also considered having a login/ sign up option on the opening screen to encourage the user to sign into the app.


2nd wireframe set

In my next wireframe, I considered animation and the notion of opening the app with a warp speed video seen commonly in the Star Wars franchise. In this version, there is no galaxy view rather the home screen is a flick through menu of the planets, an idea I am not as excited about. There is also a planet list option and favourites page that logs all of the user’s favourite planets and a distance page that allows the user to select two planets and find out the distance between them. Again I have included a rewards page with badges earned by the user and in the profile page, when the user has signed in they can pick a side with their selection changing the highlight colours throughout the app to either red or green. Finally, each planet would have a long profile page providing detailed information about the planet along with images/ illustrations.

3rd wirefame set

In my final wireframe, I have reverted back to my original galaxy view idea and have experimented with different layouts for the select a planet page, favourites page and rewards/badges page. Rather than opening automatically with a sign in option or the warp speed animation in this version, a title page will appear that will then move to a warp-speed animation followed by a page encouraging the user to sign in, however, the sign-in page can still be skipped.

What have I learnt?

  • Always clearly identify your target audience and keep them in mind throughout every stage of the research and development process.
  • It is helpful to work on a larger graph pad when creating wireframes.
  • It is important to sketch out various design options when wireframing in order to find several potential solutions to the problem you are solving with the design in order to find and select the best solution.
  • Completing detailed research and outlining the content to be included in a user interface is essential before moving to the wireframing stage.

How can I apply this to my work in future?

  • When working on any future projects as I have done with this project I will complete as much research and gain as full an understanding of what content will be included in a UI before moving to the wireframing stage.
  • When creating wireframes I will generate as many as possible trying to tackle the presentation in a variety of ways in order to find the best solution.

Leave a Reply

Your email address will not be published. Required fields are marked *