WNRS

WNRS is the mobile app for WE’RE NOT REALLY STRANGERS—a brand with the intention of empowering meaningful connection with others & oneself.

Screen Shot 2021-05-30 at 3.06.40 PM.png

Overview

Role: UX, Visual Design, Branding & Identity

Tools: Figma, Google+

Date: Spring 2021


Skills: Competitive Analysis, survey design, creating personas, user stories and flows, ideation, sketching, wireframes, prototyping, user testing & analysis

Problem

How might we design a product that encourages use of a mobile card game and deeper reflection?

Solution

Focused on the end-users’ desire to cultivate meaningful connection with self and others, we will create a mobile app to allow users to play the WNRS card game and keep a journal on-the-go.

Process

Problem

Discover

Define

Develop

Deliver

Solution

Discover

Competitive Analysis

User Survey

Based on my competitor analysis, I generated a set of questions that would help me develop a product users would truly utilize. Some key questions I used to base the development of my personas later in the UX process were:

  • On a scale of 1-10, how likely would you be to play a game that suggests deeper topics of conversation?

  • While playing a question game on a mobile device, what extra features would you dislike/find frustrating?

  • What is your age?

Define

User Personas

Using my data gathered from the user survey, I created two personas that represented millennials who desire deep connection with others and self.

Claire Calhoun

25 Years Old | Singer/Actress | Single | Empathic & Compassionate

Drive

  • “I want to cultivate deeper relationships”

  • Lives by being involved in her community

  • Likes using technology to talk with people she doesn’t regularly get to see via social media

Goals & Needs

  • Needs to have deep, meaningful friendships

  • Doesn’t want to have shallow conversations

  • Easily find ways to connect with her peers

  • “I need a way to start conversations that mean something to me and don’t leave me feeling like I’m competing/comparing myself with my peers.”

Hesitations & Pain Points

  • Needs app to not be annoying/bothersome with ads/sounds

  • Wants app to create collaborative space rather than competitive one

  • Wants app to give multiple suggestions of other games like it

WNRS Persona 2.png

Eli Evans

30 Years Old | Record Store Owner | Single | Deep Thinker

Drive

  • “I want to know the why behind everything.”

  • Lives by being in the moment

  • Likes using technology to research and find new ways to think and live presently

Goals & Needs

  • Needs to have cerebral conversations

  • Doesn’t want to have to be labeled or placed in a box

  • Easily find ways to communicate thoughts

  • “I need a way to start relationships with people who want to talk deeply about interests and big ideas.”

Hesitations & Pain Points

  • Needs app to not be bold and distracting

  • Wants app to have a sharing feature within the app to start conversations with players

  • Wants app to have profile to save progress/journal feature

User Stories

To establish features needed for the MVP of WNRS, I created a list of user stories of potential tasks of new and returning users. The priority of the tasks determined whether or not they fell in line with the MVP.

Best Dressed User Stories (1).png

Highest Priorities:

  • Creating and logging into an account

  • Play the mobile card game

  • Access profile journal for entries

Develop

User Flow

For this exercise, I thought about how the user would need to flow through an app to get the desired outcome of the main user stories for the MVP. I needed a flow from opening the app and logging in, to playing a round of the original WNRS mobile game.

Screen Shot 2021-05-30 at 2.41.51 PM.png

Sketches

I completed my final sketches for wireframing based on the user flows.

Screen Shot 2021-05-28 at 10.14.36 PM.png

Wireframes

Using the user flow and my sketches, I created low-fidelity wireframes. After a critique with another stakeholder noting usability and spacing, I edited my first version and created the final wireframes in Figma. The wireframes were used as the blueprint to create the clickable prototype in Figma to user test.

Login Page.png
Menu.png
Profile.png
Journal.png
Games.png
Shop.png

Branding & Identity

Branding Mood Board

I began the branding process with observing the existing WE’RE NOT REALLY STRANGERS site. Once I reviewed the site, I started developing ideas for a logo. For the identity of the app, I knew that this app needed to be an engaging, safe space for my target audience to keep the users coming back to utilize the app’s features. 

Deliver

WNRS Square Graphic.png

Mockup & Prototype

I created a mockup using the wireframes and branding mood board developed from the existing site. I added media content for more visuals to keep the users engaged. I then used the prototype tool in Figma to create a clickable prototype for user testing.

User Testing

 

“I want to create my own deck from saved, favorite cards.”

Tess, GA.

“I would like to play this game remotely with others via video or send cards back and forth in a chat.”

Carrie, IN.

“I want to create my own card and questions to ask.”

Clay, GA.

 

Iteration

I took the user feedback from the testing and interview to iterate my design to be less distracting, easier navigationally, and changed the game page entirely to fit an MVP. Once I was finished with the final design, I retested with new participants within my network. The design problems from the first round of testing were no longer pain points to these new user. In fact, the new user praised how well the previous pain points now worked in the app.

Reflection

WNRS was my capstone project for Thinkful’s UX/UI Research and Design Flex program. I chose a brand I am passionate about and loved creating a new product to pitch to them upon completion of my program. This project taught me the importance of working smarter, not harder, with a brand that has an existing clean, clear, and desirable website & product. I was able to add some of my own ideas along with users’ to create an MVP for the finalized product.