Quibb's Design Process 

Pair Design

While working on Quibb, my partner, Cathrine and I practiced pair designing. Pair designing allowed us to leverage both of our experiences and perspectives as designers and collaborate to develop good design. We were able to establish shared ownership over the project and avoid mixing and matching two separate work flows, which led to a more coherent design narrative and cohesive solution. 

We began our pair designing by developing a persona. 

Research

Persona Development

Through discussion with our client and some inform interviews with Quibb users, we started by creating a persona to better understand who we were designing for. We returned to our persona throughout our process and made sure that the user was at the center of the design process. 

Hey, meet Dan!

Comparative Analysis

We conducted a brief comparative analysis, looking at other tech news mobile apps such as TechCrunch, Venture Beat, LinkedIn and other in-direct competitors such as Twitter to understand how competitors in the space were currently addressing similar design opportunities. 

User Testing

Next, we conducted some preliminary user testing to get an understanding of how users currently interacted with the Quibb app and the major pain points they encountered when using it. With a brief discussion guide, we created scenarios for users as they tried to accomplish various tasks. 

From our testing, we found that users had issues understanding how to comment on articles, follow other users within the app, and were confused when they tried to share links. 

Feature Assessment

We then moved on to a web/mobile app feature assessment to better understand the current app and its functionality. When discussing our goals with the client, one of the requests was to create better web and mobile parity. We needed to first assess the differences in feature set between web and mobile to come up with the best strategy to determine new features for the mobile app going forward. Below, we mapped out the current features of the mobile app in green and those that existed only on the web in red. 

Click to enlarge

From our feature assessment and usability testing, we decided to scope out design for three additional features. We would create a new way for users to follow other users, add a sharing capability, and add multiple feeds, like on the web app. We would also improve commenting. 

Concept Development

Task Flows

Task flows help to visualize the process a user would experience as they walked through the new interaction model and also identifies specific edge and corner cases that a user might encounter. We then mapped out three specific flows for: following a user, commenting on an article, and sharing news outside of Quibb. 

Follow a user task flow

Follow a user task flow

Comment on an article task flow

Comment on an article task flow

Share externally with a social network task flow

Share externally with a social network task flow

Sketches

My partner and I diverged and created our own UI sketches, experimenting visually with different designs and interaction patterns. We chose to start with low fidelity sketches to get out our ideas quickly and efficiently and critique different designs without getting hung up on higher-fidelity details. Below are some selected sketches of mine. 

Wireframes

Next, we moved into wireframes to visualize how our design concepts would look and feel within the perimeters of the mobile UI.  We mocked up the different flows and began to examine the interaction design. Below are some of the initial wireframes we shared with our client. 

Interactive Prototype

Finally, we took our final wireframe mockups and created an interactive prototype using InVision. Prototyping allowed us to examine our interactions more holistically and also do some guerrilla usability testing with users.

Intentionally foregoing a final design polish, our objective was to test the usability and fundamental user experience as a user moved through the app without the distractions of a visual design element. From our testing, we were able to make quick iterations to make a better final user experience. 

Participant going through usability study with a prototype iteration

Participant going through usability study with a prototype iteration

For reasons of confidentiality, we cannot share our final prototype at this time.

Return to Quibb: a mobile experience redesign 

You can also learn more about our pair design process, here