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.
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?
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
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.
🧱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
HIGH FIDELITY 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
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
- 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
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.
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.
👩💻 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! 👏