XReality Acadmey
E-learning Website Redesign
XReality Academy is an online educational program that houses Extended Reality (XR) courses. XR is a term that includes Augmented Reality (AR), Virtual Reality (VR), and Mixed Reality (MR). During my internship at Hummingbirdsday, my primary responsibility was to research, redesign, and improve the XReality website.
The challenge
Although the official website had already been launched and was promoting online classes, the content still needed to be polished. The main goal was to improve content organization and website design, which would increase the signup rate for courses.
My role
-
UI/UX Design
-
User Research
-
Prototyping
-
User Testing
-
Project Management
Tools
-
Figma
-
Whimsical
-
Adobe Photoshop
-
Dovetail
-
Asana
Project timeline
Two weeks (Feb 2021)
Project under
Hummingbirdsday
Identified the problems
I started the project by completing extensive background research. Once I was informed on the issues, I carried out competitive research to discover trends and common issues in XR-related online learning.
Background research
Growing demands in XR
The demand for both e-learning courses and XR technology is expected to grow in the next five years. The recent COVID-19 pandemic has contributed to this growing market.
Lacking social interaction
The e-learning setting is lacking social interaction. An in-person environment recreates this experience for online learners.
Low completion rates
Users of self-paced online courses have low completion rates.
Competitive research
Missing mentor program
Although popular competitors offer various courses and have a large user base, they do not usually provide mentor programs.
No social activities
Immersive social group learning is not easily achievable for many popular platforms.
User research
Prior to developing their website, the XReality Academy team and I conducted interviews to help understand the typical user’s needs. The results of the interviews and my marketing research showed that typical online learners:
-
are professionals between 22-44 years old
-
aim to improve or add skills for their current jobs or to use this knowledge to seek a new position
-
feel frustrated that the community support for their learning experience is lacking
-
find it difficult to motivate themselves to complete online courses
User persona
Based on the research, I created the persona, Julie, to help the team understand the primary user's pain points and needs.
Julie is a tech-savvy AR beginner. She aims to hone her skills to secure a new position. Although she likes the flexibility that online courses can offer, she often feels that community support is lacking in her current online learning experience. She has difficulty motivating herself to complete a full online course.
I used Julie as a reference point while designing the website, which provided support for my decisions.
Tested the existing website
I was aware that the website’s organization still needed to be improved from the first launch. I wanted to collect more user feedback to identify the product’s potential problems. I recruited four participants for 1-on-1 remote user testing through 20-minute zoom calls. In each session, I observed how users navigated through the website and recorded their reactions.
Participants
According to the research findings, I recruited interviewees:
-
between 22-44 years old
-
with online learning experience
-
through slack online student interest groups
Synthesized the data
I imported all videos to Dovetail (the user testing service) to generate scripts and tag important phrases with keywords. I then organized and interpreted the qualitative data.
Findings
The course and mentor content were the two main elements users relied on to evaluate the website’s credibility. However, all participants mentioned that this information was not communicated to them clearly.
1. Users were not sure about what was included in the courses.
2. Users wanted to see more detail in a mentor’s profile.
Other issues
-
Self-advertising newsletter appeared right away and was repeated twice on the same page.
-
The image quality was poor.
User stories
After identifying the problems, I created the following user stories to focus on communicating course and mentor details:
-
As an online learner, I want to understand the course content, duration, benefit, and price, so that I can make a well-informed commitment.
-
As an online learner, I want to see more information concerning their potential mentor’s past projects, industries, and affiliated companies, so that I can ensure my interests match my mentor’s expertise.
-
As an online learner, I want to see testimonials, so that I can gain trust in a new e-learning program.
Asked 'how might we solve the problems stated in the user stories?'
After identifying the problems, I realized that the issues were mainly related to the presentation of the information on the website. I decided to approach the problems by first reviewing the information architecture. After I improved the sitemap, I then focused on problems on each page.
Information architecture
I started with re-examining the sitemap to identify the problems on each page:
Old sitemap
Problem: neither the courses or mentorship page contained a high-level introduction
The old website lacked an overall description of courses and mentorship opportunities. It was hard to grasp what the Academy can offer without a detailed overview of their services.
Solution: added overview pages
To provide a holistic view of the course and mentorship structure, I added course and mentor-specific overview pages.
In addition, I renamed the ‘Learn’ page to ‘Free Resources’ to distinguish the free content from the paid course. A ‘Help’ tab was also added to the map.
Updated sitemap
Redesigned the webpage
After adjusting the architecture of the site, I dived deeper into each webpage. I sketched out my ideas and experimented with different information presentations. For this project, I limited my scope to the home, courses, and mentor pages.
Redesigned home page
Issues with the old home page:
Added the course category, benefits, and user review sections:
Course categories
I listed three primary course categories to align with the new sitemap. Presenting information in groups of three with a clear visual hierarchy helps readers absorb the information quickly.
Benefits
To convey the value of XReality’s courses, I listed program benefits and added their descriptions below.
Student reviews
I added student testimonials to demonstrate the academy’s credibility. My research reflected that recommendations from existing users were crucial for establishing trust in the product.
Added a course overview page
This page contained a brief summary of all course content:
The navigation bar provides links to three kinds of courses
This section of the webpage categorizes the course and gives a broad overview of each option. The navigation bar prevents long scrolling by providing quick access to content below.
Course descriptions
I included keyword tags underneath the course name to facilitate scanning. Course-level icons were another addition that can help users determine if the content is suitable for them.
Future courses
The ‘coming soon’ message and icons serve as a teaser for future content. I wanted to spark users’ interests to sign up for newsletters and receive course updates.
Redesigned gamification course page
Users have to read in a criss-cross manner. The reading direction is not conventional, so it takes longer for users to read.
Experimented with different visual elements:
Added a mentor profile page
Personality and work details included in mentor profiles
Mentor descriptions
I reused the tag element so users can scan through keywords pertaining to the mentor's expertise.
My research showed that mentor personality and past experience can help users determine whether a mentor is a good match for them. To present these two elements, I added space for a self-intro video and social media links.
Pricing
The program seems more credible when price information can be easily found on the page. I added the price tag to the top of the page to meet the user’s needs.
Developed my ideas on medium fidelity wireframes
I created multiple screens to map task flow through the website, from entering to signing up. I wanted to make sure that the website was consistent in terms of presentation and process flow.
The wireframe was an impactful visual aid to explain my design ideas to the founder and engineer. I also made sure that the interactions were feasible for the engineer to build.
Designed the user interface: adding a futuristic, informative, and modern touch
Branding
The logo, font, and color palette had been designed and adapted by the team. To make sure the visuals were consistent, I expanded the design system by adding branded keywords, image styles, icons, and buttons.
I explored more styling that matched the brand keywords of futuristic, informative, and modern. I replaced the original icons with ones containing fewer lines to emphasize a modern approach.
The sci-fi TV series ‘Humans’ and ‘Westworld’ were two of my inspirations for the various gradient styles I implemented on the hero section. I explored dark themes that are often used to convey modernism and futurism.
Different iterations for the hero section
Although the dark theme can be associated with the emotion related to the aforementioned keywords, it causes more eye strain. The fatigue occurs especially when scrolling down a long page. I eventually proposed the use of white and light grey as the main background colors.
Iteration of the user interface
Validated with users
I created a prototype on Figma, then recruited five participants online to verify that the website communicated the intended messages. I also focused on testing the task flow I developed earlier, recording their behavior to identify areas of improvement in web page navigation. Ultimately, users should have been able to easily find their way through the course, mentor, and sign-up webpages.
Feedback
I received positive feedback from all users. The website seems easy to understand, clean, and welcoming. Users reported that they could grasp the course and mentor page quickly. Images, icons and especially videos also help the users absorb information. I also collected few issues from the sessions:
The wins:
-
In general, the homepage conveyed the intended information well, and users could navigate to see the courses, mentors, and signup pages successfully.
-
The design was clean, welcoming, and informative.
-
Users reported that they could grasp the course and mentor information with ease. The images, icons, and short intro videos help the users absorb information quickly.
Potential issues:
-
The term “Mentorship” can be confusing.
-
The content within the webpage labeled ‘software’ was not represented well by the icon.
-
The hero background image in the background doesn’t seem related to the course.
-
Icons and sectioning looked slightly disproportionate to the page.
Improvements
After reviewing the feedback, I was able to fix the wording, icons, and images to improve the content. I then considered the responsiveness of the website, making sure that the layout would remain consistent on a mobile device.
Menu
Home Page
Course Overview
Individual Course
Mentor Overview
Mentor Profile
Delivered the experience
Home page
Users like Julie can glance through the course categories with ease to find the topics they are interested in. The course benefits and testimonials also boost the credibility of the site. She is excited to find mentor programs and virtual student groups to create a more ideal online learning experience.
Courses
The course overview page showcases all available topics. Each card links to the course detail page. It lists crucial elements - including the topics, time requirement, course level, and price - which users need to determine whether the courses are suitable.
Course Overiew
Individual Course Page
Mentors
Through the mentor overview page, users can access individual profiles to find out more about their potential mentor. In addition to background information and social media links, the short video intro helps users connect with the mentor's personality.
Mentor Overview
Mentor Individual Profile Page
Final thoughts
Reflection
Having a style guide helped me make design decisions
I realized having a style guide is crucial throughout the iteration process. Finding an ideal stock image for the hero section required ample thought. Each visual needs to match with the color theme, brand keywords, and company objectives. When I couldn't decide on the best solution, referring back to the style tile helped me choose the ideal layout and design.
Learned methods that can help users absorb information quickly
It was easy to overburden the user with an excess of detailed information. However, I realized users will lose their interest in the website if they cannot get the information they need in a succinct way.
The process of designing this website allowed me to discover useful methods to help users absorb information:
-
Breaking down long messages and organizing similar information into groups
-
Presenting information in the form of short videos
-
Guiding users to read in a natural direction
I want to keep these methods in mind in my future projects to avoid the same issues.
Benefits of collaboration
I was lucky to work with the founder and the rest of the team during my internship. I learned so much from each of them, and the environment we created together made the development process pleasant and enjoyable. By the end of my internship, I was proud to have contributed to the evolution of the XReality website.
