V R T A L I T Y : W E B S I T E + W I D G E T S
VRtality is a public library program piloted at the height of the corona virus pandemic in 2020. The program’s mission is to normalize and de-stigmatize teen mental health through conversations, co-designing and virtual reality (VR) technology. (What? Yes, all that!) The website explains the program and offers tools to help libraries determine what they need to implement the program in their communities.
ui, ux
visual design & branding
design strategy
project management
The good
The good news was that the pilot program designed and completed by the Seattle Public Library (SPL) had been well-documented with links to all of the data, resources, examples, videos, Miro boards and technology to back up the why’s, who’s and what’s of the program. The problem was that it was overwhelming at best and incomprehensible at worst.
Design Goal: GET TO THE POINT. ELIMINATE FLUFF. We broke down the program to the core essence and organized all the information so the user could dig deeper if they wanted or could stay high level and still comprehend the purpose and value of the program.
The bad
While the SPL team had great success with their pilot program, it wasn’t as simple and straightforward as doing a summer reading program. They had good reason to believe that others might find the program difficult to implement given the sensitive topic and the new technology involved.
Design goal: HOLD THEIR HAND
We developed three tools: (1) a digital widget that assesses the library’s readiness to implement the program, (2) a digital widget that helps to plan the co-design sessions and design sprint, and (3) a downloadable workbook (PDF) with step-by-step instructions for running each session and accompanying activity worksheets.
The ugly
While the name, Caring for Teen Mental Health, spoke to its purpose, it failed to capture the program's collaboration, technology, and overall youthful energy. It was a carryover from the grant title that had funded the program.
Design Goal: ENERGIZE
I guided them through re-naming and created a visual vocabulary that gave VRtality a voice and a personality, expressing its creative and youthful spirit.
R E F L E C T I O N
We poured through Miro boards and notes from their co-design sessions. We watched videos and read research about teen mental health. We dug deep so we could discern what needed to be communicated at a high level and what could be revealed later. We asked questions. Twice. We knew there would be new challenges for the users (librarians) to learn and master: co-designing, VR technology, online platforms, and sharing power with teens, to name a few. We aimed to parse the information so it would be exciting and encouraging but we didn’t want to sugar-coat the process either.
Design mock-ups
The three steps we created helped to organize the abundance of content and compartmentalize information as needed. Color and large numbers provided navigational cues. 
For the tools, encouragement was expressed in a progress bar showing the steps of completion. 
Oversized cartoon checkmarks gave positive vibes.
Tips were added to highlight important information and offer it in mind-sized bits.
R E F L E C T I O N
My favorite part was developing the digital tools that simplified the understanding of the program and enabled libraries to determine what resources they would need to get started.
Helping SPL adopt a more captivating name and creating a visual identity and design system to truly express the spirit, energy, and creativity of the teen program was a second highlight. I poured my heart into it.
Below you will find the foundational brand strategy and key elements of the design system.
Discovery + research
To kick off the project, the key stakeholders filled out a questionnaire about the program and the audience.
The following week I put their responses into a Miro board so they could see the opportunities for alignment, discuss and make any adjustments.
Just hearing them chatter amongst themselves was more enlightening than the survey. The “chatter” or lack there of can tell you a lot about whether the stakeholders are in agreement or not.
Those sessions lead to the creative brief, which puts us all on the same page and outlines guardrails, goals and assumptions. It’s the part that everyone understands the most, and becomes the bridge to the creative design.
Creative brief
Even something as simple as a program can have a brand strategy to create a solid foundation on which to evaluate the visual communications.
From the design attributes, a mood board was created and VOILA, we’re looking at a the beginnings of the visual representation of their program.
Mood board
Design system
Favicon and wordmark
Color palette
Patterns
[Modified Adobe Stock]
Illustration:
Style is loose and imperfect, conveying diversity and warmth
[Modified Adobe Stock]
Illustration:
Wildlife and gem stones made from polygon shapes echo the rudimentary quality of illustration that teens can might create in their VR worlds.
[Modified Adobe Stock]
Above:
Caricatures of the client Juan, Luis, and Linda done in the loose illustration style and incorporated into the website and PDF materials.
F I N A L R E F L E C T I O N