Just to gist you a bit.
I was happy when I heard that, it was just to design a hero page. But, when I got the design brief it wasn't what I thought it was. 😑😑
No worries, I still love it though. 😊😊
So, let's dive in.
First things first.
What's a hero section?
A hero section is the first design element in the header section, a user would see when they visit a website.
From the UX design point of view, a hero section is a design element that introduces the solutions a website ( product ) offers, to solve user's pain points. .
With the above lines, we've understood what a hero section is. Let's go to the main topic why we're here.
So, after I received the design brief to redesign a hero section. I entered the discovery phase.
In this phase, I studied the services the brand offered and how they operate.
After understanding what the brand those and their target audience. I ventured into studying their users pain points.
To accomplish this, I went through the brand's reviews on google reviews and booking dot com.
After going through the reviews, I found the key pain points their users are facing, and how I can use that to inform my design for the hero section of the website.
After studying the reviews, I found 3 Key insights to inform my design decisions for the hero section.
Forgive me, I'm not spilling vital details about the brand because of NDA agreement issues. 🙇🙇🙇
So, since I've understood their users pain points. It's time to start designing. But, before I did that, I researched on some other brands offering the same product and some of my moodboards in dribbble.
Although, I've gone through moodboards. I thought about how to implement the three key insights, I got as the user pain points.
Lots of ideation went on, until I conclude on designing a slider style for the hero section. With this, the three solutions would be displayed in the hero section in their respective frames/containers for the the respective pain points.
Straight to Wireframe. I drew digital Wireframe to get the design structure that'll fit my design solution.
After arriving at the right wireframe, I needy. I created a style guide with the already existing brand colors and went straight to the Hifi fidelity design.
I choosed a glasmorphism UI for the hero section because it's part of the deliverables in the design brief.
I designed about 3 styles for the hero section before concluding on the one you saw earlier.
For the copies on the designs, I researched, iterated on several writings that'll befit and transmit the right message about the brand to it's users.
I also designed a prototype for the hero section to show how the users would interact with it.
So, finally I can release the prototype. 😊😊😊
View the prototype here
For the prototype, I set each screen to slide to the next after 10secs, that way the users would have enough time to read what's on each screen of the hero section.
So, when I finished this hero section design, I found myself in another day.😂😂😂
So, that's how I designed a hero section of a website for 24 hours.
Takeaways: I learnt that hero sections on a website is an important part of website that shouldn't be omitted while designing for the user.
Thank you for reading through. I'm available for jobs and collaborations. Feel free to contact me.