About The Project

Video Block
Double-click here to add a video by URL or embed code. Learn more

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.

Seafarer mobile wireframing ideas
Crazy 8's ideation exercise sheet

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.

Digital low-fi wireframe home page of the Seafarer mobile website, on the right are the words, "Easy to find means of donating via scrolling side tab," and to to the right are the words, "learn more to further educate the user on important issues

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.

Digital low-fidelity wireframe flow for 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.

to the left is the low fidelity mockup with the words "Before Usability Study" over it, to the right is the hi-fi mockup of the Seafarer home page with the words "After Usability Study" over it

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.

to the left, the lo-fi mockup of the Seafarer home page with the words "Before Usability Study" over it, to the right is the facts and figures section of the hi-fi home page mockup with the words "After Usability Study" over it, the whale moves

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.

Layout of the high-fidelity prototype all linked together with various light blue arrows

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

orange arrow pointing downwards

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.

Previous
Previous

Olympics

Next
Next

Seafarer Whale Conservancy