This is a case study for the design of Zette’s mobile application. Building off of research and learnings from the chrome extension alpha launch.
Design Challenge
The modern consumer gets the majority of their news via mobile device making it essential to have the same great functionality of the Zette extension available on the go.
We decided to build a mobile app expanding on a user’s ability to unlock premium news content. How do we make the app more interactive and social? In addition to increasing the functionality, we wanted to give the design a facelift while maintaining a minimalist feel.
Project Details
Team: Product Manager (CEO of Zette), Product/UX designer (My role), Front-end developer, Backend developer
My Responsibilities
Product and UX design | Design lead
As the lead designer responsible for this project I conducted research, produced sketches, wireframes, and mockups. I developed user testing plans and executed usability testing on mockups. I delivered final assets and documents.
Tools
Figma | G-suite | Zoom
Strategy and Learning
We were able to use previous research and learnings from the alpha chrome extension launch as a baseline for what functionality the first version of the mobile app should have.
Additionally, we looked at competitors, legacy publishers, and social media applications to craft the principal requirements of the mobile app. We wanted to understand what users are used to seeing in a news application and what they might be missing.
Market research
We verified our assumptions about news consumption on mobile devices and news discovery from social media making it obvious Zette needed to work on mobile and that making news consumption a social experience would be essential.
‘Legacy’ publisher app research
We looked at several of the more popular ‘legacy’ publishers apps to understand what they offered and how we might expand on the functionality of what currently exists.
Social applications research
One thing that was missing from many ‘legacy’ publishers was the ability to share the news you are reading with your community since a lot of their content is premium and not accessible. I looked at social media applications and several popular apps that have social functionality to better understand the sharing flows and how users interact within those applications since being able to share news seamlessly will be a big part of the Zette product and help drive user acquisition.
Competitive research
Although there are not a lot of direct competitors I looked into some applications that are in the news media space to help understand what our customers might want and/or expect to be able to do with a Zette mobile app. I primarily focused on the application “Pocket”.
Features and layout
Using the research and exploration conducted of various other apps I defined the key user stories and prioritized features that needed to be included in v1.0 of the Zette mobile app.
Application schema
I built out an application ‘site map’ in order to organize all the features we needed in a comprehensive manor.
Sketches
I used the trusty whiteboard to quickly sketch a couple versions of the UI before moving those ideas into Figma.
HiFi Mock-ups
I moved quickly into higher fidelity mockups because I had already started to establish a design system so I could grab components and create variations as needed.
Design iterations and development
I planned and executed task-based user testing of the clickable mockups with users on our waitlist. The test was designed to get feedback on the primary use case of unlocking an article, navigating the app, and some key functionality like updating one’s subscription or sharing an article with a friend.
Scenario task 1
You’ve downloaded the Zette app and are opening it for the first time. Sign up for a Zette account using a test email and password.
Scenario task 2
Pretend I am a friend of yours. I am going to send you a link to an article from a publication you don’t have a subscription to. Use Zette to unlock the article.
Scenario tasks 3 through 6
Complete the following:
3. Another Zette user you follow named “Sara Wang” unlocked an article recently. “Like” the article they unlocked.
4. You unlocked an article recently that you want to text to a friend. Find the article titled “Breaking: Cats hate their owners” and copy a link to the article.
5. Turn off all notifications
6. Update your subscription from a Free Trial to the “Classic” subscription tier.
User testing results
I synthesized our user testing results and identified areas I could make immediate changes to as well as some features to monitor and experiment with as the team developed the first version of the app.
Design updates
I made the design updates I knew we needed to implement immediately and documented a plan to explore design changes further that we may want to or need to implement.
Article share card changes
I made several changes from the first version of the card to the second version. I decreased the size of the user avatar and increased padding around the article in an effort to highlight that it is the article that users are interacting with not the user. I got rid of the ‘more’ button and surfaced the share feature to make sharing articles with your community more accessible.
Saving what you liked
Previously liking an article was only being thought of as social proof for users; that liking articles that your community was reading would bring a sense of delight. But what if you want to revisit an article you liked or you want to ‘save’ an article that you liked?
I added a new liked articles section which compiled all the articles that a user liked so they can revisit those whenever they want.
Retrospective
We have a strong foundation for how Zette’s mobile app will look and feel as we continue to expand the feature set and develop the product.
Continuous improvement
As features get built out and implemented the design team plans to continue to iterate on various elements to make using Zette a seamless, intuitive, and delightful experience.
The following are features and functionality we will continue to experiment with in the near term as we develop the product further:
Number of inputs per screen during the sign-up flow ie user inputs their email address, clicks next, then the password.
Should users have to verify they want to unlock an article when opening up Zette via an article “action” menu?
Should users have to verify they want to upgrade their subscription with a second click or should we remove that step?
Experiment with different layouts giving greater emphasis to users or to articles in the card layout of the user’s feed.
Working in a short time frame with little oversite has been very rewarding. Being able to build out designs for a consumer product and get some early feedback from real users was essential for rapid development and I am excited to see where this goes.