Overview

A new kind of social network


Shuffle is a new kind of social network based on what people love, their passions! They are a platform for freelancers, artists, anyone with a passion, an interest, a hobby, and professionals to showcase their work, meet other people and collaborate. They are currently pre-launch. Expected launch date is late 2017. 


Design Process

Rapid delivery using a Lean UX-based approach
 

 
process.png
 

My Role

I was responsible for the experience strategy and design of the iOS app. I worked closely with the product manager and developer and produced all of the deliverables. 

 

Deliverables

Personas, user flows, wireframes


Research

Understanding the project scope

When I came onboard my first goal was to understood the product, the users and the market. I interviewed the stakeholders to understand business goals, product history, and business challenges. Together we outline risks and expectations which set the foundation for a shared vision in the process and construction of the app.
 

The people behind the idea

Before I came onboard, the stakeholders had developed a user advisory group who provided them with the initial inspiration to develop Shuffle.  I spoke to these people to understand their excitement about Shuffle and went back to them when it was time to test the product. Based on my initial short conversations I quickly mocked up four personas and goals for each.


Understanding the market

I thoroughly research other products on the market and recorded takeaways, frustrations, and menu format. I chose Paper, Medium, Facebook, and Flipboard to use as my primary inspiration. Paper and Flipboard both have a modern, full-page layout that the stakeholders are drawn to and use the full capacity of screen space. Facebook and Medium have a traditional but standard menu and format. These provided inspiration when we started to work on sketches. 


Requirements

Defining the product

I mapped the necessary features in the app. I was still unsure of the hierarchy so I talked to users, watched their behavior on similar platforms, and used that base knowledge to mock up a quick hypothesis about feature hierarchy and location which I reviewed before sketching out screen ideas.

Features

  • Must display (To be displayed): User profile, search
  • Should Display (ok if hidden in menu): add post, notifications, messages, events
  • Hidden (ok if hidden in menu or on profile page): Bookmarks, settings, following

User scenario and flow

To move quickly I took one of our Personas, Rolan Martinez, created a scenario for him, and created a flow based off of the scenario. 

Scenario: Rolan is interested in seeing other Ceramicists work. He scans his feed and chooses an interesting article to read, he likes it and bookmarks the article to review at a later time. 

Ideate

From design studio to high-fidelity wireframes

Photo: pexels.com

I organized a design studio with the main stakeholders as a way to create team‐wide ownership. The design studio sparked tons of great ideas and buy-in from the stakeholders. We went through many iterations of the sketches, giving each other feedback and asking questions before each iteration. We decided on three different versions which I sketched out in more detail.

Low-Fidelity Sketches

The three variations were different approaches to the app. One had the standard menu navigation on the screen. One version was only a full page layout with the functionality hidden behind interactions and one was a hybrid of the two. We made a decision to start with the more modern full-screen variation to see if users would be able to understand the functionality. 


Usability testing

Test early and often

I tested the paper prototypes with users to get their feedback on the functionality and layout. I had them go through the scenario to see what was overlooked in the sketches.

UsabilityTesting.jpg

Main takeaways:

  • Users expect to always see a bookmark symbol for posts and articles while they are reading so if they have to stop reading mid article they can save it for later. 
  • Users wanted less choice. They preferred the simplified menu icon over the full menu. They thought the full page helped them focus on the feed and articles. 
  • 3/4 users preferred a scroll option (down to up) over a swipe option (side to side) for articles but they didn't mind the swipe to switch feed categories. 
  • Users wants to quickly exit articles. They don't want to have to scroll to the top to go back to the feed. 

I took this feedback, updated the paper prototypes, got more feedback before creating the wireframes. 

 

Updated sketches

Wireframes

After updating the sketches I mocked up the wireframes and plugged them into Invision to get a sense of the basic interaction and make sure I didn't miss anything.  


Next steps

Get ready for the upcoming launch


We had a lot of fun developing and working on the mobile app project. We are going to refocus on the internal site to get ready for releasing the product. We will come back to the app project after launching the website. We can then take a look at how our user base is using the platform so we can make tweaks to the app based on user behavior and preference.