How to design a Website from scratch?
Well, at least how I did it 😅
Disclaimer: This case study is based completely on my experience and is not meant to serve as a guide.
Recently, I was approached to design an entire website. As excited I was; I was overwhelmed and terrified to begin this project.🙈 I was clueless how to start and if I even had the potential to do it.
Note: The website is currently under development, I will be attaching the link as soon as it is up.
After convincing myself to start, I decided to make a plan for this project. This really helped me visualize my steps and progress throughout the journey.
Basically I was asked to make a B2C website for a small business called ‘Soloboat’ that sells handmade soaps and skincare products
To understand the requirements better I gathered information from various sources.
STAKEHOLDER INTERVIEWS
Firstly, I jotted down the things I needed to find out:
- How did the business start?
- What is the purpose of the website?
- What type of information is required on the website?
- Who are the users?
- What does the brand represent?
- Any particular design requirements for the website?
- Any constraints to be kept in mind while passing the design to the development team?
- What is the current medium used to accept orders?
Next, I spoke to the small business owner.
- Bhavana started this business in September 2021
- Her family and close friends liked her products and encouraged her to start selling.
MOTIVE:
- She wants to spread awareness on organic soaps
- She wants people to realize the amount of harmful chemicals present in commercial soaps
- She wants to let people know that organic handmade soaps can be affordable too.
USERS:
- Currently her customers include teenagers majorly (98%) and acquaintances
- The reach is achieved only through Instagram currently.
REQUIREMENTS:
- A product website to help showcase her products as well as allow users to order them
- Both web and mobile versions
- Simple and efficient design
- Preferably pastel colours (blue, green, pink)
- Categories — soap, face pack, gift; reviews and testimonials
- No random pictures, only what she has made
DETAILS:
- An About Us section — why we started — who created — what is the motive
- + and — buttons
- Skin type categorization
- Mention uses
- Mention bestsellers — charcoal and aloe Vera
- Cart should be included
- Filters — shapes, size, price, skin type
I spoke to the developers next and was reminded to keep dimensions in mind and make a ‘responsive design’ which meant that the design should be able to dynamically change based on the screen size.
Note: An ‘agile process’ was decided to be used for this project. While meant constant updates, changes and feedbacks. It was felt that this methodology would best suit the time constraints and expectations of this project.
HYPOTHESIS
To get a better understanding and validate my assumptions I resorted to secondary or desk research as well as primary research in terms of the product (handmade soaps) and the website.
PRODUCT DESK RESEARCH
What are the reasons for some people preferring handmade and natural soaps? source
- Health and wellbeing
- Sustainability
- Handmade soaps are made with care and attention to set recipes
- Often provide better value for money
- Use higher quality ingredients
- Unique
- Comparatively environment friendly
- Economical
What is the current scenario? source
- The market for natural handmade soaps will grow as the awareness amongst consumers grows. The consumer of today is highly aware and reads ingredients, label information and is knowledgeable on various ingredients.
- Indian Ayurvedic soap and characteristic soap are picking up prominence over the globe and have a tremendous market and client base.
- Individuals with new business thoughts and extraordinary formula for the soap are increasing high achievement
- Industrialists are putting resources into this business and finding carefully assembled cleanser business best as a start-up
USER INTERVIEWS
I spoke to people who are currently using the Soloboat products and potential customers.
WEBSITE DESK RESEARCH
The goals of a product page: source
- It should explain what is for sale
- It should establish trust
- It should create an experience
- It should be intuitive (accomplish all of the above goals without bombarding the user with information)
- The product page’s goals should align with the buyer’s goals
7 product page requirements: source
- Feature image
- Gallery or product photos
- Product overview, including title, price, features, CTA and customization options.
- Product description.
- Social proof, including review and ratings.
- Similar product suggestions (upsell and cross sell).
- Human interaction for any help or guidance needed.
Features:
- Be direct (Research has shown that 79% of people tend to scan a webpage instead of fully reading it)
- Answer questions that shoppers might have about your product
- Bring your product to life with images
- Give shoppers a clear call to action
- Make it easy for customers to add an item to their cart in just one click
- Be prominently positioned on the page
- Stand out from your other content
- Use simple, action-oriented language
- Provide testimonials
According to Nielsen Norman Group, the most effective product descriptions are scannable, concise, and objective. This type of content was shown to improve usability by 124%.
Suggestions method:
- Customers also viewed
- Related products
- You may also like
Why Subcategories Matter: source
- Organisation
- Help Those Browsing
- Help Those Searching
- SEO
DEFINE
After all the research I defined all the types of products to put onto the website.
Next I defined a hierarchy for the website
I had more questions and following the agile process I approached the stakeholder once again.
After a lot of brainstorming (voice notes🤣) I decided to make some changes I iterated eventually based on practicality and feasibility.
A couple of things I brainstormed about:
- How would users search for products?
- Is a separate FAQ section needed?
- What requirements of the stakeholder are not being satisfied?
- Can we combine categories within the landing page?
Next I made a simple journey map to analyse the process involved while using the website. This basically meant understanding the steps involved in the process of using the product; the difficulties and good parts encountered.
IDEATE
Next I defined HMW(How Might We) questions and ideated some possible solutions with my reasonings for it.
Based on the general solutioning I made, I started making rough paper wireframes. This included desktop and mobile versions.
Apart from the visual hierarchy of the contents, I also ideated the possible cart icon and an empty cart page on paper.
WIREFRAMING
Next, I converted my ideas and paper wireframes to visualize them digitally via digital wireframes on Figma.
Some things I decided while wireframing to help with designing later was to maintain a 48px side margin and proper spacing according to hierarchies.
After the initial wireframing more enquiry was done and a couple of changes came up.
After further changes the following wireframes were finalized. It was decided to after all have separate About US, SHOP and CONTACT page as the information would keep increasing on the page as time passed.
Similarly, the mobile wireframes were iterated as well.
Next, the Cart section was wireframed.
While I was initially overwhelmed with the project; by the time I reached the wireframing stage I was in a groove as I had a good idea of what had to be done. I was actually enjoying the process of analyzing and iterating as per requirements.😎
UI DESIGN
Before getting to the design, I played around with some colours from the logo to decide on the palette for the website.
Using the above colours and the pictures provided by the client I designed the landing page of the desktop version of the website.
Note: The website banner is to be decided later and has therefore been left blank.
After receiving reviews and understanding what could be done better. I changed the font from ‘Merriweather’ to a more modern font with smoother edges ‘Exo’.
I had initially added the leaves to add a hint of green to represent the natural aspect of the soaps. But as the client changed her mind, I removed them. Overall I attempted to improve the maturity of the design (a more clean one). It resulted in the following landing page and eventually a DESIGN GUIDE.
Similarly, I designed the remaining pages in an iterative manner. For example, a new skin care product ‘body scrub’ was made by the client while I was designing, so that was added. Another instance was mentioning the developers and designer in the footer instead of the About Us section.
While creating a design system for the desktop version I was simultaneously making one for the mobile version to ensure a responsive design.
While I did initially want to have a separate testing stage, The design was tested multiple times by the developers and the client during it’s conception. I do hope we get perform usability testing with real users soon.
KEY LEARNINGS
- This was a really amazing opportunity where I not only got to expand my design knowledge and confidence.
- I also got to learn the various processes and aspects involved while working with a team.
- I learnt to voice out my opinion and at the same time adhere to the wishes of the stakeholders, therefore building my communication skills.
- I was able to experience working on a real world product and the challenges that come with it.
- Most importantly, I grew into a new stage as a life long student (and aspiring UX Designer😁)as I began to appreciate human centered design even more.
Thank you for reading. Hope it helped!👍
UX Case Study by Sanjana Somanath Sannamari
For more creative content follow me on instagram and LinkedIn🥰
