Group-181

XELEVATE

Designing a comprehensive VR learning platform.

What has my role during the last 2 years of this project?

In the early stages of the platform I was in charge of project managing our first ever product launch with H&M. I was also responsible of designing the UX/UI of the platform. I collaborated with developers and CTO on the UX. I helped translate the H&M brand into training materials on our platform and ideated and finalized the visuals and imagery for the educational experience. I also helped craft some of learning experience and worked closely with the production team of the 360° video content. 

Felix then joined the team to be the Head of Xelevate who took on the project management of inconming Xelevate briefs. This allowed me to continue translating company brands into our VR educational platform. I created a range of products using our platform as a base for existing and new clients.

I then transitioned into my new role as Head of Design to begin establishing a solid brand for our Xelevate platform. More importantly I pushed for a 2.0 version of our user experience. I collected the lessons learnt from our past projects and am translating these into the UX/UI of the 2.0 version of the platform.  

 

TEAM:

Emma Ridderstad - CEO

Patrik Buckau - CTO

Felix Englundh - Head of Xelevate

Erik Lingren - Developer Menu 1.0

Misha Barabanov - Developer Menu 2.0

Jakob Ulvenfalk - Developer

Vadim Tihonyuk - Developer

Kalle Nyberg - Developer

Lina Clausen - Digital Marketing Designer

TOOLS:

Unity, Figma, Maya, Pixelmator, Inkscape, DSLR Camera... 

 

Icons

PLATFORM 1.0 "VR Academy": Iconography created for different 360° content in our first edition of the platform

 

INDEX 

Platform Edition 1.0 known as "VR Academy" 

  • Ideating Activites & Tools - Timeline.
  • Client Platform Customization.
  • 2D vs 3D Illustrations

Platform Edition 2.0 known as "Xelevate" (Comming Soon)

  • What is Xelevate? Defining our product and co-naming. 
  • Some learnings on creating UI for development in Unity


SMALLER-1

PLATFORM 1.0 "VR Academy" - UX and UI design of the old platform incorporating some elements of the new brand.

 

PLATFORM EDITION 1.0 

 

Competing priorities of project managing and UX/UI design meant some of the design decisions where rushed. It was the first time I had created anything like this and luckily I worked with wonderful developers and CTO who discussed and reasoned with my work. 

During extra hours I found time to create some branding for our up and coming platform. Using words with illustrations to capture what the platform was and would become. At the time we did not have the UX/UI for our key activities. Even though it was a little early at this stage and I ended up changing the brand later on; it gained us a few more clients and supported work on establishing a cohesive product.


I'll start with highlighting some aspects of Platform 1.0  "VR Academy"and what I learnt for the second edition now known as “Xelevate”

boom
Group-158

PLATFORM 1.0 "VR Academy" - Early branding deck I illustrated and wrote to bring the product alive.

IDEATING ACTIVITIES & TOOLS - TIMELINE

Working on the ideating the learning activitieswas the most fun. I think there are two reasons for this. One they involved a lot of debating with other team members and the second was that they involved prototyping. Timeline was an activitiy we had promised to our client H&M The concept was simple it basically involved placing different cards in the right order on a timeline, but from a UX and development perspective this is not so straightforward. Some questions we asked ourselves...

Timeline2.1

We were under time pressure to deliver however the more we discussed the more complicated it seemed. I introduced a paper prototype and asked several team members to place the steps in order observing how they used the cards & what felt comfortable to them. I then reflected and finally had an idea which looking back now seems so obvious.

ezgif.com-gif-maker

Users would only be able to interact with the first step on the Timeline and drag & drop cards until they found the correct one. Every time they drag & droped an incorrect card they would receive feedback and the card would return to the card pile. If they placed the correct card, the timeline would shift to the left and they could search for the card belonging to the second step and so on. This solution was optimal for both the learners and developers. It has been a really popular activity with clients. Here you can see an example of what it looked like in the end with illustrations I made. 


Layer-2-2

PLATFORM CUSTOMIZATION 

I was inspired the neutral UI of the SPBTV cross-platform OTT/IPTV solution. The elements of this platform were customisable to adapt to client branding needs. I hoped to achieve the same thing for this VR platform and we have used it to build a diverse range of branded products. Images, colours and fonts could be changed to suit the clients' brandbook. I am in charge of establishing the look and feel of each of the products we build on the platform. Here is an example of what some elements of the Postnord VR training programme looked like.

postnord-group-1

2D VS 3D ILLUSTRATIONS

As my confidence in 3D work I took on the challenge of creating all the content for Postnord in 3D. I made 360° renders for the menu and activity background images. We took the decision to use 3D illustrations for all future platform imagery. All of my art colleagues are 3D artists so it made sense for us as a team. 3D artwork lends itself really nicely to VR spaces and in the future we may hope to have actual 3D objects instead of 2D renders.

varubrevTimeline-3