Overview
This application prototype was designed for an assignment where I was tasked with creating an e-commerce app. It could be any service or good I wanted, so I chose a classic global favorite, coffee. I had a few different ideas for the name, but I knew I wanted something snappy (and app-y). So I settled on javapp, a silly combination name of java and app that conveyed exactly what it would do, be an app to buy coffee on.
I wanted to make it a platform for brands to sell all sorts of different coffee products, which is why I made the app name somewhat open ended. However, I was advised to stick with creating my own brand for javapp, and focus more on the UI side rather than trying to incorporate too many other brands.
The project required a loading screen animation, sign up/log in flow, home page, store pages, and a check out flow. This was the first time I used the smart animation features in Figma, and I had a lot of fun learning them. For the branding side, even though it was not a major focus, I still had fun coming up with an art style and basic logo. It's quick, it's smooth, it's fun, it's javapp, simple as that.
Loading Animation
Home Page Layout
Design Process
The first thing I did for this project was look at a bunch of other coffee apps, like Starbucks (surprisingly boring UI), Cofe, and a bunch of local places websites. Primarily, this research and competitor analysis gave me idea for categories and products, but it also showed me what I wanted to avoid. The homepage of Starbucks, for example, is nearly devoid of content. It does have a fun animation when you load it up though, which of course I would also implement.
I did some clientele personas, and found that most everyone drinks coffee, but not everyone wants to buy it on an app. So my demographic would be people around recent college grad to millennial, and for that demo I wanted an app that said "fun," and a unique brand that theoretically would have a delicious product. There had to be some reason to order this coffee specifically.
I focused on making the branding very cute and welcoming, and making the coffee lines silly and intriguing (like making an entire line of coffee based on my cat). Specialty coffee needs a niche, I couldn't just have a whole app to sell boring roasts.
The first thing when it came to layout was wireframes. I designed my little coffee mascot, and then got to work finding where I wanted him, and all the other page content, to lie.
The layout was pretty simple to figure out. It needed a login, a home page with links to everything on the app, a search feature for more in-depth shopping, individual item pages, and the checkout flow. I referenced apps for stores like Target to find the best way to organize categories and product pages.
Once I got all the wireframes done, I took a moment to create a whole series of coffee bag designs in the same art style as the mascot. Then I applied the designs to a digital mockup, and began the the high-fidelity design.
I created many different scrolls and carousels, as well as components for each item and animation. The search bar was definitely the most challenging part of the project to design, as it required a series of animations to appear as though it was actually functional. This is shown on the right in the purchase and checkout flow.
The entire process for this project was primarily an exercise in creating types of buttons. I made selection cards, multi-selection chips, sliders, checkboxes, and push buttons, all with their respective default and selected states.
Search/Checkout Flow
High Fidelity Page Layout
Conclusion
This was the first app I ever designed in Figma, and for that, I am really happy with how it came out. Looking back now, I notice a lot of things that I would fix (link mistakes, buttons that go nowhere, a minor issue with the credit card fields). Overall though, I think this came out pretty well. I think the color pallets and design style really suited the goals of the app, and I learned a lot about mobile layouts. I would definitely be happy to design more apps like this one in the future.
