Brief
OneXP & Challenge
OneXp is an app enabling coaches of all sports to manage their clients with booking, time management, communication, accounting and teaching features. Our challenge was to design a fitting brand for the app, including name and visual identity, and then design the app starting from low fidelity wireframes and prototypes progressing towards the final design of the product.
As an additional process to this project we were also tasked with creating a promotional video to showcase the variety of features the app provides..
Objectives
- Design a fitting brand
- Design the app
- Create a promotional video
Solution
OneXP Branding
The branding process consisted of two parts – naming and visual identity.
LOGOS
Naming Process:
The naming process began with simple rounds of word association through shared brainstorming. We then chunk names together, categories and prioritise them. With this project we explored using words associated with concept of improving; teams, platforms and performance. We combined this with exploring gaming terms, what URLs were available for our strongest routes, before presenting them to the client. Out of the suggestions provided, the client were confidently drawn to ‘OneXp’.
Visual Identity:
When It came to the visual identities of OneXp, we wanted to keep it fresh and modern but also wanted to portray the idea of movement and energy due to this being a sports brand. These ideas were portrayed by using an italicised text to give a sense of forward momentum.
When creating an identity for the client, we also provided graphical elements as a style language and showed them the brand in situ – as this was an app, we showed mock ups of how it could look as ‘app of the day’ on the App Store and on social media.
TYPOGRAPHY
App Design Process:
Working with the client, we devised a set of user stories that set out a list of features and functions that the specific users of the app were able to carry out. The two user groups were the coach (this influenced the coach facing part of the app) and the client (which influenced the client facing side of the app).
Based on the features and functions identified from the user stories, we created wireframes to map out the different steps in performing these objectives. This included the main functionalities, the dashboard/ home feed, the process of booking, messaging aspects, calendars, lessons and a bespoke ‘video editing’ feature. We also made the wireframes into a clickable prototype so the user could carry out these functions, which allowed us the opportunity to further observe how they used it and identify any areas where improvements to the journey were needed.
Following the wireframing phase and ensuring the app was easily navigable, we then moved onto the high fidelity designs. This is the point in the design process where we started to add the branding and brand language to the app, therefore making it appear how the final product would appear. These designs were also linked together and made into a prototype.
Promotional Video
An additional part of this project was to create a promotional video – more specifically, an informational trailer that was to be released with the launch of the app. The process of creating this video involved storyboarding, to ensure the message and the narrative of the video were aligned with the clients intentions, which in this case was mainly to showcase all the features of the app. After the client agreed on the storyboard we moved onto creating a rough edit before further refining the video, including making any required changes and considerations to timings and transitions.
The video used a mix of stock footage of people doing sports, along with screens from the app that were tracked to a phone screen using after effects. The screen tracking was a particularly tricky part of the video – the desired effect was achieved by using the Boris FX Mocha plugin. This allowed us to pinpoint the corner of the animated phone video and then track the corners of the phone for the duration of the video. The screen recording from the app was then projected onto the corner pins and the screen and allowed us to record the movements with the phone as if it’s tracking what was occurring on the screen.
The Result
We started with an initial brief from the client detailing their desired outcomes and objectives. We made time to speak with the client directly to support the process of establishing their requirements and asking for further details to help with the naming and visual identity aspects of the project.
Through careful and considered collaboration with our client, we were able to provide them with an appropriate name as well as a striking visual identity that would help them to establish their presence within this market.
From the initial discussions and wireframes all the way to high fidelity designs and usable prototypes, we were able to showcase an engaging, clear and dynamic app platform that highlighted the multiple features and functions that they intended to provide to users of the platform.
By allowing the client the opportunity to provide feedback and refine the designs at key milestones, as well as allowing them to use the prototype to help and identify any further opportunities for improvement to the user experience, we were able to successfully deliver on the desired outcomes of this project.
From an internal perspective, we were able to draw upon our collective knowledge and experience to provide the client with a powerful name and striking visual identity. It was also a fantastic opportunity for us to flex our skills when creating the promotional video that was used to showcase the plethora of features the app platform provides to users. We were able to use this as an opportunity to push the boundaries and gain further experience with using new plugins in order to achieve the desired effects.