Client:
Torrens Metaverse
My Role:
UX & UI Design
Type of Work:
Avatar System Design
Skip to:
1. The Problem
2. Personas & Journey Maps
3. Concept
4. User Flows
5. Wireframing
6. Prototype
7. Feedback
8. Challenges Faced
9. Conclusion
The task: design an avatar customisation system for the Torrens Metaverse, to be used by students, staff and other members of the Torrens University community.
My goal was to develop an exciting avatar customisation experience that enhances user’s connectivity, student engagement and enjoyment of the Torrens Metaverse experience. I went for a gaming-inspired take on avatar customisation, creating a user experience that connects with the 18-24 year old target audience and offers something unique.
How might we… increase connectivity, engagement and enjoyment of the Torrens Metaverse through an avatar system?
1. The Problem
With Torrens planning on launching their own Metaverse soon, an avatar customisation system would be needed. Whilst students at the University have generally good engagement, it could be improved.
The problem therefore was a need to improve student engagement and involvement levels, ideally starting out in the Metaverse but flowing on to the university as whole, ultimately improving study engagement and student drive.
The challenge however, would be creating a system that both engaged the younger target audience, while still linking to the concept of study.
With the target audience likely to be students of the University (i.e. 18-24 year olds), I wanted to aim for something that this audience would relate to more strongly.
2. Personas & Journey Maps
My next step was – through analysing the problem and the target audience – to create user personas and their user journeys. My personas helped to create realistic reflections of the audience, what drives them, and their wants and needs from this kind of avatar customisation system. Below is a sample of a few of the personas and their user journeys I worked on.
3. Concept
My concept – titled ‘Design Your Study Hero’ – gives a fresh spin on the classic fantasy avatar system.
The target audience of young people are generally used to avatar systems, especially those found in gaming, but my aim was to create something unique that they won’t have expected in this context.
A few of the core features I conceptualised are:
- Vast customisations with inspiration from gaming and fantasy worlds. Is your Study Hero a vibrant pink-haired mage, or a gritty armoured warrior?
- Inclusivity. Users can pick from a huge array of options for skin tone, eye colour, hair colour and more.
- Outfit customisation. Going beyond choosing a shirt colour for your avatar, this customisation system offers fun fantasy style choices based on their chose character, like armour, capes and helms.
- Earn XP. My video-game inspired system takes things a step further. Users’s avatars have their own XP meter, which is filled over time via progress in their study course and special achievements. It’s another way to inspire students to progress and drive to do well.
- Faculty shields. Users can unlock shields to match their course – for example, a Business student can unlock a Business-specific shield once passing a certain point in their course. Students that see other studnets in the Metaverse holding the same shield will be a little more inclined to converse with their fellow faculty member.
4. User Flows
With the concept finalised, I began to consider how the user flows for this idea might look. Below are a few samples for different types of users in the avatar system, based on their personas and what features they would be likely to access.
5. Wireframing
With some draft user flows down pat, I could start on designing the bare bones of the app. Wireframing allowed me to refine the structure and start to develop the user experience, at a low-fidelity level.
View the interactive wireframe here.
6. Prototype
The final high-res design uses fantasy colours like bold blues and purples, with touches of dark grey and bold headings for a slick feel.
The system ushers the user through the avatar builder, moving them through a series of simple prompts, like choosing their build, and equipping some gear. The user can click gear to preview it on their character before choosing to buy, and gear can either be unlocked or locked if it isn’t yet accessible.
Click here to interact with the prototype yourself.
7. Feedback
Although I was unable to do a structured usability testing session for this project, I sought feedback from several individuals to discover any roadblocks, or what could be changed to improve the user experience.
Design Recommendations
Constructive feedback from those I asked to test the experience helped me to make some changes to the design to improve the UX. Below are a couple of the changes made based on their feedback.
A 3D Preview button
To indicate that users can preview the gear in a 3D view before purchasing or equipping, a ‘3D View’ button was added to sit within each item of gear in the system.
Showcasing equipped gear on the character
To visualise what happens when the user equips gear, I added a visualisation to the prototype. When the user equips a new piece of gear, it displays on the avatar straight away.
Adding a Filter
After receiving some feedback that a filter would be helpful, especially for multiple items of gear in the store, I added one to the prototype. The user can now filter the gear including sorting by type or unlocked gear.
Adding a Share button
Given the strong community element of the Metaverse, a Share button needed to be added to the Avatar homepage to ensure the user could share their avatar anytime.
8. Challenges Faced
The biggest challenge for me was this was the first time I had designed an avatar customisation system, and despite using so many of these kinds of avatar systems throughout my life, it was a completely new style of project for me to work on.
Luckily, my exposure to countless avatar customisation systems over the years, through gaming and various other tech, gave me the insight into what I know works and what doesn’t. This enabled me to construct the design and UX to use tried-and-tested features from the start, and omit things that I knew wouldn’t function well.
Another challenge was ensuring that this system could be gaming-inspired, but also engage the portion of the target market that wasn’t familiar with gaming. To do this, I kept the fantasy-style elements simple and easy to understand, and paired them with clear calls to action and a clear process for moving through the interface.
9. Conclusion
The goal of Design Your Study Hero is to engage students, and give them an exciting start in the Torrens Metaverse. Going deeper though, it aims to increase student connectivity and study engagement. By opting for a fantasy-inspired style system that is also very modern, Design Your Study Hero aligns with the target audience and is ready to go into the next phase to help students design their very own hero.