OVERVIEW
Too much visual noise without a clear direction
The Product
Spirit Elf is a satirical, interactive online game where players defeat villains and unlock stories based on its characters.
The Problem
The original website lacked clear visual hierarchy with competing visuals, leaving users overwhelmed and unsure of where to look first.
The Role
As the UX Design Lead, I collaborated closely with the founder, back-end engineers, game developers, and other teams to establish the site's UX and visual foundation.
DEFINE
How can I simplify without sacrificing the experience?
After auditing the website, I noticed that the home page was overwhelming, which made the user flow confusing. but the founder still wanted to immerse the users into the Spirit Elves' story, so I focused on solving 3 problems:
- use and preserve the site's existing brand identity
- streamline the user flow, but still allow room for exploration
- make the experience feel cohesive across different pages
IDEATE
Turning the founder's vision into an intuitive experience
I translated these problems into 3 design approaches:
1.
refine imagery to reduce visual clutter while maintaining an immersive experience
2.
set up a consistent visual system across pages and components
3.
establishing clear sections for the CTA, descriptions, and titles
PROTOTYPE
Clarifying the Spirit Elf Universe
Focusing on the first iteration of the homepage, then expanding to other key pages helped me translate the updated flows into consistent, high-fidelity prototypes to visualize the immersive experience first-hand. However there were still some changes to be made:
- prioritizing the brand's personality within the design
- emphasizing one CTA to lead users throughout the site
FINAL DESIGN
An immersive experience with clear direction
Developing all of the final designs in Wix transformed a visually overwhelming experience to be more intuitive and immersive. I built a scalable foundation of cohesive visual patterns, clear hierarchy, and intentional interactions which helped for future design changes.
[Note: website looks different; the company is in progress of a new design direction.]
REFLECTION
Improving user engagement through immersive storytelling
Impact
- increased average time spent on the site by 60%, indicating improved user engagement for the site
- established a consistent design system and clear navigation to create a more cohesive experience
- reduced visual competition between imagery and content while maintaining an immersive brand identity
- created a scalable foundation for future designs, stories, and game content
Key Takeaways
Creating an immersive experience that is still intuitive
I learned to intentionally use visual storytelling, ensuring immersive elements supported the user journey rather than compete with it.
Emphasize content over graphics
Although the story and visuals are incredible important in creating an immersive experience, I learned that prioritizing intuitiveness was the first step to make sure the user can stay engaged in the stories.
Building a flexible foundation
Spirit Elf is an evolving game with ongoing stories, so understanding that the universe is still growing, I was able to establish a foundation to help in future website designs.
