Home

Underline to highlight menu buttons

About

Underline to highlight menu buttons

Projects

Underline to highlight menu buttons

Art

Underline to highlight menu buttons

Keeping Up With Nobos

Overview

Keeping Up With the Nobos is a Youtube channel that recently crossed the 50,000 views milestone. They wanted to strengthen their connection with their audience by selling merchandise on their own website. For this, they needed a concept design of the online store and merchandise so they could work out the logistics and launch their e-commerce store later this year.

My Role

I took up this project as a Solo Designer and was responsible for conducting User Research, User Experience Design, User Interface Design, establishing a consistent Brand Identity, Wireframing, Prototyping as well as testing the final designs.

Project Duration

 3 weeks

Challenge

- To eliminate the use of generic shopify templates while selling Youtuber merch.
‍
- To design a better shopping experience by reducing friction and unnecessary input from the user during the checkout journey.

Goal

- To design interfaces that are easy to navigate as well as represent the Brand’s personality.
‍
- To allow users to checkout as guests and enabling them to sign up only if they want to.

My Approach

Initially, I started out with getting to know the brand better and designing the Merchandise. My next step was to analyse competing Youtuber merchandising websites and other e-commerce stores by Youtubers.
One thing I quickly found out was that many of them were using generic templates made by their e-store partners, due to which their website wasn’t really matching with their Brand’s personality.
That being said, the checkout process was decent. There weren’t any out of the box hurdles or annoying pop ups, but the users were being asked to sign up. I also found out that almost 30% of customers leave a site, just to avoid Registering.

User Personas

Based off the KeepingUpWithNobos target audience, I created these user personas that helped me direct the further design process.
One of the persona (Gauri Shirke) is a subscriber to their youtube channel while the other one (Akshay Rathod)  isn’t.
The user persona of Akshay Rathod is colorblind and suffers from Protanopia. This helped me ensure that the website would remain accessible to all through using contrast and hierarchy responsibly despite having bright colors.

Mid-Fidelity Wireframes

I brainstormed some features that could be incorporated in the website to make it easy to navigate and went ahead with designing the mid-fidelity wireframes in AdobeXD. Designing mid-fidelity prototypes directly was a big mistake because it was time consuming and i designed them under the impression that the users won’t be able to understand the site through my sketches. Turns out sketches do the job and users do understand them and plus they’re quick and easy to make so learnt an important lesson through this mistake!

Insights

I presented the mid-fi wireframes to the users to get their feedback and to see if they understood the journey. Here are some insights I gained:
‍
- Eliminate the Quick View option as it wasn’t giving comple information about the product and added one extra unnecessary step to the journey.
‍
- Instead of just showing a small message saying ‘Item has been added to your bag’, a better way was needed to show that the item was added to the bag.

Design System

Before designing High-fidelity interactive screens, I created a design system that would help me work faster and compensate for the time I had lost while making mid-fidelity designs. The personas effectively guided a functioning design system that would work well with all users. The brand color of bright yellow, was easily understandable when it underwent the visual impairment test on Coblis (color blindness simulator) where it got converted to a gray shade. The color contrast and typography created a efficient visual hierarchy that was easy to understand by all users.

High-Fidelity Prototypes

After the design system in place, I designed the hi-fi wireframes and made the screens interactive.

Conclusion

This project was super fun to design- right from the process of designing the witty and quirky merchandise to designing interfaces that supported the uniqueness of the Keeping Up With Nobos brand.
‍
However, looking back at it, I would definitely change one thing- Hamburger menu and add a proper menu below the nav bar which would include the different product categories. Even if users were easily able to navigate with the hamburger menu, it did add an unnecessary click; so eliminating this would present all the categories directly to the user, thus making it easier for them to view and buy the merchandise.
‍
I ended up learning so many things during the 3 weeks of this project especially how important it is to manage your time by dividing tasks effectively and definitely not underestimating the power of sketches 😔. I also learnt how important it is to place myself into the shoppers shoes and design solutions that deliver the best possible experience that will solve their needs.

More Projects

Parivartan Social Foundation

View Case Study

I helped redesign Parivartan Social Foundation’s (NGO) current website and create a new website solution helps them establish a strong digital presence.

View Art

ART

Illustrations and Fanart using spontaneous styles and layouts that allow me to experiment.

Together, Let's Design
Unforgettable Experiences

Contact Me