Travel app Project
For our first project in the IXD104 module, we were given a project to make a travel app. When we were given the free hands to do anything that we would like, as long as it would be a travel app I already ran ideas of what I could potentially do. I started off with several ideas and made a mindmap to sort my ideas, ranging from a travel app about ghosts to interesting points in history.
I eventually narrowed it down to three options and made the final decision to make an app focusing on the nightlife around the world.
Even though this was not a necessary option I took the time to ask people around the age of 18 to 30 about my idea and if they would use the app, which also give me insight into the idea of what to add. I was surprised with the overwhelmingly amount of positive responses I got from my idea and that everyone that I asked would use the app if they had the opportunity to.
After I had asked people around I began with sketching ideas of how the app would work as well as wireframes and icons. Since the app is about nightlife and would work as google maps, with reviews and a map, as well as a similar search function, but has added features such as a social media aspect to it.
What’s unique with the app is that it would be an app where you would be able to pay for any event happening in a club/bar/pub or whatever nightlife place there would be, which would save a lot of time and effort for the customers, since I have seen friends and flatmates buy tickets for different events of different websites, having to log in or sign up several times to just book a ticket for an event they’re attending once.
Here are my ideas for the app process and how it would play out using the app, this is a rough idea of what I wanted and does not reflect on the final screens as I chose to remove the login/loading screen and did some changes while in the final few stages.
Here are a few sketches I made very early on with ideas that I had on this project and some notes with ideas and what I wanted to add to the app. I, later on, began sketching up some rough wireframes for the app to get a proper idea of what I wanted.
A very rough sketch of my wireframing for the app.
When I was done with the wireframing I began thinking about the icons I wanted to have for my app, and since I was set on using a lot of neon I began sketching what would later be the icons for the app etc.
My name for the App is NiteLyf, which is a play with the name Nightlife, and I chose to replace the Y with a martini glass to capture the element of the app.
There are a few illustrations that I decided to remove as well as ideas I had that I removed from the final stage since I felt it was unnecessary.
Here are the app Icons I made for interactions, such as menu buttons and icons to indicate what certain texts are, such as a website or a location.
Here is the finished logo with matching title screen logos to tell the user what sort of screen they’re currently on to avoid confusion.
I made an extra two icons to indicate official tags added by the company(app) itself, such as accessibility or LGBTQ+ friendly places! It is to showcase that said pubs/clubs/bars are proven and are officially LGBTQ+ friendly or have had someone at the bar to investigate if it truly is accessible for people with handicaps.
The rest of the icons are star ratings, which can be seen in the review section as well as the two icons made for the hamburger many as well as the search feature the app has.
Here are the icons I made for the app on illustrator, a few of them have neon looks to them, but those would be the larger icons or titles on certain screens, such as the title screens.
I, later on, began building my app on Adobe XD, unfortunately, a lot of progress images were lost during the time but I was able to get a few screens to show my progress.
This was an early stage of the app that I created, unsure how to make it work and use the colours right.
I originally had a base colour of the app in #333333, which is a darker grey, but later on, during the progress changed it to a darker Navy Blue to give it some depth. I also had too much gradient going on and the app felt very homemade at the first stage.
I also set a few rules during the making of the app and chose to use two typefaces instead of one to add more character to the app.
I chose to work with the two typefaces Acumin Pro and Gill Sans Nova. I used Acumin pro for headers mainly, as well as the logo I created for the app, and Gill Sans Nova as the secondary font, which is used in comments, and larger pieces of text. I wanted to use a Sans Serif typeface since it felt like it had the characteristics of my app.
Due to the lost footage, I can’t show how it went from there so I will continue explaining my design decisions with words for every screen I made for the final Travel app.
Here are the final screens for the travel app. I was very happy with the final outcome of it since I feel like it met the standards I set for myself.
The start screen for my prototype is simple, but from the start, there were a lot of things I were unhappy with. It felt flat and not much like a map, to solve this I added some shadows to the edges of the map to show the user that “you’re in this area” to make it less confusing and added a measuring feature like many other digital apps have.
As previously mentioned I also changed the base colour from dark grey to Dark Blue to make the app feel more even in terms of colours.
My second screen is an extension of the first screen whenever you’ve selected the bar/club/pub you want to view the information of any of the other features the app gives you. As compared to the previous image of the early stages, there have been a lot of changes, there was a lot of trial and error to come up with a final solution to make it work.
When Tapping on the Event.
Whenever you tap on the event section you’re taken to the event page, which you should! And there you’re given events in dated order, so the events closer to the date would be the first one on the list and so on.
And whenever you tap on an event, Late Night Drinks for example..
You’re taken to another screen, where you can read more about the event and chose and buy tickets.
If you click on the “more reviews” at the bottom of the screen after selecting your bar/club/pub…
Whenever you’ve tapped on the “more reviews” you’re taken to a screen showing all the reviews, giving you an opportunity to select a comment to expand their review into more detail. The reviews are sorted after the date, just like the events, I would have added a feature to sort the comments after rating and much more, but it would be too late for that since I only noticed it as I’m writing this.
If you tap on the desired comment you’d like to read more about it will expand and add more detail about the review, including tags, and separate ratings about different things, that people would value selecting a place to go out to.
When tapping on the profile icon in the top right corner…
Takes you to the profile page, which has three sections.
The photo section shows images that you’ve uploaded on the app, with tags, but it’s only shown with tags whenever you tap on the image and are taken to a screen, which is much like Instagram’s scrolling function when it comes to watching images.
Here is the screen for whenever you tap the image, you can proceed to scroll down to see the other images on the app that you or another user have uploaded.
Under the friend’s section, you can see what friends you have or another user has if they allow you to see it. It’s a feature that you can hide depending on how anonymous you would like to be on the app.
Under the Reviews tab, you can look at the reviews you’ve made at previous places, and you can also see what other people have made their reviews and what they’ve said. Every place is tagged so you can easily go to the selected bars’ page and watch it by tapping on the tag. Just like the friends section, there were plans that you could edit who can see them.
Whenever you press the hamburger menu you’re taken to this screen, which showcases other features the app has.
The favourites take you to a page where you can look at your favourite bar/clubs/pubs that you’ve selected as favourites and by clicking on it you’re taken to their page, just like the tags on the other screens do.
The account button takes you to a screen where you can edit your profile and add/remove payment methods that are used in the app to buy event tickets.
“NiteLyf is an app for everyone, no matter where you live, and your age unless you’re below the age of 18. It’s a platform where you can see how your friend thinks of certain pubs, clubs or bars and how they spent their night. It’s an app everyone needs to fully enjoy a night out, to make sure that you’re at the right place, and at the right time! You no longer need to go long ways to order tickets to your favourite events, in this app you can buy the tickets, and they’re just seconds away whenever you open the app! NiteLyf is the app for a perfect night out.”
Overall, I’m very happy with the final result. I would argue that I spent too much time making the app meet the standards I set. There are a lot of things I would like to change with it, but it’s definitely something I will work more on in the future if I’m given the opportunity.
I had a lot of issues that I ran into, such as spacing, colours, sizes etc. Common issues you would run into designing an app.
Thank you