Designing a mobile app that adapts to multiple platforms can be challenging. How do you know when to use the operating system’s native controls, create new patterns, or use a hybrid approach? For our iOS and Android mobile redesigns, the UX team here at StumbleUpon took a hybrid approach, adapting native design paradigms and creating unique, simple interfaces. The result was a faster, more intuitive experience that has led to increased user engagement.
And as every product design process should, it all started with empathy.
Understanding the user
To understand how your users think and act, what motivates them, and their pain points, you need to think from their perspective. This lets you tune into their desires and needs, and use that understanding to inform every design decision. Learning from real people hones your intuition and inspires your empathy.
With every new feature, we begin by gathering inspiration, then sketching a variety of approaches to key interactions until something feels right. But we don’t just rely on gut instinct and design knowledge: user research findings and current usage data add richness and nuance to our decisions.
The app ecosystem features endless sources of entertainment, so we’re constantly challenging ourselves to design in a way that’ll make us stand out from the competition. The beauty of StumbleUpon is that it uncovers the very best of the internet, bringing users quality content they didn’t even know they were looking for. We try to illustrate that serendipity with our designs.
Learning from real people hones your intuition and inspires your empathy.
Setting design goals
In redesigning both our iOS and Android apps, we set ourselves a few goals:
- Establish consistency across platforms
- Satisfy our current user base
- Enhance the overall experience to keep users coming back
As we were going through the redesign process in 2014, Google introduced its material design style. We looked closely at material while designing our new StumbleUpon iOS app, taking into account approaches we might want to share across both platforms. We also took aesthetic and interaction cues from material while redesigning our Android app to create a more polished and refined experience.
We integrated Google’s card patterns into the interface on several screens while retaining many native iOS icons and interface patterns. We decided to use similar icon designs across both apps, but styled them for their respective platforms, sticking to thin-stroked, hollow icons on iOS and going bolder on Android.
When we started redesigning our Android app, we ran a visual audit and took inventory of both phone and tablet experiences to understand the big picture. Getting a full view of the ecosystem helped us identify areas for improvement and highlighted inconsistencies between platforms, allowing us to concentrate our design efforts.
Then we set out to standardize our UI patterns to match Google’s new material standards. Portions of our app already aligned with the new material conventions, while others needed tweaking. We also identified several instances where animations could convey micro-interactions and transitions.
Focusing on these issues let us improve the core StumbleUpon experience. We dropped skeuomorphic embellishments in favor of material interface elements. Bolder typography and full-screen images helped us surface rich contextual information and metadata in the preview Stumbling experience. Introducing floating action buttons highlighted key touchpoints that might’ve been overlooked before. Integrating floating cards throughout the app not only simplified the interface, but also created a familiar environment for Android users.
Besides using the card style on both iOS and Android, we created consistency across the apps by using the same color palette, branding elements, and core Stumbling functionality. We kept the interplay, placement, and transitions between interface elements in the back of our minds throughout the design process, from static mocks to prototypes to final specs.
Striking a balance between our app’s unique characteristics and the core conventions of the two dominant mobile platforms harmonizes the visual and functional structure of the app. By embracing both material and Apple design guidelines, we created cohesive experiences infused with pragmatism, delight, and meaning.
Both redesigns involved some risk. On one hand, using only platform-specific controls could create a watered-down experience. But relying too much on one platform’s design conventions—e.g., creating an Android tablet app using iOS design conventions—would fragment the experience on the other platform. The last thing we wanted was to alienate our current audience by being overly inventive with the interface, decreasing learnability and discoverability. Applying design thinking to circumvent these potential problems was critical to our process.
StumbleUpon UX team members: Asher Blumberg, Amy Luo, Michael Spiegel, Jennifer Fleming & Matthew Spangenberg
The willingness to keep refining your ideas turns a good product into a great one.
Testing our design philosophy
At StumbleUpon, we use an agile workflow—rapidly iterating designs and prototypes to test our solutions. We A/B test different scenarios to see which works best, so we’ll often keep optimizing design even after the first implementation is complete.
We don’t just create clickable mockups, we also animate them to show transitions between screens, adding rhythm and momentum to interactions. This lets us visualize custom transitions and get vital feedback from our developers, because some animations might take too long to implement, slowing our 2-week design sprints.
Getting early input from engineers, fellow designers, product managers, and business stakeholders helps us create, raising the caliber of our ideas and pushing the product forward. The willingness to keep refining your ideas turns a good product into a great one.
Asher is a multidisciplinary designer striving to create compelling and functional experiences across mobile and web.
