The Diverse Narrative

The-Diverse-Narrative-product-mockup-on-desktop-tablet-and-phone

ROLE

UX research
UI design

PLATFORM

Responsive Web

SCOPE

Ongoing collaborative project

Background

In recent years, the news and content we consume has grown increasingly polarized and cynical. Many media sources serve to confirm our natural biases, reducing our ability to understand and empathize with others in different walks of life.

Goal

The Diverse Narrative is an online publication that exposes readers to personal stories encompassing a range of perspectives, identities, and backgrounds. By challenging stereotypes and biases, it aims to promote understanding and empathy for those who often don’t have a voice in society.

What does the research show?

There's an unmistakable consumer base that exists for digital print and blog content. However, despite the wealth of blog sites and online publications available, it's rare to find ones focused on diversity and representation.

The unique space we're occupying

The ideal middle consists of the highly personal narratives of a social media site, the unique storytelling of a personal blog site, and the curated quality of an esteemed magazine publication like The New Yorker. The merging of these three qualities puts us in a unique position in this diversity advocacy space.

Organize around searchability

I organized the information architecture into essential sections and pages along with six key categories that each article can be classified under. This sitemap gives a high-level overview of the navigation structure and hierarchy of the screens.

Wireframes for key pages

Wireframes for the homepage and select pages were created to get a sense of the basic feel and layout of the website. The wireframes consisted of common design patterns while incorporating the brand values and uniqueness of The Diverse Narrative.

Category

Article

Search

From first iteration to final design

Reflections

Design the information architecture around ease of navigation. There should be multiple ways for a user to find what they’re looking for and ample suggestions to aid their search. It’s important to design so readers feel like they’re moving forward with something new to discover and not trying to retrace their steps.
Creating sizing guidelines for components is key. For a website that showcases a lot of user-generated content, utilizing an effective layout is crucial in maintaining consistency and a clean look. Different article blocks need appropriate spacing to avoid the images clashing and the site becoming too cluttered.

Next steps

The next step is to collaborate with writers to generate articles. This current design infrastructure was built with scalability in mind, so it should be straightforward to add blog content. I hope to collaborate with a developer and build this out in the coming year.

MORE PROJECTS

Crown Boutique

This bespoke design for a boutique showcases a variety of jewelry and dynamically highlights it through eye-catching imagery and typographic effects. The scattered layout sparks curiosity and creates an engaging way for viewers to browse the different collections that the boutique has to offer.
Crown Boutique homepage design

Neighborly

This design for a social networking app inspires people to seek community through its playful depictions of groups and events that cater to a wide array of interests. The cheerful color palette in tandem with the consistent yet diverse assortment of 3D illustrations instills that there is something fun for everybody, and finding friends can be just a click away. 
Neighborly homepage design

LoveNest

This design for a vacation rental company instills a sense of relaxation and curiosity through its refined layout, warm colors, and inviting imagery. The clean lines and whitespace give each element its proper attention and beckon the reader to explore all of the destinations at their leisure.
LoveNest homepage design

Defense Contract Audit Agency

This web application design for a government agency offers a clean and relaxed feel and an intuitive layout to a functional one-stop-shop for new and recurring visitors. Important and popular resources are prominently highlighted in floating widgets while subordinate links are strategically hidden behind a sidebar.
Defense Contract Audit Agency homepage design

NextWave Conference

This design for a tech conference evokes feelings of being relevant and modern while reflecting the cutting-edge and forward-looking values inherent in entrepreneurship. The cool color palette mixed with alluring gradients and the wave motifs scattered throughout evoke a dynamic quality to the design.
NextWave Conference homepage design

Kizuna

This design for a Japanese restaurant impresses upon their culinary excellence by highlighting the various dishes and maintaining that as the focal point. The elevated dining experience is further expressed by the mysterious yet elegant dark backgrounds along with the restaurant's unique interior setting and Hiragana characters as design motifs. 
Kizuna Japanese restaurant homepage design