The client.

OSET Bikes Ltd.

"Inspiring the next generation of riders." OSET are world leaders in electric dirt, trials and motocross motorcycles for kids

Kids Dirt Bikes | Electric Trial Motorcycles | Beginner Bikes | Electric Dirt Bikes | Electric Motorcycles

Our bikes are recognised globally as the best beginner bikes for children to learn and improve their motorbike skills and being electric they have no hot parts, require no petrol, produce no fumes and are virtually silent, meaning riders can use them everyday in places other bikes cannot go.

The brief.

"OSET bikes are a world leading electric trial bike company and are looking for some redesign the user interface on their new motorbikes.

OSET bikes are completely electric and offer the rider quite different experience to conventional motorbikes. As such the new UI should be familiar to motorbike rider but OSET is keen to make a feature of the additional controls available. "

Analysing the problem space.

The project started by building an understanding of the company’s products, aesthetic and brand values. This was done by investigating the company’s website and product range. The needs of the user were investigated by researching relevant Facebook groups, and social media feeds of the trial bike sub-culture.

The original design

The original design featured a physical controller embedded in the top of the bike frame, below the handlebars. This controller featured individual dials to set the power of the engine, top speed and throttle response.

Following OSET's switch to electric power, the bikes were now capable of additional levels of control which OSET wished to make use of but were restricted by the current design.
‍
OSET were looking to change this by replacing the controller with a digital screen accompanied with selection buttons.

Design direction

The following visual aids were used to guide the initial design discussions with the project stakeholders.

Mood board of OSET products and similar design styles

A range of competitor products with varying solutions

Mood boards were a quick way to prove to the company that I understood the values and visual aesthetic of their brand as well as the general design direction of the brief which they had presented to me. These would be referred to throughout the design process to ensure I was on track.

Competitor products were investigated to identify existing solutions that were potentially useful and to gain inspiration for other ideas. These included controllers for motorcycles and electric bicycles, as well as alternative control schemes.

Target audience

Anna Smith

“My dad bought me a bike for my birthday. It's a bit scary. I don't know how it works but my brother is really really good at it. Dad told me not to touch the controls yet”

Age : 4

Archetype: Beginner

Experience goals

• To feel safe on the bike
• To not feel overwhelmed by information
• To experience natural progression through the bike range as he grows to larger, more powerful bikes

Experience goals

• To fine-tune the bike to peak performance
• To not have to think about the settings whilst riding
• To make adjustments quickly between rounds / races

Daniel Smith

“I like to take part in competition trails, The slightest difference in engine power, throttle response or torque can be the difference between winning and losing. Sometimes, just for a laugh, I'll put all the settings up as high as they will go”

Age : 15

Archetype: Competitive Racer

ISO Guidelines and URS development

There were gaps in the brief where the company's UX knowledge fell short. These gaps were filled by extensive research into the relevant BSI or ISO product requirements and guidelines.

The documents produced worked through each guideline one at a time explaining how this guideline would affect the final product. Using official standards reinforced the company's trust in me to deliver a market quality solution.

Initial development.
‍

Physical integration

Initial ideas
‍A wide range of product ideas for the scale, location and interaction of the design. These were presented to the team to ensure that I had interpreted the brief correctly. They were also useful to discover any product preferences that may have been missed out of the initial brief and identify avenues for future development to the companies liking.

Interface design.

Information architecture
To begin, I conducted a frequency of use study on the various settings that could be changed on the bike. I also collected the standard method of adjustment for specific settings.

Mood board of OSET products and similar design styles

Using the results of the study I could decide upon a hierarchy of importance to begin building the information architecture. The site map was designed for use with a three button navigation system, (left - right - enter).  With the number of settings required, and the limited control available, building this system was very complicated.

The site map gave priority access to the most commonly used settings and hid infrequently used settings behind extra menus to reduce clutter in the system. It also utilised pre-sets of commonly used setting combinations, such as an eco mode, and a full power mode. By tying additional requested features such as a timer and battery power tracker to the pre-sets in which they would most likely be used, I reduced the number of settings to cycle through.

Pre-set management user flows

Wireframes
‍The frequency of use and user flow diagrams were used in conjunction with the font size test results to create a number of wireframe designs. These wireframes were tested in environment using the previously devised test rig, mounted to the bike.

Wireframe designs

Hi-fidelity prototyping
After deciding upon a final design I fully rendered the system in Adobe XD. This render included all of the option menus, interactions and transition animations to give the client a full understanding of the product.

Fully interactive prototype

PIVOT - An evolving brief.

The initial prototype was pitched to the company stakeholders and team leaders, many of whom are regular users of the bike product. They were happy with the results, produced in exact accordance with the brief. However, now that they had seen their ideal product in use, they had their doubts.

After a discussion and some design exercises to re-explore the brief, together we decided that this level of setting management was unnecessary and not cost-effective. We decided to PIVOT the design.

A membrane design.

Redesign.

The change in system required a complete redesign and the available settings had to be limited to increase usability with the limited available space. The new system required the minimum following settings.

Design reviews.

Hosting a design review with the engineering team

Ideas meetings were conducted with design teams to assess feasibility of designs. Major design decisions were pitched and worked through with electronics and manufacture designers to ensure the designs were suitable for the final product.  This process was conducted once a month.

The design reviews produced 3 favourite button layouts.
‍
Each design involving the 3 Main settings, 3 peripheral settings and a power bar. White spaces represent LED indicators

Layout 1

Layout 2

Layout 3

Branding application
I applied the company branding in 3 different design styles to produce 24 variations of the design for discussion at the next design review. I took a number of notes based on the client's opinions and combined the best ideas into a final solution.

Pin-lock system.

The system must not be operable by children unless adult‘s permission is given via the release of a two-stage lock system.

To achieve this I designed a PIN-lock system that utilised the already present buttons an led lights for code entry. When the user holds don't the lock button at the base the key settings buttons become PIN keys.

I produced a story board to fully explain the system to the client. I accompanied this storyboard with a flow diagram explaining functionality of product interactions to the programmers of the new system.

Final design.

After making a few tweaks and creating a functional locking system, the design team were happy with the product. This is the final result.

Functional design decisions.

Aesthetic Design Decisions.

Background Colour

The colour black was used as a background for the design, it is easy on the eye, highlights the appropriate areas and it fits well with the design of the bike.
‍
“Colours with high saturation (and bright white) should be avoided as background colours.”

BS ENISO 9241-12:1999

The black background is also well suited to the screen printing process common in membrane production as it covers the expected bleed.
‍
“Wherever possible hide colour bleeds or joins beneath a border or lineof significantly darker tone, allowing 0.25mm to 0.5mm for bleed.”

Aesthetic Design

This design makes use of the surrounding space and maintains the symmetry of the design. The use of two battery bars either side of the important buttons gives them a larger presence in the design.

The coloured decals keep the battery bars separate from the changeable settings so that they do not detract from the importance of the buttons.Instead they guide they eye towards the main 3 function buttons.

Colour Choice

The design of the system functions with only 5 colours, only one of which has a high vibrancy to avoid distraction.
‍
“When a rapid visual search based on colour discrimination is required, no more than six colours should be used”

BS EN ISO 9241-303:2011

Design Optimisation.

Optimised Contrast for Visibility

The Design utilises varying vibrancy and high contrast to accommodate for use in low light environments or for those with colour blindness.
‍
“For clear visibility, displays should be designed with strong contrast between the background colour and display colour. For the sake of those with colour blindness, and for visibility in poor light, displays that rely only on colour for distinctions are to be avoided.”

PDIEC TR 61997:2001¬¬

Design Scalability

During design scalability was a continual consideration. The design of the keypad was kept simple and  symmetrical so that it would scale up or down and maintain the visual and functional design
‍
“Controls should be presented and should function in a consistent manner for all media where they are available.”

BS EN ISO14915-2:2003

Stakeloder pitch.