IXD104 project 1 – Finalising my travel app User Interface

Now that I have come up with a travel app idea, and have done some illustration research, I feel like now is the appropriate time to start planning my travel app user interface.

At the start I had no idea where to even begin, thus I went back to my previous blog to check my previous notes. I reminded myself of my previous ideas and combined them.

Here are my previous ideas;

  • possibly a reward system
  • simple yet eye-catching – possibly through a nice and colourful graphic paired with a simple white/black/grey background
  • A map system – where users can interact with a real map and see places they have been/ still want to visit
  • informational but not overbearing
  • a wishlist?/ recommended page?/upcoming trip page?

And there is my final idea after I combined them;

 

Now that I have got a general idea of where my app is going, I need to consider which screens should I try to showcase. I need to consider this as I know that an app can have many different user interfaces, I mean even considering starting off a new app – you have the initial loading page, the login page/ the setup page if you are a new user, the introduction page etc. I think what really helped me is to think about a user journey through an app. I have never done this before, so I’m going off on my own instinct, but I need to recognise that I need to work on it in the future;

I picked the pages that can show off my app ideas such as – a reward system, map system and quest map etc, and checked that they satisfy the requirement of my project brief;

  • a minimum of at least six screens, which should include: a home/app launch screen, destination/journey screen (whatever range of locations the app may include), at least three screens illustrating three destinations or one destination with two additional screens providing more information.

and there are the pages I picked (the ones encircled);

The reason why I want to have the same user interface pages but have 1 zoomed in and another not is that I want to show that my app is interactive and that users and zoom in/ scroll through/interact with the app.

And also, I just want to clarify, that in the “destination summery” bit, I actually don’t mean zoomed in. I want 2 different destinations summery, each destination summary has 2 pages, one page scrolled up so the user can read more information, and one that is scrolled down so that the user can see more of the illustration.

Now that I know what user interface page I need to put together, I started to do some mock designs on pages. I was a little hesitant on whether I should include mock designs in my research, as they are all really rough looking. I do mock designs mainly just to give me an idea of the big picture so that I’m not totally clueless when I go and start my prototypes in Figma. In the end, I decided to include them in my research, because through them it will be easier to see why I did what I did in the finalised user interface in Figma.

In my mock designs, I often look to other apps for inspiration. I have an overall look in mind, inspired by a past pupils design on my previous blogs;

Since I have decided that my illustration will be colourful and eye-catching to resemble more of a hand-drawn and “child-like” style. I want to rest of my app to be as simple as possible. possibly like something of the above, just minimal writing and a good amount of white native space.

so here is the design for my loading page;

mobile app design trends loading screens Mahisadd

 

 

 

 

 

 

 

 

 

 

 

 

 

Inspired by the app Mahisadd, I want my loading page to be simple and have a logo ( properly and character) welcoming the user.

 

Next was the summary page, this page was inspired by a travel app prototype I found on Figma called travel app template with normads illustration);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I made a more simplified version, as again then I want to keep everything as simple as possible.

Below is my first attempt at a destination summary page ( kind of like where the user can read more about a place before deciding if they want to start a new “quest” or not”;

 

 

 

 

 

 

 

 

 

 

 

again, the inspiration was taken from normads illustration. Then I decided that I would add in a “start quest” button;

 

 

 

 

 

 

 

 

 

 

 

 

I saw a bank app prototype, and decided that having a curved scroll up/down function looks nicer than just straight;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Thus I adjusted my design, and did 4 destination summary pages ( 2 destinations x 2 pages for each);

 

 

 

 

 

 

 

 

 

 

 

 

Next was the Quest timeline, and I took inspiration from an air travel app;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I didn’t actually take any inspiration for my rewards/collectables page. An idea just popped into my head while researching, so I put it down on paper;

 

 

Lastly, it was time for my ” where to next map” interfaces, I took inspiration from a navigation app. However, I added and navigation bar so the user can search for a specific place or filter specific criteria;

Navigate App

 

 

 

 

 

 

 

 

And with that, my design mock ups are done!

Leave a Reply

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