Refreshing Your Pocket
Pocket is a mission-driven company, and the best way to share our mission with as many people as possible — including brand new users — is with a crafted, beautiful, and adaptable product. We decided to refresh our entire experience and share the story behind the new design. The refresh is a significant dot release giving us an open canvas to build for the future.
Taking on a complete visual refresh of a line of products is a daunting task. As we embarked on this challenge, code-named Project La Croix* (because it’s refreshing 😉), we set some ambitious goals. (*Note: We are not affiliated with La Croix.)
Goal #1: Create the first draft of Pocket Design Principles
The design principles are a set of beliefs that will inform our future design decisions at Pocket. At a micro level they help our design team compare competing solutions, and at a macro level, they ensure that users’ needs are a priority. Here is the first draft of what we believe Pocket should be:
1. Consistent so I only have to learn once
Our product is cross-platform, and the transition from device to device depending on the environment should not require new learning.
2. Crafted with care, so it makes me feel confident about the quality
We want to create a great experience, like the experience you receive at a nice restaurant. We want our users to feel taken care of and feel the craftsmanship.
3. Accessible to all users, so everyone feels welcome
Our product is dependent on typography and color that enables readability and accessibility for all.
4. Respectful of content, so it helps me focus on what matters
Content creators put countless hours into crafting great stories, developing the best titles, and generating beautiful artwork. We must ensure we showcase all content in its best format.
5. Calming so I can escape the noise of the Internet
The internet is chaotic, loud, vibrant, and inconsistent. We should be more like your local library or reading nook. Simple, relaxing, and consistent.
6. Providing smart default experiences and the right tools when I need them
When products age they often become bloated with many minimally used features. We want to limit this from occurring and expose only the best features that are genuinely needed.
7. A reflection of me and my interests
We know Pocket is more than just a set of saved URLs. It’s a place for developing new skills, learning more about hobbies, and investments in personal growth. We need to be mindful of this to ensure our product continues to be a safe place for our users to grow.
Goal #2: Refresh our entire product experience
No stone was left unturned. We touched up everything from the onboarding illustrations and iconography to color and type. The changes are just the first pass and by no means final, but we think they are a great start. We view them as the first example of where we are heading.
Illustrations
Illustrations are helpful forms of visual communication, and they’ve always been used across our UI and marketing. As we considered the evolution of the Pocket brand we sought out illustrators who have a human touch and a sense of fun that has always been a part of the Pocket brand.
We worked with an illustrator, Miguel Angel Camprubi, to develop illustrations that are flat and playful — drawn by hand and with a sense of humor. His illustrations feature relatable, whimsical characters who do funny things with Pocket. We believe they are universally appealing, and we hope they make you smile.
Iconography
Icons are simple glyphs used in context to convey something. They are easy to remember and quickly recognizable. What makes these images especially unique is the fact that you can understand their meaning without added text or details.
The challenge is creating a full set that is consistent, scales across platforms, and expresses the brand. We want our icons to have a unique style, but we also don’t want them to compete against the content on the screen. So we developed a style inspired by our Pocket mark that consists of bubbly round corners and thick lines. They are expressive but not so unique that they become the focus.
Only designers genuinely know how much effort and time is put into each icon to ensure it’s pixel-perfect, straightforward, helpful, and expressive. We hope the new icons easily guide you through our experience without distraction.
Color
Color is incredibly powerful, and in product design, it is among one of the fundamental things that produces results. And for designers, it might be the most diverse tool available. Color supports readability, focuses attention on call-to-actions, builds brand awareness, and enforces consistency. Though it’s not complicated, picking the right color palette must be done thoughtfully and requires attention to detail so that it meets the needs of our users.
As a brand, Pocket has never shied away from using bold colors. Our core colors, mint green, teal, coral, and amber are bright and have become iconic in our rainbow bar. Color has been a great way to differentiate ourselves from others, and we continue to maintain a balance between brand equity and creating a calm experience.
We’ve made some subtle tweaks to the core colors and have added some new colors. We have added dark teal and blue to the core group with improved visual contrast and a clearly defined action color in mind, and we added a new suite of monochromatic friends. We use our core colors and create various tones and shades of it, a solution that represents our brand but in a tranquil way.
Typography
Typography is an element of digital products whose importance is sometimes underappreciated. In many products, the text on the screen is a big piece of what you see. In Pocket’s case, as a reading experience, it’s the primary form of content you interact with. Its massive presence in our experiences is significant, and it’s a big reason why we treat it as a first-class interface component.
We feel so strongly about our typography that we’re giving it a dedicated post. Check out Peter Cho’s post, Reading Types Deserve the Best Type for Reading, to learn more about the new typefaces in the Pocket refresh.
Goal #3: Increase weekly active readers
Our ultimate goal at Pocket is to help readers read more. The most significant risk of changing the UI is the possibility that we could push away our existing users. We want to attract new users with a modern look, but we also want to excite our dedicated supporters and give them an updated experience that they deserve. Our real measure of success will be when the new look and feel helps existing users read, watch, or listen to more than before.
Goal #4: Stop the baby duck syndrome
Newborn baby ducks who leave the nest early instinctively bond with the first moving object they see. A similar thing happens to people and the products they use. They tend to bond with the first version they use. Users learn how to use a product in a certain way, but then it becomes difficult to change that behavior. Product teams can more effectively combat this if they create a dialog of ongoing change with their users.
Pocket’s visual refresh is the start of this communication with our users. We want our users to know that we are continuing to improve the product they love, and they should expect ongoing updates and changes moving forward. We are already off to the races with bug fixes, UI refinements, and building new features!
Teamwork makes your Pocket work
A visual refresh may seem like a routine design exercise, but the reality is that it’s a complex collaboration requiring the whole organization to rally together. We were redesigning everything and impacting every team. We were reinventing ourselves while mitigating risk. And, after many rounds of brainstorms, surveys, design iterations, prototypes, and over 10k alpha builds we are excited to push all this work live. We hope you enjoy it as much as we do! 🎉🎉🎉
You can download Pocket on the App Store and Google Play Store or log in at www.getpocket.com. We can’t wait to hear what you think! Please send feedback or report bugs here: https://help.getpocket.com/contact.
