User Interface and Branding Design

Altitude

the brief

This project was part of my enterprise module for my third year at University, which was to produce a business plan of a new product or service. We were asked to look further into the concepts, techniques and theories behind business practice both in a broad sense and within the digital media industry. I focused on my idea for a snowsports app entitled “Altitude”. Below shows the development of my idea from concept to final designs.

After developing my business idea further and deciding to include a weather forecast section, I also coded a weather app to show a simple prototype of Altitude being used. I also took inspiration to code a weather app from Code Camp’s “Show the Local Weather project”, which involved building an app that displayed the weather wherever the user happened to be. The development of the HTML, CSS and JavaScript of this project can be found in more detail here.

empathise & research

I knew I wanted to build on a personal problem I have experienced because I knew I would be able to personally empathise with my users and their challenges. I decided to focus on the pain points of snow-sports as this is a hobby I have partaken in for eighteen years. While in the company of other snow-sports enthusiasts, I discussed what pain points they have also experienced. Their three key challenges were using paper ski maps, losing equipment in powder snow and keeping skis safe at night.

I brainstormed solutions to these problems and I decided to focus on creating a solution for paper maps. This is because this is a personal pain point I have experienced. When skiing paper maps can be damaged from snow, being pulled out of bags and pockets, and being left in the chalet. Therefore I wanted to produce a solution that would alleviate the need for paper maps. I also wanted to integrate a solution for needing to use multiple apps to find information about snow reports, chair lifts and routes to other resorts.

The main focus of my research was focusing on other snowsports apps. By researching my potential competitors I wanted to find whether there was a gap in the market or features that I wanted to take forward to my own solution. I took my findings and created mindmaps of the product’s features and costs.

The main competitors I found were Edge and Snoww. Edge current provides tracking, maps, snow reports and weather for skiers and snowboarders on iOS in 600 resorts worldwide. Snoww is a socially integrated ski tracking app that allows users to follow friends and compare their ski statistics, or compete with other skiers using their leaderboards. I took inspiration from both of these apps; however, I wanted to add more focus to suggesting routes for users which is a feature both apps failed to included. This would be my unique selling point and then main focus of my app design.

initial ideas

I then brainstormed the potential features of my own product. The main pain point the product was reducing was the use of delicate paper maps which can be damaged and left behind. Therefore my solution needed to be durable and easy to remember to take with my users. Research showed skiers and snowboarders do take their phones with the while on the slopes to take photos, for emergencies, and for contacting friends and family. Therefore, utilising users’ phones would reduce the amount of extra equipment needed to be remembered.

Due to the project being part of my University studies, I also wanted to use the opportunity to understand the potential of new technologies. One of my ideas I brainstormed was using an OLED screen to display user’s routes on their forearm. Another idea was utilising a users’ phone screen to display the routes by holding the phone in an armband which would be secured on the outside of the user’s ski jacket.

developed idea

My final solution was an app and a high-end OLED screen or a low-end forearm band which would be used to display the routes that the user would input into their phone. The app would allow users to search for routes, share routes with others, find out which chair lifts and cable cars are open, get real time resort information, and record and store your statistics from the day on the mountain. Users would also be able to send out meeting point information to their friends for example meeting at the same apres bar for a drink. The app could be used alone; however, users would be encouraged to either purchase an OLED screen or forearm phone holder.

I chose to use an OLED screen over an LED screen to display the routes because they have lower power consumption, better picture quality, more durable, lighter weight, more malleable, and the prediction of future productions is OLEDs will eventually become cheaper to manufacture than LEDs. The key feature to the OLED screen is it needed to be flexible so it can mould to the forearm of each user. OLED screen are able to do this due to using a series of thin, light emitting films compared to individual LED bulbs.

initial wireframes

Once I had decided the final features for my solution, I started to create low-fidelity wireframes of the app pages, using basic shapes and limited with limited colours and styling. The main focus was figuring out the layout and content placement, as well as the navigation and functionality. For my low-fidelity sketches I sketched the different elements on paper.

developed wireframes

I then used these sketches to produce mid-fidelity wireframes. My chosen software was Sketch. I chose to use Sketch because it is an industry standard software that I wanted to gain experience in and I knew the use of creating symbols, for example the navigation bar, would allow me to create consistent designs. Previously I would Photoshop and Illustrator to create digital wireframes; however, after using this project to development my skills in Sketch, I will continue to use it for all User Interface design I do in the future.

One of the main issues I faced with using Photoshop was using a single canvas and needing to create a new file for every page. Illustrator alleviated part of this problem with artboards; however it was difficult to organise all the artboards. Sketch has both pages and artboards which meant I was able to create all the individual screens for one flow and then have separate pages for my other features. This makes organising my designs far easier and I am still able to export individual screens for prototyping.

