Creating Foundations & User Flow
Revisiting The Design Brief
Before moving forward with my project I wanted to ensure that I stick to what is being asked within the design brief without going on a tangent, revisiting the brief is extremely helpful for me to ensure that I am directing my ideas to suit the project and what is actually being asked of me. The main elements I am being asked to create is a home page, launch screen and multiple destination screens with illustrations or a single destination with two additional screens, this could be a purchasing featured or sharing feature within the application. Revisiting the brief also allowed me to figure out what sort of assets and components I need to create for my project, since we were asked to create illustrations for our project I will need to create a series of illustrations that fit with the theme of travel, this could either be locations, countries, landmarks, monuments or even just illustrations with a general travel theme. I have also been asked to create a series if icons for the navigation in the application, this will allow me to think of what icons I will need to create while I go through each stage of creating the foundations for my travel application. I will also need to create some written content for my application as Lorem Ipsum is not exactly professional, although its great for rapid idea development.
I have included a snippet of the deliverables for this project below as a reference guide to refer back to throughout the project.
As a minimum we would like to see at least five screens:
- A home/app launch screen
- A choose your destination/journey screen
- (whatever range of locations your app may include)
- At least three screens illustrating three destinations or one destination with two additional screens providing more information.
The best way to approach this project will be to breakdown the different elements you need to produce. Start with researching the type of app you would like to create then start working on the different elements required to build the app. These could include:
- An icon set for your navigation
- Illustrations/diagrams showing the places your app will take
- the user.
- Appropriate selection of typographic elements to support your visual content.
Creating A Foundation & User Journey
Laying The Foundations
Once I had revisited the brief I went over the initial ideas I had for the application and set out to refine these ideas to fit with what was required in the design brief. Initially I had a lot of ideas for this project as a travel application could do 100 different tasks like giving directions, booking hotels, planning trips, storing important information, international banking and a load of others, having the brief in mind I wanted to filter these ideas down to ones that would be interesting and most useful to the core foundations of a travel application and what features would actually be used the most. This approach to design thinking allowed me to lay a good foundation for the application so that it has a good amount of features that would be regularly used by travellers but still enough room for expansion and development within the app, I wanted to approach this project as if it was a real-world freelance project for a start-up company so this thought process allowed me to consider how the company would gain interest in the app and how they would maintain their user base once their company finds its feet.
Creating A User Journey
After I had a good foundation set for my project I wanted to start planning a basic user journey to allow me some insight into what I need to create going forward in the project like what screens I need to design, what features will be included and where, how will the user interact with the application and the user journey through the application. Creating this basic user flow really helped me gain an idea on what I need to do next for this project, designing an application can have a lot of moving parts especially with illustration and icon design throw in the works so it was good to get a solid plan together and remove all the noise as well as ensuring that everything within the design brief is being checked.
I have included an image of my initial UX flow idea below to demonstrate how I refined my project contents and defined key pages and features to ensure I meet the design brief correctly.
Building A Story (Onboarding)
From the user journey idea I had created I thought the onboarding screens were a good addition to the application, onboarding screens are beneficial for a number of different reasons including guiding the user through the features and functions of the application, helping new users understand how the application works, a visual way of describing tasks and information in addition to being a great way to display illustrations and animations in a creative and informative manner. Onboarding screens can help tell a story to the user through the use of illustrations and a small amount of written content, these are usually walkthroughs of application features and/or instructions on how to use the application or a certain feature, for this project I will be focusing my onboarding screens towards three application features that make the application useful for travellers. I thought this would be a good idea as it ties in with the idea of considering this as a freelance project for a start-up company, if the application displays its 3 most distinctive and useful features to the user at the start the user will know exactly what the app can do and decide if they think the app will be useful for them or not. I will be looking into some different onboarding screen designs in my design research to give me an idea on what sort of content is used in these designs and different layout ideas that I could use for my project.
Final UX Flow Idea
After I created a basic user journey for my travel application and made sure that all elements of the design brief were included I wanted to look at it from a perspective for a start-up company and see how this application could grow as the user base grows. I knew I wanted the application to have some form of descriptive content to ensure it meets the brief but I also wanted the app to have some for of social media element to it, similar to old-school Instagram, where users can post their travel photos and meet up with other travellers around the world. Another feature I wanted to add to the application was a hotel search and holiday packages/deals section as travellers may find this useful for booking last minute hotels, hostels and private rentals, I also wanted to include a simple ticket wallet and travel planner to the application which is something that could be further developed once the applications gains more users.
I found creating this user journey before I started sketching my ideas extremely useful as it allowed me to refine my ideas to what was essential for the project and allow me to remove the noise and focus on what needs to be done to create such a large-scale project with multi elements. This also allowed me to think about what sort of illustrations I will need to include throughout the project and where they should be placed as well as what icons need to be created for menus, navigations and other interactive features. Overall I think this is a great starting point moving forward into sketching and refining my design and layout ideas, some elements may not be included in the final project as this is a lot more than what the brief is asking but I think its good to look at a project as if it could be expanded and built on in years to come.
I have included an image of my final UX flow idea below to illustrate what direction I aim to take this project in and what kind of assets, pages and components need to be created in order to produce a professional product.
Idea Generation & Project Planning
Initial Idea Generation
Once I had a solid idea of what screens and pages I needed to create for this project from my user journey/user map I decided to use a similar concept to the Rule of 8’s sketching technique that we covered in our lecture, since I was sketching in a notebook and not an A4 piece of paper I decided to create 5-10 different ideas for layouts that I could use for each section. While these ideas are basic they really help me get an idea on what sort of content could be included on each page and how the illustrations are placed, knowing exactly what pages I needed beforehand really helped so I decided to set myself a 30 minute time limit to sketch multiple ideas for the screen that had the most priority in the project (the pages that are required to meet the design brief).
When I was sketching these ideas I thought the design of the application should be quite playful while still fitting the theme of travel, if users are going to use this application on a daily basis while they’re exploring the world I want to try and lift that person mood subconsciously through shape and colour, this will also help with maintaining a user base for the application. While these ideas are just quick sketches and need a lot of refinement to get to the final product I think they’re a good foundation and starting point for getting the first section of this project completed, I will be refining the layouts I like the best and trying to ensure they have a cohesive design style and layout throughout i.e. button styles, typography, logos, iconography, imagery/illustrations and colour.
I have included an image of my initial ideas and sketches below to demonstrate some of my ideas for this travel application and my thought process behind it considering the user-flow I had previously created.
Project Planning
After I revisited the design brief for the project, created a user flow/user journey map, generated some initial layout ideas for my project and refined the contents needed for the project I wanted to go into further detail and create a checklist of certain elements that need to be done to get this project moving. The planning of this project is almost complete and I will be starting to create my final designs, mockups and prototypes over the next few weeks and I will be referring to this checklist to ensure I am staying on the right track. There are a few things that I know need to be done from planning my project, I have included a brief list of elements I need to create for this project below, this is more than I will need to create but having these options available is good as it allows me to keep my mind open to new ideas while I am still sketching and planning my application.
- Logomark/Workmark/Monogram
- Navigation Bar
- Illustrations (Landmarks/Monuments/Cities/Countries/Avatars/Onboarding)
– New York
– Los Angeles
– London
– Paris
– Bali
– Amsterdam
– Tokyo
– Australia
– New Zealand
– Norway
– Iceland
- Icons
– Home
– Explore
– Ticket/Wallet
– Profile/Account
– Settings
– Menu
– Close/Exit
– Star/Rating
– Hotel/Bed
– Search
– Chat Bubble
– Filter Search
– Heart
– Share
– Social Media
– Arrows
– List/Document
– Eye Visible/Non-Visible
– Dice
– Logout/Login
– Notification
- Screens/Pages
– Landing Page
– Loading Screen
– Onboarding Screens (x3)
– Login/Sign-Up/Forgot Password
– Home Page
– Account Page
– “Tinder For Travel” Page
– Travel Planner
– Menu Screen
– Destination Screens (x3)
– Hotels & Accommodation Screen
I have included an image of my planning below to further explain my thinking towards the project and how I aim to approach creating this application.
Sketch Development
Final Sketch Ideas
Once I had a good idea on what I need to create for this project and go some of my initial ideas on to paper I wanted to refine some of my ideas adding a little bit more detail and focusing on what sort of components, icons, typography and imagery will be used and where. I went through my initial ideas and chose some of my favourite layouts that I think would work well for a travel application and the features I plan to include in the app, I then combined my favourite elements together to create a almost finalised page layout with a good idea on content.
As the brief only requires three destination pages, a home page and a landing page I will be placing the majority of my focus on these elements, after this I will be focusing on my onboarding screens as I think this would be a great addition to a travel application. If I have time to develop the application further before submission I will do so but ultimately I think this would be a good portfolio project to continue on with after I submit it.
I have included an image of some of my final sketch ideas below to give you an idea on what direction I plan to take my travel application.
Considering Animation & Interactions
I wanted to consider how certain elements will animate over a certain period of time or when the user interacts with them, the idea of a loading screen gave me this idea initially when I was looking for a more modern version of a loading bar. Personally I think loading bars and spinning wheels are a little outdated so I thought I could use the logomark to create some form of small movement to replicate the idea of a loading bar, this is a much more modern and interesting way to create a loading screen with simple motion graphics and animation.
I also wanted to consider how the user will interact with certain elements and components like carousels, buttons, cards and drag containers as this will give the app a much more professional aesthetic. While I was sketching my ideas I tried to think about how certain elements will animate when a user either touches or drags that specific element, for example when the user slide a list item it could reveal a button that allows the user to delete that specific task. I also want to consider some sort of animation for my illustrations, this doesn’t have to be anything big or over the top but something like a small zoom would work really well to add some sort of personality to the application so it isn’t so static and boring.
