freak the frap out homepage for a cafe or coffee shop

Note: Please see the Case Study deck here.


Conceptualized and created a website & app for a Frappuccino cafe that allows users to customize their drinks by manipulating factors like sugar and ice, and including add-ons.


Mistaken orders and complaints that drinks were either too sweet or not sweet enough.


Create an app that increases comprehension of orders and allows users to control important parameters for a fully custom drink.


This was a solo project. All aspects of user research, wireframing, prototyping, ideating, generating insights, designing were done by me.

order in three easy steps select drink base, adjust sugar and ice level, place order

During the process, I learned that UX design is fun... and not as hard as I initially thought! I loved exploring all facets of UX designs, from research, to storyboarding, to UI.

home page for coffee shop cafe
checkout page example for coffee shop
drink customization example for coffee shop

This was my first UX design project ever, and I'm pleased with the results. It's functional, clean, and (not to brag, but...) I love the drink customization feature. I used Figma for mobile and Adobe XD for website & tablet.

paper wire frames by ryan scott shannon ux design wireframes
mobile app gray mockup wireframe
prototyping app for coffe shop
digital wireframes for google ux design professional certificate


Deciding on which factors to allow users to adjust was the hardest part. Ultimately, I decided on "Ice Level" and "Sweetness Level" to keep things simple. And, there are plenty of add-ons, such as milk substitutions, that users can easily select.


Creating the app, then the responsive website, was surprisingly fun and not too time-consuming. I enjoyed the research aspects of this project as much as I did the UI design.

Get in touch: