Sitemap
Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

How I designed a website for Shenaz Treasury- a UI/UX case study

--

Here is the walkthrough of how I went through days of iterations to design the landing page of an actor, who is now a travel influencer, to showcase her merchandise launch. Let’s hop right in!

BACKGROUND

It all started when I joined the UI/UX Design cohort 6 of 10k Designers. The second assignment was assigned to design a webpage for a creator. This assignment aimed to learn visual design in Figma, problem-solving, and design processes.

Visual design for website

PROBLEM STATEMENT

“Designing a website for beachwear capsule collection launch by Shenaz Treasury ”

(P.S.…The merch line is hypothetical, I hope she launches a line soon)

Who is Shenaz Treasury and why I chose her?

About shenaz treasury

Shenaz Treasurywala is a travel content creator. She began her career as a model and VJ before transitioning into acting, appearing in numerous Bollywood films and television shows. (If you are a fan of Bollywood, you might have seen her famous movie, “Ishq Vishq” starring Shahid Kapoor and Amrita Rao)

In 2007, Shenaz decided to focus on her love for travel and became a popular travel influencer, sharing her travels and recommendations. Shenaz is also known for her philanthropic work and advocacy for various social and environmental causes.

I chose Shenaz Treasury because I admire her courage to try new things and explore the world alone and she is a very positive person. Also, she does not have a website and I can’t be more excited to design one for her.

So, let’s dive in already!

🕹️PROTOTYPE — FINAL DESIGN

Don’t like reading? Check out the prototype here.

💼 Jobs to be done

  • A platform which showcases and sells her merchandise.
  • To improve her online presence by creating a website which she doesn’t have right now that attracts travel enthusiasts and her followers.
  • A professional and trustworthy website which becomes her source for brands to contact her and fans to connect with her.

Target Audience

  • Travel enthusiasts who loves High quality Beachwear, Handbags and Accessories, regardless of their location.
  • People who follow Shenaz Treasury.

Design Process

Design process

I realised the process of designing a website is not linear. Multiple iterations were done until arriving at the final draft, ensuring a polished and optimised website experience.

🔍RESEARCH

As this project involved a hypothetical event, the majority of the research conducted was secondary in nature. While striving for accuracy, certain assumptions were made based on available information to define the design decisions.

I looked upon competitive influencers’ website and noticed a structure they follow, which is first they sell the influencer’s story to engage the users, then introducing the collection and shop now button followed by a contact form.

I also used chatGPT as my creative partner for re-confirming the information, rephrasing the copy. But I made sure to make the whole content personalised for my use case.

🧠 INFORMATION ARCHITECTURE

After research the information architecture is built to give a proper structure to the website.

Information architecture

🧱WIREFRAME

I started the process of wireframes on paper and also on whiteboard as it allowed me to create more and more ideas easily and quickly.

These wireframes served as a blueprint for the website’s structure, guiding the design and development process, and ultimately delivering a compelling user experience for Shenaz’s followers and new users alike.

LOW-FIDELITY WIREFRAMES

Low-fi wireframes paper wireframes

HIGH FIDELITY WIREFRAMES

high-fi wireframes digital wireframes

VISUAL INSPIRATION

I gathered a lot of visual inspirations from various website and wanted to give a fresh look to my website which is why I didn’t restrict myself to only travel related websites. I looked upon NFT websites, e-commerce and many more.

visual design inspiration board

🌠VISUAL DESIGN

Next after conducting research, creating wireframes, and gathering visual inspiration, I ventured into Figma to explore different colours and typefaces, starting with the impactful hero section to establish the overall design direction.

🎨STYLE GUIDE

Style guide for the website design typography colour story
  • The primary colour chosen for the landing page was a pastel pink, which perfectly aligned with the desired vibe. This soft and gentle hue served as the foundation for the colour palette, evoking a sense of elegance and sophistication.
  • To add a touch of freshness and visual interest, I added a neon green, providing a lively contrast that enhances the overall aesthetic.
  • For the hero section heading font, the goal was to find a typeface that was clean, stylized, and visually captivating. After exploring various options, the font “Italiano” was selected. Its refined and attractive design complemented the overall aesthetic of the landing page.
  • To create an appealing sub-heading, a combination of two fonts was used — “Inter” and “Monte-Carlo.” The font “Inter” was chosen for its clean appearance and generous letter spacing, ensuring easy readability. “Monte-Carlo,” with its cursive and stylized nature, added a touch of personality and flair to the sub-heading.
  • To maintain consistency and a clean look throughout the website, the font “Inter” was also used for the body text.

LOGO DESIGN

Branding logo design for the website

ITERATIONS

I started with designing the Hero section as per the wireframes and added few interactions in the same but the main focus of CTA was getting distracted and it was too much happening in the section.

I refined the Hero section in last version by having a focus on the image slider and the Call to Action buttons, which in turn gave the section a cleaner and fresher vibe.

Hero section design iterations
Iterations for Hero section
website design iterations
Iterations snapshot from figma working file
Snapshot of Iterations in Figma file

Although, the process of iteration can never end and every website needs refining with time we have to get out the final version for the launch.

In the final design, the whole website exudes a vibrant and captivating vibe, mirroring Shenaz Treasury’s adventurous spirit and love for travel.

It combines sleek design and engaging content to immerse users in her world of wanderlust and fashion.

Pastels with a subtle use of neon gives a tinge of freshness to the whole website.

Details of the sections of the website final design
Mobile web design version

👩‍💻 Behance

Please refer https://www.behance.net/gallery/173574825/UIUX-case-study-of-Website-design-for-Shenaz-Treasury for the Visuals.

🎉It’s a wrap!

Thank you for taking the time to read this case study, I hope you liked it.

I’m available for projects. Do reach out if you’d like to work with me or collaborate on some projects.

Connect with me on Twitter, Linkedin or reach out to me at ✉️ kritika.create@gmail.com for opportunities.

In case you didn’t know, on Medium, you can give up to 50 claps! 👏

--

--

No responses yet