Quibb for iOS
Rethinking engagement for the fastest-growing news sharing platform in Tech
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.
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.
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.
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.
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.
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.
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.
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
- Following other users within the app
- Sharing links
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.
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.
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.
At the end of our research phase, we developed four core design principles that would direct our process:
- “Designing an app for 2014" — use modern design conventions that are familiar to our tech-savy users.
- “It just works” — deliver a specific feature set that is important when on-the-go and works just as expected.
- “Feels familiar” — maintains a sense of community that helps users become closer through sharing and commenting and comes closer to web/mobile parity.
- “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
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.
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.
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.
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.
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.
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.
Beyond creating a new interaction model, there were particular design decisions we made to meet our project goals.
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.