UI/UI Design, UX Research
Sketch, Flinto, Principle, Zeplin
Unfortunately this work is under NDA, so information and images on the product itself can be slightly altered for sharing purposes.
We have observed that many advertising experiences are often irritating and unappealing.
How might we improve so that:
1. We create a genuinely elegant and engaging experience? 2. There is an even mix of beautiful ads, relevant recommendations, and interesting content?
Cellboard partners with phone carriers to give users free data and a beautiful, magazine-like lockscreen called Miro. Miro displays personalized ads, offers, and content whenever the phone is locked, and adds new content over time based on what you engage with. This project began in the fall of 2017, and I joined in the following year, building several updates and refinements.
HOW IT WORKS
GET A PLAN
A consumer signs up for a Miro plan with their phone carrier, which includes free data.
The Miro layer sits in front of the Android lock screen, showing content for a few minutes whenever the phone is locked and face up.
To close Miro and unlock your phone, just swipe down from anywhere. Or you can use the unlock button or fingerprint sensor.
Cellboard shares a portion of advertising revenue with the carrier to subsidize the free data.
1. Drive engagement with a gestural interface
It is important to avoid creating barriers for users when browsing content. Gestures are fast and intuitive as a way to move quickly through content. As users build muscle memory, they will habitually engage with Miro.
2. Get users going as quickly as possible
Previously, Miro's gestural interface and location in front of the lock screen are unfamiliar to users. Building on an existing pattern and mental models will make Miro easier to use. It is also important to consider multiple education methods to target different learning styles.
3. Build trust with users
We need to be transparent about what data is being collected and what it's being used for to avoid people from feeling that ad-supported companies are intrusive and dishonest. Additionally, we need to offer customers a fair value in return by providing free data and a personalized experience.
4. Respect users' technical limitations
Since Miro intends to address international markets with lower incomes and less modern infrastructure, we should design for smaller screens, find ways to minimize data usage, and find clever ways to only illuminate the screen at the right moments to save battery life. It is also important to consider appropriate langauge for the less tech-savvy users.
THE PRIMARY GESTURES
Miro's gestural interface makes it easy to casually browse content, similar to apps like Tinder and Snapchat. We chose this particular interaction model because the horizontal flow of content and vertical browser mapped closely to users' experience with Instagram Stories. This made it easier for users to get up and running, one of our most important principles.
WHERE WE STARTED
This is how the app looked after the first field test. It was enough to prove the concept worked in the hands of real users - people understood the gestures and were actually browsing and saving content almost every day. But there was a lot to be desired in terms of the experience: mixed interaction metaphors left some users confused, the visual design overpowered the content, the browser was barely usable, and the signup flow asked for way too much information.
Our team consisted of three team members who worked in 2 week Sprints. Trista handled visual design, Jason tackled UX/UI, and I worked on visual design and prototyping. I was introduced to Cellboard near the middle of the design process, so a lot of the visual language and user flows were more or less explored. I helped with wrapping up this project by polishing prototypes, usertesting, finalizing the visual design, and putting together all asset deliverables for developers. We designed our screens at 360x640 dp because we knew the majority of users would have non-flagship phones with smaller screens. For example, Samsung's mid-tier J Series phones have almost 20% market share in South America. We used a variety of tools, notably Sketch and Illustrator for graphics, Flinto and Principle for prototyping, and Zeplin for asset handoff.
TAP TO OPEN THE MENU
The menu includes reminders of the 4 gestures, which reinforces everything users have learned from the tutorial and help. Including clear navigation affordances outside of the lockscreen meant that we could keep the help button less intrusive on the content itself.
BUILDING YOUR COLLECTION
When you save a piece of content to My Saves, this little animation shows you where you can find it. Saving content helps Miro understand what kind of content you like, and makes it easy for users to store offers and coupons for later.
NARROW DOWN THE DESIRED CONTENT
Even more important than telling Miro what you like is telling Miro what you don't like. When you delete a piece of content, Miro removes it from your rotation and automatically advances to the next piece of content.
SWIPE UP TO VISIT
Inspired by the familiar interaction of visiting links in Instagram Stories, swiping up on a piece of content opens the linked webpage. Visits are a key part of Miro's monetization model and Cellboard had a lot of features planned, so we kept things simple in the short term.
GIVING GRACEFUL HINTS
When users first enter the full Miro experience, they see a small help button floating overtop of the content. Users typically pick up the gestures within a few minutes, as long as they have a cheat sheet at hand to remind them. We needed the help layer to stand out from the content behind it, but it also needed to obscure the content as little as possible. Out of all the coach mark solutions we tried, a single, clear button worked the best.
SWIPE DOWN TO CLOSE
Since Miro needs to be dismissed before using the phone, it's crucial that users know how to close it. At the same time, we want to teach users how to close it before they're actually ready to leave. During the first-run experience, swiping down reveals a small message that gives both confirmation of what the gesture does, and the chance to stay in the app after all.
HANDING OVER CONTROL
GRADUATING FROM HELP
Once a user has used Cellboard at least 3 times and used each gesture at least 10 times, they probably don't need to be reminded how it works. Instead of making assumptions, we just ask users if they're ready for the button to disappear. If they're not, we ask again later.
TEACHING GESTURES EARLY ON
Miro gets people using gestures to navigate from step one. The visual design and interaction on the Welcome screen are meant to remind users of opening a magazine for the first time.
The new user signup process is only 3 steps: Contact Info, Demographics, and Interests. There's no need for user accounts since Miro is linked with your phone plan. With iteration and help from Cellboard's product and technical teams, we managed to eliminate several extra permissions, verification, loading, and messaging steps.
SHOWING WHAT'S POSSIBLE
The easiest way to explain a gestural interface is to show someone using it. That's why we created 6 short looping animations showing the key interactions. We knew some people would want to get going right away, so it's easy to skip through the tutorial and get straight to using Miro.
PREPARING FOR LAUNCH IN CENTRAL AMERICA
Over the second half of 2018, Cellboard have been running field tests in preparation to launch Miro with local carriers in Guatemala and Costa Rica. So far the numbers are looking good: Miro ads have a 28% engagement rate, and a 34% visit rate if they appear after a swipe. The average Miro user views 120 pieces of content per day.
Since I came into this project a little later, it made it even more important for me to work closely with the client and design team to set requirements. It's important to know what has been previously explored before, why certain product decisions were made, and therefore when it's time to rethink a requirement in light of new information. It's also important to back up your ideas with concepts that show why the extra development effort and design time is worth it to create an improved experience. Moreover, if you understand the business's needs and goals, you'll be able to craft a product strategy to meet those needs with everyone on board.