IXD104 : Developing my first 3 travel app screens

Research

I learned a lot about interfaces from week 4’s lecture. I would still have to do some research before developing my travel app screens though.

I started by looking at the anatomy of different app components and when to use them on material.io. This gave me a good understanding of what bars, buttons, menus etc. I should include in my app, what they should look like, and where I should consider positioning them.

 

I mentioned in a previous post that I wanted my app to be able to compete with more utilitarian travel apps that would offer more functionality than just being about food, by creating a much more fun and unique experience with mine. It was because of this that I chose to install and take a look at Trip Advisor since it looks pretty utilitarian and offers an array of features pertaining to travel. Looking at how they present food/ restaurant related content was really beneficial as it gave me a good idea of how I should go about presenting that content in my own. It also acted as a sort of bench marker as looking through the app had me thinking about what features I could add and how I would present content to make my app more interesting and unique.

        

Sketching

After I felt confident enough to get stuck into developing my first 3 screens. I previously made some initial concept sketches which I discussed in a previous post.

 

From looking back at these and the research I had done, I decided to work on a launch screen, a home screen and a screen where you can curate your own meal plan for each day of your trip for my app.

I first sketched out my launch screen.

It was at this point I realised that my app would need a name so I brainstormed some ideas. I settled on “Global Grub”.

Then I did sketched out my other 2 screens. I was here that I came up with two new ideas. The first was that the mascot on the homepage is named ‘Earthling’ and acts as a sort of narrator throughout the app. Every time you enter the app he’ll have a new greeting for you at the top of the homepage. I also had the idea of you being able to collect an in app currency from writing reviews of places you’ve been, that you can then use to buy stickers to decorate your daily menus with kinda like a scrap book.

Digitising

After I had made sketches of each screen, it was then a case of digitising them in illustrator. First thing I had to figure out what type and colours I’d be using. For type I searched through the fonts I already had and on adobe fonts. I settled on the font chuck for the title and headings; since it’s really fun, playful and blocky I thought it would suit my app well. I decided on bio sans for the body copy mainly because it’s become my go to for that but also because I felt that it worked well with the Chuck.

For colour I consulted my illustration inspiration board on Pinterest which you can find here. You’ll be able to see what colours I went with on my fully digitised screens in a bit but the run down is that my main background/bar colour is a pretty shade of yellow and my lines are a vibrant but also pretty purple. Overall I tried to keep things light and happy by avoiding black and utilising a pastel colour palette.

Once I had those things figured out I was able to get stuck into digitising my 3 screens. I chose to put Brussels as the location as that was the last place abroad I’d been to before covid. My first objective on that trip was to try an authentic Belgian Liege Waffle so I felt it made sense to put that and the place I went to to get said waffle on the meal plan/menu. I also added a waffle sticker to show implimentation of the scrap book, sticker shop type feature I was on about earlier.

I haven’t discussed my icon development this post but if you’d like to see that process you can go here.

Overall I’m really happy with how my first 3 screens have turned out. There are some things I’m not 100% about like whether the type is legible enough but I know I’ll get some feedback on this in week 6’s group critique.

 

Leave a Reply

Your email address will not be published.