< Go Back

Altitude

For my enterprise module for my third year at University, we were asked 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 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. The designs and concept of Altitude resulted in me winning The University of Winchester Transmedia Award 2018.

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. The development of the HTML, CSS and JavaScript of this project can be found in more detail below:

Company

The University of Winchester

Enterprise Module

Timescale

January 2018 - April 2018

Skills Required

Research
Visual Design
UX Design
Web Development


Empathise

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. This was in the form of verbal interviews, which I recorded by writing down their responses.

Examples of reponses recieved from users included finding it frustrating needing to remove paper maps from pockets to check piste routes. This was because it can often require stopping on the side of the mountain to check maps, which in some cases is not safe due to the volume of other skiers and snowboarders around. Another response was the issue of losing skis in powder snow; however, this was not such a common response compared to the issue of paper maps. This suggested this was not a pain point that needed focus.

Some responses from a snow-sports enthusiast discovered by interviewing current users.

Some responses from a snow-sports enthusiast discovered by interviewing current users.

A brainstorming session from one of the interviews.

A brainstorming session from one of the interviews.


Define

Once I had understood the challenges of my users, it was time to define the problem and interpret the data collected. By having a good defination of my problem, it helped to guide my project and help spark ideas during my ideation stage.

Personas

Once I had gain an understanding for my users, I created our two personas: Chris and Carrie. My personas were created based upon my user research in order to represent the different user types that might use my solution. My two target user groups were snowsports enthusiasts who are looking to be the fastest around the mountain and have the statistics to prove they are the best, and families/groups who want to keep track of each other and share details of their day.

Meet Chris and Carrie!

Mission Statements

After finding the pain points from my user research, I decided what my mission statements would need to be. These mission statements were my focuses for the project, ensuring I was always coming back to my users, Chris and Carrie, and their needs.

The mission statements are short statements of my solution's purpose, focusing on who the users are, what need is being met, and the wow that makes my solution different.

The who (white), the what (blue), and the wow (yellow)!


Research

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 pain points from my users that were not already being addressed. I took my findings and created mindmaps of the product’s features and costs.

The main competitors I found were Edge and Snoww. Edge currently 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 brainstorm of competitors and their features.

Initial brainstorm of competitors and their features.

Researching the app store.

Researching the app store.

Edge

Part of my research was looking at the product/service that Edge provides. Edge Ski app uses GPS to record users statistics while one the mountain or back at the chalet. Using the phone’s GPS and accelerometer, the app is able to record user’s max speed, average speed, total distance, vertical descent, max altitude. Using this data, Edge plots graphs to visualise the user’s performance. By tapping the ‘Start’ button, users are able to leave their phone in their pockets while the app is automatically saving and storing the data. Users are also able to access resort information including weather reports and pisete maps which can be downloaded and accessed without the need of wifi or mobile data. Edge also allows users to compare statistics with their friends.

My research showed a key strength of Edge was the ability to download data which would help to reduce roaming bills and remove the issue of not having cellular coverage. This was a strength I wanted to include in my solution.

Uses user's phone's GPS to plot their route down the mountain, and keeps track of statistics from the day.

Uses user's phone's GPS to plot their route down the mountain, and keeps track of statistics from the day.

Interfaces of Edge ski app used for promotional content.

Interfaces of Edge ski app used for promotional content.

Snoww

Like Edge, Snoww allows users to record their distance, vertical drop, top speed and calories burned. Using the data collected, the app provides users with summaries of their day and notifications of their previous runs and milestones they have achieved. The app also allowed users to upload photos and share their day with friends. This was a unique feature that I had not found in other ski apps. Like Edge, Snoww also allowed users to compete with friends; however, users can also compete with locals and pros from around the world. Snoww also allows users to find their friends’ live locations.

My research showed a common issue when skiing it keeping track of all members of ski groups. Some skiers and snowboarders use Apple’s ‘Find My Friends’; however, it requires an Apple product to be able to use it. Research shows in 2017 Apple sold 215.8 million iPhones compared to 1.244 billion Android smartphones shipped during the same year. Snoww’s unique feature of tracking friends would help to meet this user need.

Allows users to follow friends, compare ski statistics, and compete with other skiers and snowboarders on mountain's leaderboards.

Allows users to follow friends, compare ski statistics, and compete with other skiers and snowboarders on mountain's leaderboards.

Promotional video by snoww.


Ideation

We've got our challenges. We've got our users. Now to concentrate on idea generation. Brainstorms and mindmaps were a key method of ideation. I am a visual person (wonder why I became a designer!) so mindmaps help me to explain my ideas. I also find mindmaps help enable a free flow of ideas by using keywords, symbols and short phrases.

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.

Mindmap of features I brainstormed that could be used in my solution.

Mindmap of features I brainstormed that could be used in my solution.

Developing features I could intergrate into my solution.

Developing features I could intergrate into my solution.

Developing Ideas

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 sketches of my OLED screen concept.

Initial sketches of my OLED screen concept.

Researching OLED screen properties.

Researching OLED screen properties.


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.

Initial navigation map for login and sign up.

Initial navigation map for login and sign up.

Developed navigation and interfaces for login and sign up.

Developed navigation and interfaces for login and sign up.

Developed navigation and interfaces for account interactions.

Developed navigation and interfaces for account interactions.

Developed navigation and interfaces for dashboard interactions.

Developed navigation and interfaces for dashboard interactions.

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.

Mid-fidelity wireframes for app interfaces.
Mid-fidelity wireframes for app interfaces.

Mid-fidelity wireframes for app interfaces.

Final Wireframes

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.

High-fidelity wireframes for interfaces.
High-fidelity wireframes for interfaces.

High-fidelity wireframes for interfaces.


Visual Design

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.

Image reference example for imagery assosiated to snowsports.

Image reference example for imagery assosiated to snowsports.

Second image reference example for imagery assosiated to snowsports.

Second image reference example for imagery assosiated to snowsports.

Branding

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.

Brainstorming words associated to skiing, snowboarding, snowsports, and mountains.

Brainstorming words associated to skiing, snowboarding, snowsports, and mountains.

Researching other snowsports brands and logos using Pinterest.

Researching other snowsports brands and logos using Pinterest.

Developing my logo ideas

Developing my logo ideas

Digitalising my developed logo ideas

Digitalising my developed logo ideas

Developing the 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.

Experimenting with different colour variations

Experimenting with different colour variations

Final branding colours and logo.

Final branding colours and logo.

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.

Final Outcome: The result at the end of the module, and handed-in as part of my coursework were the above interfaces along with the development you have seen above. The interfaces show the interactions users have with the app and how they navigate to each feature.


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 below:


Final Notes

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.

Time Management

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.

Using iCal to plan my project around my lectures and personal commitments.

Using iCal to plan my project around my lectures and personal commitments.

Using Gantt charts to plan deadlines.

Using Gantt charts to plan deadlines.


Project Achievement

Transmedia 2018

Each year, my University course would organise the exhibition ‘Transmedia’. Pitch your project provides an opportunity for students on the Digital Media courses at The University of Winchester, to pitch their business ideas, to an invited professional panel. During my third year, I presented Altitude. After recieving valuable feedback concerning the functionality and marketing of my app, I won the award for first prize. The judges took into consideration the viablity of the concept as well as the overall design and branding.

Accepting the award at Transmedia 2018.

Accepting the award at Transmedia 2018.

The *rather snazzy* Transmedia award.

The *rather snazzy* Transmedia award.