Quibb for iOS

Rethinking engagement for the fastest-growing news sharing platform in Tech

Background

Quibb is a San Francisco-based startup that allows you to share industry news with your professional network. The startup engages and serves the tech industry with active members from over 30 major startups and companies such as Google, Microsoft, Amazon, Spotify, LinkedIn, and IDEO. Quibb's most valuable asset is its community, that populates the platform with shared insider news and stories. 

Challenge

As a MVP with a limited feature set, the original Quibb for iOS was able to provide a basic mobile experience but lacked an underlying design structure to drive user and business goals. Without key features found on their web platform and limited avenues for user interaction, Quibb needed to reimagine their mobile experience to increase engagement and build community on the app.

Selected screens from the original Quibb for iOS

Selected screens from the original Quibb for iOS

Solution

Watch in HD here. Try the prototype here.

Multiple feeds

We began by making the addition of multiple news feeds. This mimics the functionality on the web and allows for further user engagement on the mobile app. Users can now choose between a curated feed of users they follow, recent posts and all posts. 

Bottom Navigation

We designed a bottom navigation bar for easy access to important features. One of the business goals was to enhance user follower-rate and with the new mobile app, users can easily access a members directory to follow other Quibb users. 

Emphasizing Community

Quibb is driven by it's community and users' active engagement with the platform.  We wanted to emphasize this throughout the mobile app experience by promoting user-to-user interaction through better commenting and more consistent opportunities for users to follow others. 

Opportunities to share

Finally, we made it easy for Quibb users to share news from Quibb with outside social networks using standard iOS design conventions. Sharing is a key of the Quibb community and we wanted to make the process of sharing as simple and seamless as possible. 


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. This contributed 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 informal 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. 

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:

  1. Understanding how to comment on articles
  2. Following other users within the app
  3. Sharing links

Comparative Analysis

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

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.

Design Principles 

At the end of our research phase, we developed four core design principles that would direct our process: 

  1. “Designing an app for 2014" — use modern design conventions that are familiar to our tech-savy users.
  2. “It just works” — deliver a specific feature set that is important when on-the-go and works just as expected. 
  3. Feels familiar” — maintains a sense of community that helps users become closer through sharing and commenting and comes closer to web/mobile parity. 
  4. “Something essential everyday” — each day, deliver at least one read that makes work easier, more interesting or more fun

We also scoped our re-design to focus on improving the three aspects of the user experience that we determined were the most critical to the future of the product. For our team...

Metrics for success looked like:

  • Increased rate of follows
  • Increased commenting 
  • Increased sharing  

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. 

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 (24) 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. 

Interactive Prototype

Finally, I 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.

Participant going through a usability test with a prototype iteration

Participant going through a usability test with a prototype iteration

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. 

The Outcome

We developed a new Quibb that makes it simpler and more delightful to follow other Quibb users, comment on news articles, and share articles externally with one's social network. We utilized modern design patterns to improve our basic interaction model and added additional features such as multiple news feeds to provide greater web/mobile app parity and improved user experience. In all, we came up with a new Quibb to meets the needs of a modern, tech-focused audience and provide opportunities for greater in-app interaction. 

You can check out the prototype here.

 The details

Beyond creating a new interaction model, there were particular design decisions we made to meet our project goals. 

Click to enlarge

Ready to Ship

After review our work has been passed on to a visual design workshop for specs and future shipment. 

Quote from the stakeholder:

"It was great to have recently worked with Ian on the mobile UX redesign. Ian was empathetic to user and business goals throughout the process which was extremely valuable as we worked together on a brief yet demanding project. Working as part of a design pair, he was able to improve the overall UX and offer a thoughtful final product design."

If you have queries about my design process or work with Quibb, you can write me here