IXD104 – Designing Screens for my Travel App
When we were first given this task in week one I wanted to create an idea that would be based around something I was interested in as I felt it would keep me engaged and allow me to show off my best work designing something I am passionate about. This is why I wanted to create a travel planning app based around the NBA and allowing consumers to get their first experience of live NBA basketball.
Sketching:
The process started with mind mapping consistently, allowing me to put my ideas onto paper and develop them further. After further research I found there was a gap in the market for an NBA based travel app as having access to trips to watch basketball in the states is limited for those in Europe and I wanted to base my app on making a trip to watch your favourite NBA team as simple and stress free as possible. After looking at apps I enjoy using on a daily basis I wanted to start sketching potential screens for the app.
After gaining feedback from my lecturer I wanted to develop these initial sketches further while also focusing on choosing a name and logo for the app. These enhanced sketches allowed me to see what screens that app would have and which ones I would chose to replicate on screen and present to the class in our week 7 group critique. I sketched the home screen of the app, which features a navigation bar at the top of the page with the apps name and a search bar with a magnifying glass icon to represent it. Below this will be the list of 30 NBA teams and their icons, with 6 showing at a time on the screen allowing the user to scroll across and see all of the franchises. My initial sketch showed that below this list of teams would be a fixtures list however when creating this design on screen I changed my designs instead showcasing my icon work that I have progressed in over the past couple of weeks.
The next set of sketches focused on the screens after the home page. Once the user clicks on a Franchises icon on the home page or uses the search bar to find them they are taken to a new screen which focuses solely on that franchise, with a separate one for each of the 30 teams. The example I used was the Brooklyn Nets, with their icon being at the top of the page and then accompanied by a background piece on the franchise. To attempt to grow the popularity of the NBA to new users I then will have a list of the teams starting 5 from their previous game so the user can become aware of who they are going to see. The teams next game with a link to purchase tickets will follow then to help the user plan their trip entirely like apps such as AirBnB and Trivago do the app will suggest nearby hotels and restaurants which are close to the arena or have ties to the franchise so that the user can get the whole ‘Brooklyn Experience’. If the user wants to plan their own the trip the screen will also have a link to google maps with the arena set as their desired location so that they can see all of the nearby attractions and read reviews to help them plan their perfect trip while also learning more about the game of basketball.
The final sketches I did were of icons that will be on the navigation bar located at the bottom of the screen. The icons I created rough sketches of are pretty standard travel app icons, with a home icon to take the user back to the home page. Then I could either have a basketball or tickets icon that when clicked on will take the user and show them games coming up that still have available tickets. The next icon I would want to have is one maybe of a person with a speech bubble which will show the user reviews of the app or different arenas etc. The last icon of the 3 dots will allow the user to adjust their app settings, ranging from choosing their favourite teams, see the league standing or leaving a review etc.
Planning and Designing a Logo:
For my logo I wanted to replicate a well known symbol of travel of a globe accompanied by arrows and a plane. However I felt just recreating this exact logo without adding my own twist on it would be a waste so my idea was to replicate this common travel symbol by replacing the globe with a basketball. This represents the global journey based around basketball that the user would undertake by using my app. I have attached my finished logo below along with one of the symbols I was trying to recreate it.
Creating the screens:
Making the screens digitally would allow me to experiment with different colour schemes and designs while also allowing me to see what my sketches would look like digitally and whether they would work and look well. On Figma I started off with creating the main opening screen of the app adding the logo and different design aesthetics and also choosing a consistent colour scheme which you can see below:
Just like my sketches I included the scrolling list of all 30 NBA teams with 6 being shown on screen at a time, which will allow the user to become familiar with the franchises and choose their favourite team on their first use of the app. Below this instead of including the list of upcoming games like I did on my sketches I instead included two personally designed skylines of New York and San Francisco which allowed me to show my iconography work that I have developed over the past few weeks and give my app a unique touch instead of just using photos. These icons show the user the top rated locations that users have traveled to and which teams are located there.
The second screen shows what the user would see when they click on a teams icon on the main screen and my example showcases the Brooklyn Nets. The page opens with a picture of the franchises logo and is followed by a small background paragraph on the team and their starting ‘5’ from the previous game. The next part of the app is where the travel app part of the project comes in showing the user a potential hotel they could book if they choose to go and watch the Nets. I included icons of a hotel which in created myself showing a brief description of the hotel, their star reviews and also an option for the user to see further reviews. On the right hand side I showcased a potential deal that the app could provide the user giving them a way to have a cheaper deal buying through the app rather than going and booking a hotel by themselves.
The final screen also showcases a local restaurant to the user and provides them with a deal also to make their NBA experience as smooth as possible. Below this is where the upcoming game feature will go, showing the franchises upcoming home game and allowing the user to buy tickets through the app. The screen finishes with two reviews of a trip to watch the Nets to allows the user to see if this trip is what they are looking for and what they can expect.
