Design | 2020 | San Francisco, California
Mobile UI: BREW
PROJECT INFO
Client: Craft Coffee & Tea Lovers
Timeline: Two Weeks
Role: Designer & Prototyper
Tools: Adobe XD, Sketch
The BREW app is a nifty recipe tool for craft coffee & tea lovers! Whether it’s a perfectly steeped cup oolong or a smoothly poured french roast, the right specialty brew can make any day shine. With so many different drinks, methods, and industry secrets, it is easy to loose track of your own processes. On BREW, users can store brewing recipes, set a timer, discover new techniques, share with friends, and find nearby craft-focused cafes.
The Challenge
Create mobile app design that helps users keep track of coffee and tea brewing methods, while also supporting a community of craft lovers. Must have:
Save recipes
A timer
Ways to connect with other users.
Resources for brewing.
The Solution
An easy-to-use mobile app that’s primarily for saving recipes, but has supporting features that help users discover new methods, share notes with friends, and delve into the semantics of craft brewing.
BREW Notes - recipe cards that users can create and share.
BREW Timer
BREW Methods - an easily to use library of brewing info. Users can look up info, tips, and gear to help them develop new skills or remind them on procedures.
Cafe finder that locates craft focused cafes near the user’s location or by entering in the location.
Connect with friends via the app or by linking to social media accounts.
Inbox and messaging feature to share ideas and build community.
Look & Feel
Brew’s interface is focused on delivering clear information with minimal fuss. To do this, I chose a trendy Neumorphic design and reflected on the recipe cards I inherited from multiple generations of women in my family. My mother always used black index chards and pencil, so I chose a lighter color scheme and graphite color scheme to act as a primary color. I worked with a UI kit designed by Zvonimir Juranko as a jumping off point and adapted it to fit my needs. As an extra flare, I developed my own illustrations as a way to visually communicate methods and materials.
Font
Headlines & Subtitles: Sofia Pro - All Caps
Body & Details: Sofia Pro Soft - Standard
Font Sizes: 12, 14, 24
Colors (HEX)
Primary: Grey
(#575F6B; #E1E2E8)
Secondary: Purple
(#672D51; #AE4B89; #CB86B1)
Final Notes
The idea for BREW came from my love of specialty tea and coffee and my dyslexic brain’s inability to remember steep times and measurements. My initial designs and symbols were developed in Sketch, but I quickly pivoted to Adobe XD when realized I would need a kit to help me refine my design. Switching between the two softwares was frustrating, but ultimately a necessary adjustment for the project. as I developed the app, I found myself more and more interested in how the platform could connect craft-lovers. If I was to redesign it, I would put extra emphasis on community development with public/private groups, video demos, and give the Brew Methods page a search bar that connects with other users’ content. That said — I am very happy with the outcome of the design and know that my design decisions support the core needs of the user.