happkkjky copy.png

UX-Happy Place

UX-Happy Place

The Brief

Develop a new kind of social media that can be consumed via the desktop, tablet, and smartphone. The catch, based on the two words you and your teammate chose out of a hat.

Collaboration with the great Katie Swanson

Initial Process:

In the beginning there was two papers. Written on them was curation and spirituality. Our chosen destiny was to a combine the two into a social media extravaganza. But first we needed to figure out an objective so that we could develop research strategies to compliment our initial findings. By doing mind-mapping, listing and other brainstorming activities we developed methodologies to start our research.

A few Snippets of our process 

A few Snippets of our process 


We wanted to focus our on asking what people curate and whats spirituality means to them. By doing so we were able to broaden our design opportunities. In our research we found people curate images and rely on their computer to do so, and share them most on Facebook. Spirituality turned out to be more difficult to research because every individual has a subjective view. What makes a one person happy depends on multiplicity of factors. We found the following:


People tend to collect and share different items based on their current environment or mood.

Spirituality = Happiness
tend to reside at a personal level and moments that are self reflection.


What is spiritual or what makes someone happy is very subjective.

People don’t share the same with their family as they would their friends, co-works, or a general forum.

For your viewing pleasure we have compiled our research below:


In most of the conversation we had, it was interesting that people noted that:

  • They share more when not being judge (ie – anonymity allows for more truth)
  • When they know there are worst people out there, they feel better about themselves
  • Getting things “off you chest” by either writing it down or telling someone is the gateway to release/forgiveness

Schadenfreude: is pleasure derived from the misfortunes of others.[1] This word is taken from the German language. The literal English translation is ‘Harm-Joy’. It is the feeling of joy or pleasure when one sees another fail or suffer misfortune. It is also borrowed by some other languages.

I know I personally watch Hoarder’s to feel better about my every growing collection of office supplies.

Although we value the research findings, at times, especially when gathering the findings, the answers seems to broaden the scope of our objectives. Based on our research we focused on two design opportunities to further develop.

  1. Happy Place: Facilitate happiness through tracking and viewing your mood based on your activities. Upload imagery or song and share with your network.
  2. Liquid Truth: Niche networking based on story telling and sharing. Safe and non-judgemental platform where you air your secrets.

But the real solution was found when both met, held hands and ran off into the sunset together (sort of).

When we were synthesizing the data from our research findings, we categorized potential users and developed a rough idea of who are target demographic by producing the following personas:

Journey Map

We then counseled with the great Wizard (of Auburn), and he led us down the yellow brick road to the Emerald city. Along the way we met three different strangers. All with different backgrounds, agendas and scenarios. We would like to introduce Jessica, Donna and Donovan and let you take a journey through the Happy Place with them.

The architecture map that lead us to the Emerald City

The architecture map that lead us to the Emerald City

The Lofi Prototype

Our Lofi prototype was mainly focused on the process it would take to go through our user’s main scenarios. We wanted to create flows for logging in and creating a new account, searching and discovering, as well as creating and adding on to a post/story. Basic structures were explored through sketching on paper to iterate on possible ui/ux experiences.

The Midfi Prototypes

From our lofi sketches we rendered out each flow in wireframe form. Still focusing on the basic infrastructure we were able to explore and refine our design opportunities surrounding the microinteractions of our application. The following midfi wireframes are based on each journey through our user’s scenarios, allowing the visibility of the interactions they would follow.

Donna: Create Account Flow

Donna: "Lego Blocks"/Adds on to a story flow

Donovan: Creates a Post Flow

User Testing

Testing… Testing… Testing 1,2,3. 
Testing in person was pretty easy. We were able to rangle five amazing souls to user test the posting process. The feedback was mainly given in regards to unfamiliar iconography and being stuck in the beginning portion as they wanted to be able to bypass the login screen. Based on our in person testing we wanted to further test the iconography through an A/B test allowing for each icon to be identified.

Instructions: Our app allows you to either comment or add onto a story. You landed on a post page. What would you click to add onto the story?

Instructions: Our app allows you to either comment or add onto a story. You landed on a post page. What would you click to add onto the story?

The following flow was allowing user’s to go through a Nav test on Usability Hub allowing them to create an account and provide us with statistical feedback.The results varied because users had pain points at the log in screen due to the functionality of the platform we were testing on.


Mid-fi Information Architecture

Once we developed various flows through the application, we were able to map out the interaction points across the platform. This allowed us to find and destroy any pain points that we may have encountered.

Information Architecture


After doing a clickable prototype for creating an account and making a fully interactive posting we refined our Midfi design. We then fully developed our Midfi flows for each persona. We then proceeded to create clickable go through using Fireworks and POP. After realizing Fireworks would be hard to setup on a url properly for the platform we wanted to test. We created clickable protoypes for logging in and creating a new account, searching and discovering, as well as creating and adding on to a post/story.


Test our Prototypes

The following links can be opened via desktop, ipad, or on your smart phone.



Create an Account:




Create a Post:

Branding Guide:

The following reference details UI commonalities found throughout Happy Place’s user application experience. The guide’s purpose is to define and catalog all interface elements, establishing consistency throughout each channel of the website. The document is a living, breathing reference that will continually evolve to facilitate the needs of both designers and engineers involved with shipping company materials.

Response Layouts: