XPERTISE
TRACKING TAKEN TO THE NEXT LEVEL
Creating a better and healthier future for gamers worldwide
Project Type: User Research, Brand Creation, Graphic Design
Role: UX/UI Designer & Research, Brand Designer
Industry: Gaming, Health & Wellness
Introduction
Problem Statement
Teenagers and young adults struggle to maintain a healthy balance between the amount of hours they spend playing games, and the amount of time they spend doing physical exercise. This can be caused in many cases due to video game addiction, incorrect task prioritization or a belief that exercise lacks importance. Solving this issue would have a net a positive impact sociatal impact, by helping people create healthy physical habits, while still allowing them to indulge in their hobby without having to quit.
Proposed Solution
XPertise: An application that can track exercising and physical activity, in conjunction with a user’s gaming activity. The app will let the user know when they haven’t exercised in a while, or when they have gamed too much within a singular day, in hopes that they are able to follow a more healthy lifestyle while still having fun.
The final goal within this project to have a multi-pupose tracking app, made for people who wish to improve the balance between exercise and gaming in their lives. Statistics will always be made available for players, with rewards given to efforts to attain consistency with exercise, as well as gaming improvements.
User & Task Flow
These diagrams were created to further solidify certain design aspects regarding the app’s structure. The user flow was there to illustrate how a user would go about navigating the app’s pages, and the task flow was executed to make sure there were no incoherent sections.
Solution Sketches
To get the project started, I developed some quick sketches that would allow me to have a better vision of what to make when I get to the low-fidelity wireframes. Mostly going for shapes, positioning and how the tabs would work together.
Wireframes
Following the sketches, low-fidelity wireframes were made to guide what the app structure would look like in visual form.
High-Fidelity Wireframes
From the basic sketches and low-fidelity wireframes, high-fidelity wireframes were created. These include a selection of boarding page, the user profile image, as well as the other tabs planned for tracking, as well as the logo and a placeholder name.
Overall, I’m quite satisfied with this initial attempt, though it still lacks some polish for the logo and overall brand image. Unfortunately, I’m uncertain if it fully addresses the problem identified at the beginning of this study. So, the next step will be to execute prototype testing with these wireframes, to uncover pain points and identify opportunities for improvement for Saltus.
Usability Testing
This prototype test was direct and to the point in regards to the feedback, gathering small points of weakness and potential improvement in the current wireframes. The sign up and login process will remain the same, and within the next stages the small changes will be applied to the prototype, in hopes to create the best solution to the problem statement made originally. There will be major revisions such as better colors and an improvement to the brand design, as well smaller details being fixed within the separate pages. Overall, the prototype was well received and the info gathered will certainly be used to further develop the application in both small and big ways
Problems Arise
The majority of the data gathered within this case study was qualitative, asking questions that could point the project in the right direction. Here are the primary problems that were consistantly brought up by the respondants:
“The proportions of the app and it's icons are off”
“I want to be able to change exercise”
“The titles feel too big, it's not nice to look at”
“Can I pick the game that the app will focus on?”
Unfortunately, a lot of the app’s proportions look inconsistant and incorrect. The main next step for improvement for the app will be to fix the titles, icons and how things look in comparison to each other. Updates to the logo and branding will also be done.
I realized after creating these wireframes that there is no distinction on where users can pick the exercise and game they are focusing on, so that will be something that I will prioritize in the last round of wireframes.
Project Development
New Logo and Name
A new logo was created, and a non-placeholder name introduced: XPertise. The name is a play on words that mixes expertise, meaning “expert skill or knowledge in a particular field”, and XP, a shorthand word for experience in a lot of videos. In combination, the new name means “to gain expert skill and knowledge within the field of gaming”. To go along with the new name, a revised logo was made to represent the project, with an arrow going up to represent a video game’s “level-up” system.
New Wireframes
With the first usability test done, and all the feedback gathered, I created a new set of high-fidelity wireframes that had their focus on making the proportions of the app much more legible, clean and aesthetic. On top of that, add clarity on the places that the user could change their preffered exercise and gaming choices.
What is the future of Xpertise?
Usability Test
Doing yet another round of usability testing could provide a lot of key information into the website’s clarity, especially now that a website version was developed. Beyond that, it is key to check if the previously collected feedback was implemented successfully.
Specific Changes
In future versions I would likely give a bit more attention to the secondary tabs like the shop tab, adding a currancy and ways to earn it, and for the communitu tab, perhaps creating a mini social media system for users to utilize amidst the app.
Learning Outcomes
Prioritizing proportions and overall asthetic can have tremendous positive effects on overall user experience. Sometimes less is more, and this refers to the big titles and graphics I had previously created which became sleek graphics, and were therefore recieved in a positive light afterwards.
READ NEXT
