App Name
Wine & Dine
Wine & Dine
Case-Study & Exploration
Role
UX Design
UI Design
Interaction Design
Prototype
Animations
Period
2019
Platform
iOS
Overview
Simple & Clean Interface
Recently, I finally found the time to experiment with the relatively new tool ProtoPie. This tool allows me to enhance static designs with interactions and animations, offering a glimpse of what the final polished product could feel like.
ProtoPie is a powerful tool, as it can simulate a wide array of phone sensors, imitating real usage behaviors effectively.
So, in my pursuit of thorough testing, I needed a concept or interface to kickstart the process. (Un)fortunately, I didn’t have one ready, which led me to create a fictional shopping and browsing app for female underwear and accessories. After all, what better way to put such a prototype to the test?
To begin, my first task was to gather appealing images of women, which, surprisingly, wasn’t a bad endeavor. Additionally, I collected a handful of pictures featuring female underwear and accessories.
Once I had amassed my selection of visuals, I proceeded to craft a clean and minimalistic UI, commencing the prototyping phase. Simplicity was key in designing the user journey, ensuring that the interface remained uncluttered and free from unnecessary elements or objects.
Make it pop
Clean and simple UI with beautiful high-qualities images and user-friendly navigation patterns.
Elements & Patterns
Navigating the app is a piece of cake, thanks to the main navigation options right at the bottom of the screen. You can’t miss it – it’s a slick floating Tab Bar with a cool pill-like shape.
Each tab on that Tab Bar has unique icons for different product categories.
The products are showcased in neat cards, each with key details like the title, a short description, and the available color options. To spot the latest arrivals easily, I’ve added a small red badge to the top left corner of those products.
Visual Foundations
Ensuring that the visual identity remains unified and recognizable across different screens and contexts.
Colors
Primary
Auburn Red
100
#A52A2A
80
#B75555
60
#C97F7F
40
#DBAAAA
20
#EDD4D4
10
#F6EAEA
Secondary
Sundown
100
#FFAEAD
60
#FFCECE
30
#FFE7E6
10
#FFF7F7
20
#EDD4D4
10
#F6EAEA
Tertiary
Eagle
100
#ADA997
60
#CECBC1
30
#E6E5E0
10
#FFF7F7
20
#EDD4D4
10
#F6EAEA
Neutral
Grey
100
#2D2D2D
80
#575757
60
#818181
40
#ABABAB
20
#D5D5D5
00
#FFFFFF
Typography
Primary
PT Sans Narrow Bold
Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Secondary
PT Sans
Aa
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Navigation
I aimed to streamline the navigation to its simplest form (I understand that such an approach might not be practical for an actual product, but it’s enjoyable to experiment with such concepts).
For the background, a unique feature involves zooming in on different parts of the model’s body as each associated category is tapped. For instance, when a user selects the bras section, the background focuses on the breasts, creating an engaging interaction.
Similarly, the product details modals maintain a consistent approach. A captivating image sits at the top, with an array of options and settings displayed below it, ensuring a comprehensive view of each item.
Search
Simply tap the “Search” button and begin typing your keyword. As you type, the autosuggest feature leaps into action, promptly displaying relevant products that match your query.
Profile
Tap the button located in the upper right corner to access your profile. Within your profile, you’ll find your shopping cart, wishlist, settings, and all the standard entries you’d typically anticipate.