Interworlds
Developing an interactive experience at the intersection of two different industries
Role
Product Designer
What I Did
3D Design, Prototyping, Research, Brand Design
Time
Jan - Mar 2023
Tools Used
Figma, Spline 3D, Photoshop, Illustrator
Jess Lee,
Kyerra Norton
Team
Background
Design is built around systems. In this class, we explore designing systems for our users, through interaction patterns, user flows and interface components that form a visual language.
For most cases, these visual systems for the screen don't simply exist in a vacuum, but are part of an even broader system, one of the most ubiquitous in the design world: the brand identity.
(AVPS WashU SP 2023)
Overview
Design Prompt: Setting the stage
Propose a new company and form a framework for their brand that offers a product or service at the intersection of the values and offerings from each. Investigate the unique possibilities of mobile devices and experiences of your selected brands.
*Companies are drawn randomly from a hat, each representing different industries
Design Process
Background Research
Luck of the draw: Our picks
Hasbro
Hasbro is an entertainment conglomerate that delivers brand experiences through “gaming, consumer products and entertainment.”
Among its products are Transformers, G.I. Joem Nerf, Monopoly, Play-Doh, My Little Pony, and more. The 2019 acquisition of Entertainment One included franchises like Peppa Pig. The Hasbro brand also developed TV shows to promote its products, namely Family Game Night on the Discovery Family network.
Vision Statement: to make the world a better place for all children, fans and families.
HP
HP serves the industries: “Computer hardware + software, IT services and consulting."
HP is an American multinational information technology company that develops personal computers (PCs), printers and related supplies, as well as 3D printing services. It also manufactures the DeskJet, OfficeJet, and LaserJet series of printers. The company is currently the second largest personal computer vendor in the world.
Vision statement: to create technology that makes life better for everyone, everywhere — every person, every organization, and every community around the globe.
How Might We Questions
01
How might we integrate the elements of physical gaming and community into an interactive digital product?
How might we design a interactive experience primarily for young users but also has a low barrier to entry for older or less tech savvy users?
02
Brand Research + Analysis
Brand Research + Analysis
We created a brand attribution chart to show to categorize and visualize the key traits for each of the companies, and find a connection between them.
Finding and crafting our niche
Why Augmented Reality?
Augmented reality (AR) seamlessly blends the physical and digital worlds by overlaying virtual information onto real-world environments. AR encompasses the physical and digital gaming of Hasbro and the technological innovation and exploration of HP’s gaming sub-brand Omen and its increased ventures in visualization and AR/VR.
How the St. Louis City Museum comes into play
Housed in an old shoe warehouse, the City Museum is an indoor, outdoor, and underground playground housed in an old shoe factory. Its exhibits consist largely of repurposed architectural and industrial objects with notable expansions to the 600,000 sq-ft indoor and outdoor facilities:
MonstroCity
Enchanted Caves
Shoe Shaft
World Aquarium
Target Audience
With its expansive, interactive architecture and emphasis on exploration using all senses, the addition of AR experience aligns with the City Museum’s mission of evolving and artistic play.
Individuals seeking immersive and interactive experiences that blend storytelling with discovery. From curious children to lifelong learners, the exhibition caters to a wide range of ages and interests, inviting all to explore new worlds and ignite their imaginations.
Focusing on a younger audience base and strengthening community, we proposed this AR exhibit in the St. Louis City Museum.
Tones + Values
Understanding our user base
Spending quality time with family
Experiencing innovative and immersive technology
Discovering new forms of art and expression
Engaging in a shared adventure
Familiarity with both digital and tactile learning methods
Mood Board
Shaping our Brand
Integrated 3D elements to infuse depth and realism into the user experience, while leveraging rounded edges for a modern touch that enhances visual appeal and usability.
Exploration with opacity and breathiness to convey the playful aspects of augmented reality and its relationship to space
Modern typography and references to the retro-futuristic movement of the 20th Century
01
02
03
Prototype
Navigating Interworlds
The initial draft structure included five sections of information, Home: Explore, Plan A Visit, Publications, About, and NFTs. The addition of an NFT marketplace and archive was considered because of Hasbro’s more recent presence in the NFT market for their Power Rangers product line.
Remove the NFT section as it was not our focus for the museum and wouldn’t coincide with the values of our audience (community building rather than digital ownership).
Optimized page content for easier consumption by reducing the amount of subpages as well as considering our time constraints.
Final Site Map
We determined that the exhibition website should function as a seamless extension of the city museum's online presence, eliminating the need for redundant information.
Lo-fidelity wireframes
Testing: Identifying key usability concerns
User Feedback
Design Decisions
Call-To-Action (CTA) Header
Button based CTA header that prioritizes ease of navigation while highlighting our design treatments and interactive experience
Created 3D animations of otherworldly blobs and objects that correspond with the intergalactic and spatial elements of the City Museum’s physical exhibits that we want to incorporate in VR
Activity Card Carousel
Card style carousel to display the exhibits + experiences with essential information about availability and the length of exhibitions instead of large image cards with information only revealed through clicking the images
Streamline Ticket Purchases
Added a button for users to purchase tickets directly from the site without being redirected to the City Museum’s broader website
Visual Concept & Typography
UI Component Library
UI Overview
Final Protype
Figma Link
Newsletter Design
Desktop
Mobile
Reflection + Results
How we want users to feel can drive the process
While the scope of our project was how can we conceptualize a service and experience that encompasses the principles of companies with no current overlapping audiences, we learned to look beyond our initial concepts of physical products and look to how we want users to feel and the shared aspirations of user exploration to bring forth Interworlds.
Challenging myself to learn a new skill + software to help my partner and I convey our vision was very insightful and humbling under our time and resource constraints but it made me more attuned to the value of exploring on my own and continuing to learn new things so that I don’t suppress the potential of a project.