Navigation icon design & interactions for accessibility while adding delight to the user's experience.
ROLE
ICON DESIGN & ANIMATION
COMPANY
TURNIP MEDIA PVT. LTD.
Style Explorations
Exploring different styles from one another was important to discover the direction that would work best in terms of visibility and the brand's personality. I explored five styles—doodles, quirky, rounded and geometric icons, sticker-like icons and minimalist icons.
Refinement
The character-like icon styles worked well with the brand's personality but the simple stroke style worked well in terms of visibility. I further combined these elements to create refined versions which worked for both the purposes.
Final Icons & Animation
The second approach with white outlined icons fit perfectly with the rest of the app—they didn't create distractions and stood our just enough for their function. Though the active and inactive states of the icons were simply white solid and white outline, I added a quick burst of colour in the icon animation during the change in it's activity state. This enhanced the experience of the click.
Brief
The Turnip app started as a live streaming platform but quickly expanded to having audio rooms and social features. To navigate between multiple features on the app, we designed a navigation bar with 5 main areas—friends feed, explore, notifications, audio rooms and streaming.
Approach
Turnip's brand voice is playful, and the visuals are illustrative. The icons styles were explored in line with the brand's personality. I continued using multiple colours and rounded lines and corners to retain the feeling of approachability and familiarity.
Direction
I started with five different styles of icons that were very different in terms of forms but brought out the playful aspect of the brand. I also used the Turnip character as an icon for familiarity.