.png)
Product Designer — Design Research, Visual Design, Branding, Interaction Design, Prototyping
3 out of 5 Americans suffer from loneliness. As Americans grow older and take on more responsibilities, society often provides few opportunities to forge new bonds. Young adults need a safe way to find and maintain genuine friendships and community through offline experiences to satisfy the basic human need for connection which is currently hard to achieve in an online world.
Keeping a simple homepage, we only have one main call to action. The user clicks the button to be matched up with an adventure. These randomized meetup requests help minimize decision-making and pre-conceptions for the user. Once they have accepted, they will be given details of their adventure. In order to allow users to weigh their options and decrease FOMO, they may have the opportunity to accept a previously denied adventure but their spot will no longer be guaranteed.
After an adventure, the user can choose to go on adventures with new friends made within the app. The goal is that users may form a friend group through continuous adventuring. The user always has access to shared contacts, meetup history, and preference options via the navigation bar.
To maximize safety, users are required to go through ID verification. The hope here is that there is safety in numbers, and users are free to filter out the types of people they’d want to be grouped with whether that’s by gender, interests, or age groups. After an adventure, the user is able to rate their hangout, give feedback, share contact information, and report any unfavorable behavior. Information may only be exchanged if both users agree to share to help maximize safety.
.png)
In terms of type, I chose a simple clean sans-serif font for easy readability and consistency. We decided to pick red for the primary app color because they suited our intentions in terms of color psychology. Red signifies adventure and we want to foster a spontaneous and bold community.
I designed this logo to portray two people hugging in the shape of a "t" as these two are "in tandem". I wanted to keep the design minimal, only using negative space to differentiate parts, so that it could be mono-colored and thus transferrable to different mediums.
In terms of type, I chose a simple clean sans-serif font for easy readability and consistency. We decided to pick red for the primary app color because they suited our intentions in terms of color psychology. Red signifies adventure and we want to foster a spontaneous and bold community.
I designed this logo to portray two people hugging in the shape of a "t" as these two are "in tandem". I wanted to keep the design minimal, only using negative space to differentiate parts, so that it could be mono-colored and thus transferrable to different mediums.
Pick either “Memory” or “Entertainment” to log an experience. When creating an entry, users can add songs, images, a rating, videos, and more. Users have the ability to pick prompts to help jot the most important parts of the experience. Tag friends, or don’t tag your friends. Entries are as public or private as users want them to be.
Users can create lists of anything they want whether it is their favorite war movies, the best parties they’ve ever been to, or their favorite pop concerts.Share lists with friends to easily give and receive recommendations or keep them for yourself. Additionally, create personal ranking lists to seperate your favorites from all the rest.
Get personalized stats for any type of memory or experience in your history. Get to see things like your favorite films, books, and favorite places to go all in numbers. Stats are catered to the type of experience or memory and are only viewable by the account owner.
While conducting initial user interviews, interviewees spoke about how there isn’t a good way to keep track of goals like reading a certain amount of books or watching a certain amount of films during a period of time.Studies have shown people are more likely to accomplish their goals if they write it down. Therefore, users can set goals fit for their schedule. They can choose how many things they want to do per day, week, month, or year and set reminders to help them reach their goals.
Gradients are a stand-out aspect of Mem as they give off a flowy, ephemeral energy similar to the subtedly fleeting natural life cycle of a memory. It felt right that the experience defaulted to dark mode considering most memories feel a bit blurry and distant.
My process involved auditing all our sites, consolidating to the most essential pieces, improving and expanding the component library, organizing, and now constantly improving, maintaining, and working cross-functionally to bring the system to production.
With a limited engineering team and a legacy tech stack, launching on all websites in the Hearst Newspapers portfolio has proved challenging. Slowly, but surely, through time and pixel-perfect scrutiny, our sites are reaching the masses.
Important questions from ahead of the sprint:
1. Promise: What problem are we aiming to solve? How do we change lives? Why do people visit us?
2. Differentiation and Entry Strategy: What can we offer that is unique? What can we own? In one word, what is the attribute we want Weekender to be known for?
3. Architecture and Voice: What can we carry across our brand verticals ‘Go, Stay & Getaway’ to unite our voice?
We came up with 15 sprint questions and narrowed it down to 2 later in the day that we’d focus on in this sprint. By narrowing down the most important questions we were able to specify our long term goal: “To be a trusted and inspiring source to create more fulfilled free time”. From this discussion, we created a rough user map to help guide our decision-making.
We asked experts what they think we already know. And most important, where we’ve got it wrong.
Can they find anything in our map that is incomplete? Would they add any sprint questions to our list? What opportunities do they see?
While the interviews were happening, everyone took notes in the form of How Might We’s. We identified that the most important questions around our target events included:
1. Establishing credibility/making reliable recommendations
2. Ensure content relevance
We spent a few minutes collecting random bits of inspiration from products that we felt could spark something we'd like to emulate for the Weekender. We shared what we liked about each product in lightning demos and jotted down the best things we found.Using that inspiration, we drew out four-step sketches that detailed what a user experience for a user on Weekender might look like. I’ve featured my sketch below.
We created an ‘art museum’ to view everyone’s ideas and used dot voting to call out our favorite features. The team discussed each sketch and made note of stand out ideas. However, the supervote from the super decider determined what we prototyped. Our decider was Bridget Williams, chief commercial officer and senior vice president of digital publishing at Hearst.
As the only designer of the sprint, Day 4 was when I had to do the heavy-lifting . I gathered our storyboard from the day before as well as all of our ideation from the week and got to work. Other team members kept ideating throughout the day, gathered me visual assets, and wrote me copy for our product’s fake article. After finishing around 7pm, we were finally ready to test with our users the next morning.
My colleague and fellow UX researcher, Rachel Weitzner, guided 5 users through our prototype. Each interview was 1 hour and took place via Zoom as the rest of the team watched and took notes.Our tested demographic were generally lower-income women who lived in rural areas who had hobbies such as travel, home projects, cooking, and gardening.We jotted down notes that were positive, big fails, and neutral comments. We had overwhelmingly positive reviews along with a few notes of valid constructive criticism.
My biggest takeaways from this sprint were:
1. Providing an excess amount of information, such as duration of trip, badges, or even parking details, boosts credibility. However, we need to figure out how to clean up tags and efficiently organize articles because of the wide range of content.
2. People liked components that they couldn't really find on other sites, such as how to host a Murder Mystery Party or features like filtering by mood, which helped increase our value proposition.
3. People overall trusted the Weekender and thought it looked good, but is there a way that we can appeal more to introverts and make the Weekender seem less like a overly-social meetup platform?
Early on in my design system creation, I discovered the value of the 8px grid. Using numbers such as 8, 16, 24, and so forth to size and space elements makes scaling for a variety of devices easier because many devices are sized in multiples of 8. The system creates a clean visual hierarchy as the multiples fit snuggly into common devices. Additionally, designers have to make fewer decisions while maintaining a consistent visual rhythm.
I used Brad Frost's atomic structure for design systems to organize my own system. This methodology helped structure the system in a scalable system. Atoms include bits and bobs as small as a button, molecules and organisms contain clusters of atoms, moving up to page templates, and then pages which combines all atomic elements to create a full page experience.
In order to cater to HNP’s various markets around the country without creating bespoke components for each, I developed 3 themes — premium, standard, and lifestyle. Each theme evokes a different feel depending on demographic, business model, and content strategy.
Once I created the single foundational component set, the theme layer is applied which includes spacing, iconography, typography, and ornamentation. Finally, comes the brand layer which includes color, logos, and a custom font stack for any necessary high-traffic markets.
For typography, I chose to use a 1.125 - Major Second type scale with a root font size of 16px. Because news publications are vastly text-based, a wide variety of font sizes were necessary to accommodate for all use cases across our sites. Using a musical scale allowed us to maintain that consistency without being limited to the numeric values of the 8px system.
Each font stack is intended to suit the personalities of each of our themes, worked in a variety of use cases, and that were lightweight and variable to reduce complicating code.
I implemented a font mapping system that maps primary and secondary fonts to typeface and weight to allow for flexibility and ease.
Working closely with engineers, we have designated Storybook as our source of truth. Storybook contains all the documentation for NewsKit such as brand assets, colors, typography, tokens, components, and guidelines. Designers, engineers, product managers, and newsroom editors can all reference the documentation I have written here that outlines all the variants of a component, how components should be used, and how components should be built.
Considering this is the first design system I had built for a corporation, a national brand which touches over 50% of Americans across the country, I was initially overwhelmed to take on this feat on my own.
However, as I learned more about systematizing design work and iteratively improving the design system throughout this process, I gained confidence in the organization, structure, and design of my work. Everyone has to start from somewhere and through slow and consistent effort, everyone can create something beautiful.
While I don’t think the design system is “done” because a design system is not meant to ever be “done”, I'm proud there is a design foundation that will continue to grow beyond my time at HNP.
.png)
