Explore
Role:
UI / UX
Tools:
Sketch, Adobe Illustrator, Adobe Photoshop, Affinity Designer, Invision
o1. The Problem
Evolve are an electric skateboard company that have been producing high-quality skateboards for the past 10 years. The community around Evolve has always been incredibly supportive and engaged and it was for this community, that the app was intended to support. We were tasked with creating an app that would help enable further engagement and allow riders to more seamlessly share their experiences amongst the community.
o2. The Process
Survey
As a result of Evolve having very engaged customers, it was imperative that we have a clear understanding of their customer's needs and wants. We sent out a survey to Evolve riders to find out where and how they used their boards, and how best an app could further improve their riding experience. We received over 500 responses.
Insights
The key demographic for the riders were males aged between 30-45. This was older than we initially expected.
Most riders used the boards for emotional rather than economic reasons. Riders used their boards for pure enjoyment rather than as a means of transport.
Riders had found many alternate ways of sharing routes such as using Google Maps, and other fitness apps to map out their rides.
Riders were very keen on using apps for tracking ride statistics and comparing their progress amongst friends.
These results indicated to us that the riders had high standards. They were closer to middle-aged and could afford a $1200 board. They rode for enjoyment rather than practical reasons. From these insights, it became clear that the app would have to be incredibly slick and sexy to align with the image the riders had of the company and the existing experience.
Wireframing
Knowing more clearly who the customer base was helped inform the wireframes. I focussed on designing a streamlined flow that would highlight the mapping functionalities first to encourage riders to create and share routes.
Prototyping
I used Sketch and Invision to develop interactive prototypes for testing that highlighted kinks in the UI. I also developed a series of user flow diagrams to map out processes and understand any breaks in the user's progress. We wanted to allow users to have as much functionality as possible while not necessarily logged in. This meant understanding what actions were possible in each state, at each stage of the process.
o3. Visual Design
Colour exploration
Evolve's branding included a minimal colour scheme that consisted of a single bright orange against black. We explored many different aesthetic options based on this, keeping in particular mind, how maps and GPS tracking features would look in different colour schemes.
Light and dark mode
While exploring different colour options, we identified that some areas of the app were more functional, while others were intended to be more attractive. As a result of this finding, we decided to design the app in two modes, a light and dark mode to appeal to both aspects.
The light mode felt more functional, and enabled easier tracking of routes, while the dark mode looked sleeker and felt more aligned with the overall image of the brand.
Colour scheme
#FB613B
#000000
#474747
o4. Gamification
To encourage continued use of the app (and the boards) we decided to utilise gamification techniques in the design. We used the Bartle framework to plan out the features, which states that there are four main player types. These are:
- Achievers: players that enjoy gaining achievements such as badges and rewards.
- Explorers: players that prefer to explore their environment rather than work for achievements
- Socialisers: players that enjoy the social aspect of games. They prefer engaging with other players.
- Killers: players that take joy from killing or harming other players.
We decided to primarily target Achievers and Explorers within the app by implementing a leaderboard and badge system that would reward riders for riding a certain number of kilometres (thereby rewarding for exploring). We implemented a Variable Ratio Schedule for the badge intervals to encourage continued engagement with the reward system. A variable ratio schedule dictates that the distance between rewards must vary so that players cannot be sure when the next reward will come.
Badges were named after real-world locations or distances to create a sense of familiarity and realistic understanding of the achievement. Each badge incorporates an abstracted element from these real-world locations within the design. The full set of badges is below:
o5. The Outcome
My rides
The home screen consists of a list of all rides completed. Riders can swipe through to past months or view rides in an 'all-time' view.
Track a ride
Riders can track a ride within the app. The km's ridden during any rides tracked contribute to their leaderboard rank.
Share a ride
Riders can share a ride tracked, or a past ride completed to a shared map of rides that any other rider can then follow along.
View another user's ride
View a route tracked by another user from the map showing all shared rides.
Leaderboard
The leaderboard is ranked by total kilometres ridden and can be filtered by country or board type.
Customise setting
The Customise feature allows riders to increase the initial acceleration of their board via a Bluetooth connection.