How a website comes to life from just being an afterthought
In this journey, let us deep dive into the creation of a landing page for a business idea.
Imagine you have an enthusiasm for craft beer and then you decide that you would like to start your craft brew which others can also experience. And of course, to start brewing you need brewing equipment, and selecting the equipment can be a daunting challenge if you are starting out, that is where Brewtech Rentals comes in. Even if you are an existing brewery and want additional equipment, Brewtech Rentals also caters to that need.
Problem statement
Designing a one-page website for a craft beer equipment rental company to get more rentals
Details of the project
Here is a showcase video of the final version
Key takeaways that I have learned during this project.
- Since this is my first project with a proper design process implementation, it has highlighted the need for a flexible and agile process in navigating the mess located between the problem statement and achieving the desired outcome.
- Iterations are a designer's best friend, creating different versions of an element and validating it so that it caters to the user and business needs is an important thing because the feedback loop provides insights on which path to continue.
- AI is a good tool that supplements your creativity, it’s like having another partner to brainstorm your ideas.
You might be thinking this is all good and stuff, but why reveal these points at the start? I do value your time and presented the final design along with the learnings. Call it like a TL;DR summary. But if you are actually intrigued and want to know more please do continue.
Let’s begin with the research.
As part of the 10k Designers cohort, this was my second assignment to design a landing page. And we had a list of topics to choose from to design.
The final problem statement was
How did we arrive at this statement mentioned above? Let’s take a deep dive.
Explorations
For our assignment, we had a list of businesses that we could select to design a landing page for that business. It was a list from the below tweet from Nights&Weekends
Out of the list, I started exploring some businesses that caught my attention and was exploring them. One of them that stood out to me was Craft Beer Equipment Rentals.
After deciding on the business, it was natural to accumulate more information about the craft beer culture in India.
An article from Slurrp states “Craft beer festivals, tasting events, and brewery tours have become increasingly popular, allowing consumers to explore different breweries and sample their offerings”
Link to article: https://www.slurrp.com/article/craft-beer-in-india-a-journey-through-flavour-and-innovation-1683882840834
Also as per the Expert Market Research Report. The Indian beer market stood at a value of nearly ₹371 billion in 2020. The industry is expected to reach approximately ₹662 billion by 2026, exhibiting an estimated CAGR of about 9.2% during 2022–2027.
Link to article: https://www.bwconclave.com/
The growth of microbreweries across the country points towards an increased interest in freshly brewed beer — craft or otherwise. This has, in turn, attracted several international beer brands, which want to make it big in the Indian market.
Link to article: https://yourstory.com/ys-life/brewdog-ceo-james-watt-on-why-india-is-on-top-of-the-global-beers-charts?utm_pageloadtype=inline_link
With this information, it was decided that the landing page would be designed for renting craft beer equipment. And what types of equipment are involved in that also was explored.
Defining the desired outcome
With the help of the explorations, reinforced my interest in designing a landing page for the rental company. But you might notice that the final problem statement is different, that is because the final desired outcome of getting more rentals is defined.
While doing initial research, there were two recurring personas which a craft beer equipment rental could cater to.
With the personas roughly defined, we now focus on what the business needs to focus on to attract these personas. Using ChatGPT to brainstorm some objectives which a brewing equipment rental company wants to achieve. And it gave a few objectives. From that, it was inferred that the desired outcome is to increase rentals by attracting various brewery clients.
And this is how we have arrived at the final problem statement, of designing a landing page for a craft beer equipment company (business) where the site helps in increasing rentals (desired outcome) for the business.
Laying down the structure
Before we jump into design, a basic structure needs to be laid out for the sections of the website, so a sitemap was created.
This sitemap was created using the AIDA model (a popular marketing model) where the new users are taken on a journey to experience the product/service which leads to the user taking action, in this case, an upcoming or an existing brewery can get details and then sign up for the rentals.
The Hero section grabs the attention of the user the moment he/she lands on the page with a headline and there is a call to action.
The Why Choose Us section, which lists the reasons to choose Brewtech Rentals, creates an interest in the user on whether they would like to choose the service.
What better way to create a desire for a person, than to use social proof. That’s where the Testimonials section comes in, listening to other experiences will create a thought in the user that the service/product is good.
Lastly comes the Rentals section, in which the user takes action to get further details of renting the equipment from the business.
Bringing the designs to life
Using the trusty pen and paper, I sketched out the first version of the site and then proceeded in Figma to design.
While wireframing, I collected some images for inspiration and references which formed the moodboard of the site.
For the initial design, I had in mind to approach a dual-color tone for the sections and proceed with that, below is the choice for the colors and typography
The colors were inspired by a poster from the mood board, and the font was chosen as Arimo which is a Google font. Also since we are designing a website, the content of the website needs to be contained and not all over the place, and that is where the grid comes in. Referring to the Bootstrap framework I chose a column layout of 12 columns with a maximum width of 1140 pixels, which is one of the widths of the Bootstrap desktop containers. With this in place, it’s time to add some spice.
The first design and potential improvements
These are the first designs after the colors and typography were decided. Went for a dual color tone for the sections of the site. And the main CTA sections had a background.
All the images used in the site are generated using mid-journey, that is the backgrounds, illustrations, people and brewing kits.
The first potential for improvement was noticed with the font weights, it was observed that regular text was not very easy to scan and read, this was discovered during casual discussions with my cohort mates. So I tried to discover which other fonts suit that use case.
Enter Open Sans, a pretty versatile font with different weights and also easy to read. Also, there is room for improvement in structuring the information in the elements.
After changing the font it was time to iterate on the components which are used in the website. Some changes were made.
With revised components, it’s time for the second version of the website. Also, the background colours were modified a bit, which reflected closer to the mood board.
While the contrast of the colours passed the accessibility standard, it was too harsh to the eye and you might have noticed that the layout of the sections has not changed except for the components. So let’s dive into that in the next section.
Layout Experimentation
Until now I was designing the whole website and it was discovered that I can experiment with layouts for each section.
The hero section initially started with just a background image and with the text in the centre. And then experimented with some plain background colours and changed the image and its positioning.
The next section is why choose us which, lists the reasons for selecting the service. At first, the layout of the cards was unique but, there was no anchor point for the card’s text that a user could scan to get information, so the layout of the content was improved, and also the fonts were tweaked.
Then comes the testimonial section, social proof of the service highlighting the customer experience. So first went with a standard layout then experimented with the background and card layout.
The rentals section, here is where the user will decide on renting the equipment. Initially, the main action was called Rent Now and the card gave a short description of the rental tier and there was an option for a custom quote. Then the cards evolved to have just three tiers with bullet points mentioning the rental tiers which is easy to digest information and the main action is now called Get Details.
Lastly comes the FAQ section, I did some minor tweaks to the section on the background and the colours and added an accent to the background just like the Why Choose Us Section
Final Version and Thoughts
Here is the final version of the site in its full glory.
As a career transitioner, This project gave me a good experience in the overall design process, on how to research and gather information and decide on what to implement for designing and iterating, the design process is not linear, it involves researching, designing and testing one path and then iterating on it.
This design can be further evolved with more testing, and still checking if the user does not drop off when exploring the website and takes the action of getting the details of the rentals which leads to more conversions.
Remember a landing page needs to convert new users into leads who inquire about the service or buy a product. In our case it’s more details about the rentals.
If you have made it this far, I appreciate that you set aside your valuable time to read through the journey of this website design from my perspective. If you did enjoy it then you can just share this article online on your social media, or you can just casually mention it to your colleagues in real life.
If you have an idea that you want to bring to life like this website, let’s have a chat about it. I’m open to design opportunities and we can explore them together.
Also, you can check out my portfolio at joshuacoutinho.com
My name is Joshua Coutinho and I hope you are having an awesome day. Thanks for reading!!
