![](https://images.squarespace-cdn.com/content/v1/63c4bc1f17e52328c4f19910/f6f95ef6-c76e-4a6c-ad93-97c9b8b96d1a/website+hero+image+2.png)
About The Project
THE ASK
Create an experience combining digital and physical elements, based on a franchise/subject of our choice.
TEAMMATES
Wanda Felsenhardt (Experience Designer) and Himanish Goel (Experience Designer)
MY ROLE
UX designer and art director in charge of overall aesthetic and creating the digital app experience from conception to working, high-fidelity prototype.
RESPONSIBILITIES
Art direction, illustration, iterating on designs, sound/voice over direction, digital wireframing, determining information architecture and app structure, and responsive design.
TIMEFRAME
10 weeks
Concept
The franchise we chose to make a combination physical/digital experience for and extend was Knives Out. We wanted to come up with an experience that would be fun and memorable for participants, while avoiding the mysteries that had already been done. We wanted a new story that fit in seamlessly with the series as a whole, and landed on a murder-mystery, masquerade, mansion party.
The idea was for participants to enter a gamified, escape room setting, where they would use provided technology to assist them in solving the mystery that they are physically a part of.
Inspiration & References
We gathered references and inspiration via Pinterest for the general aesthetic and look of our experiencce, and would continuously add to these boards over the course of this project. Inspiration gathered included Venetian Carnival costumes and mask designs, high fashion, title fonts, and various assets for different screens types.
Story & User Flow
Taking the time to map out how users would ideally interact with the experience using Miro, we came up with the skeleton structure of how the first iteration of the story and interactions would flow.
Users would first sign up for the experience and be sent a digital invitation with the date, time, and location of the experience. Upon arrival, players are greeted by a host and have to forego their phones in exchange for a tablet device for the experience with a privacy screen installed. Players then pick their characters and are led to a tutorial room.
In the tutorial room, players are promised a “fabulous prize” and are taught the mechanics to using the app. After completing the tutorial, the room would go dark as the host is “murdered.” The lights come back on and the real experience begins, triggering Benoit Blanc’s narration over the speaker systems in the room. A random player’s character would discretely be selected and assigned the role of the murderer—trying to escape with the treasure promised in the tutorial—while the other players would be finding clues to try and absolve themselves of the murder.
Creative Execution
Character Art
For the characters, I wanted to create them so that each of character had a plausible backstory for why they might commit the murder.
The Opera Singer, a fading star of who they once were and not selling as many tickets. The Matador, xyz. The Botanist, lacking the funds for continuing their critical research.
I wanted a “black swan” look
Opera Singer
Matador
Botanist
Ideation
I did quick ideation exercises to come up with ideas for how to address gaps identified in the competitive audit. My focus was specifically on guiding users through the process of donating, though other ideas were brainstormed as well.
Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the Seafarer mobile website. These designs focused on the donation process and featured an easy to access way to start the user flow of donating.
Low-fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of donating through the Seafarer mobile website.
Mockups pt. 1
Based on the insights from the usability studies, I applied design changes like providing an icon in the navigation tab for changing the language of the website to allow for a broader reach for international audiences.
Mockups pt. 2
Additional design changes included adding more sections to the home page that allowed the user to quickly browse through different subjects: from fun facts & figures to the latest news on whale conservation.
Mockups pt. 3
High-fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Information Architecture
With the mobile website designs completed, I started work on designing the responsive laptop/desktop website. I used Seafarer’s sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Next Steps
1
Conduct research on how successful the website is in receiving donations towards the goal of whale conservancy through tracking KPIs
2
Add more educational resources for users to learn more about whale conservation and continue building out a more robust design system
3
Provide more details on everyday ways that people can help to fight against sea pollution and help preserve the declining whale populations
Reflections
Trust the process
Though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
How I work as a designer
I learned personally—through frustration and a scrapped, initial hi-fi prototype for the mobile website—that when designing for multiple screen sizes it was actually easier for me to work in a graceful degradation process rather than bottom up designing.
Push your limits
Through continued growth and perseverance, the design process reinforced and humbled me in the fact that I’m always growing, and to keep pushing myself to create better end-products for users.