Another benefit from using Sketch was using Sketch Mirror. I was able to test mobile UI screens on my mobile devices in real time. Any changes I made to the design in Sketch were immediately reflected in all my previews. This was particularly useful when testing the size of buttons and text with other users.

Final wireframes and prototyping

Finally I created my high-fidelity wireframes. My high-fidelity wireframes contained realistic content, including the typeface and button styles. I chose to use different hues of grey to display subtle contrasts that will eventually be more clean once the colours had been added. This allowed me to visualise my app and how my users would navigate it before adding any imagery or colour.

Wireframing has become an important tool that I have developed my skills in since starting University. It is a useful tool to be able to communicate to clients, developers and other designers, the structure without becoming focused on the colours and images. This project was created as part of my University project, therefore I did not have clients to work for; however, I used my wireframes to test the structure with other users, who were not familiar with the design and hence would not give a biased view as I would. Feedback included the size of buttons being too small, especially on the dashboard and account page. I took this feedback on board, and made the necessary changes to my designs.

Inital Branding ideas

Once I had decided my content, structure and I had gained feedback on my greyscale high-fidelity wireframes, I researched the branding that would be implemented for my final designs. Part of my earlier research included competitor analysis. I analysed what the gap in the market could be for my app. I also used my competitors to understand the current landscape of snowsports branding. While researching I also considered brand awareness and brand associations.

Snowsports is heavily associated with two colours: white and blue. The white is associated with the white of the snow and the blue is associated with a cloudless sky. These colours were heavily featured in the analysis of my competitors and well as brands who are not direct competitors who are associated with the snowsports industry including Go Pro.

I also brainstormed words associated to skiing, snowboarding, snowsports, and mountains to find a brand name for my app and equipment. These included Powder, Peak, Summit and Piste; however, I decided on Altitude because the word wasn’t already associated with another well know brand and gave the freedom to development further products that are related to outdoor sports without necessarily being related to snowsports.

After researching other snowsports brands and logos using Pinterest, I started to brainstorm by own logo ideas. When developing my logo ideas, I had not decided on my brand name, therefore I used the opportunity to experimented with the different brainstormed words.

Final Branding

After experimenting with different colour variations and logos, I decided on my brand colours as cobalt, electric blue and white. I also decided on a simple line curved to resemble two mountain peaks as my logo. Like the brand name, the shape of the logo gave the freedom to development further products that are related to outdoor sports without necessarily being related to snowsports. The logo was created using the pen tool and taking inspiration from twin peak designs from other logos.

Final Designs

With the final branding, I implemented the colours and imagery into the high-fidelity wireframes with the changes from feedback, to create my final designs. The final design includes the login and sign up flow, dashboard, friends and groups, suggested routes, sending route invitations, weather, and finally a user’s account and other user accounts layout.

These final designs are mockups that reflect the design choices for colour schemes, layouts, typography, iconography, the visuals of navigation, and the overall experience for a user when using the app. I chose to use a mockup application (Sketch) as opposed to a graphic design software (for example Photoshop) to produce my mockups because I was able to add interactions to my mockups.

The full PDF of my final designs can be found here.

Development

As part of my Altitude app, I designed a weather section to give updates and snow reports. Inspired to code a weather app by Code Camp’s “Show the Local Weather project”, I wanted to build my own app, based upon the Altitude app, that would display the weather for the user’s location. In order to do so, I adapted my original design to a realistic design that I would be able to code.

I was able to create a working weather web app using the latitude and longitude of a user’s position and provided them with their location, an icon representing the current weather, a description of the current weather, current temperature, the high temperature of the day, the low temperature of the day and the wind speed. I also developed this concept further from my original designs so it was able to suggest the most suitable attire depending on the day’s weather. More details of the development of my weather app can be found here.

Evaluation & Time Management

Overall, I am incredibly pleased with my final outcome and I am and proud of the progress I have made developing my skills with Sketch. Using Sketch I was able to create vector-based user interface designs which can be resized to any dimension without losing its sharpness.

This project also gave me the opportunity to develop my knowledge using APIs and JavaScript. Before this project I have very little knowledge of how an ajax call could be used to make an HTTP request and how to use JQuery to display the response. I now know I would be able to take my knowledge from this project and be able to connect to an API and retrieve data in a different context.

This project was completed over twelve weeks (18th January - 3rd April) during which I set myself deadlines when I needed to be at a certain stage. For example by week seven (25th February) I set myself the aim to have completed all my final mockups to give myself time to code my weather app and to be able to collect together my work and display it in my printed and online portfolio. In order to keep track of my deadlines I used my built in calendar, iCal, Todoist, a to do list and task manager, and a Gantt Chart. All three tools allowed me to finish my projects on time.