A web UI/UX Design for a business that provides various educational and design services.
CLIENT
Gummys
ROLE
UI/UX Designer
SERVICE
Landing Page Design
Project Details
Problem
Gummys wants to create a website to develop its business, which has only run through Twitter (promotion) and WhatsApp (transaction).
Gummys plans to build its business through other platforms such as Instagram so it needs a website as an information center for the list of services offered.
The website's functionality is expected to provide customers with the clearest possible information before directing them to transact via WhatsApp.
Goals
Provide an attractive landing page
Provide a list of services offered along with details
Provide clear pricing information
Provide testimonials
Provide a guide on how to order
Provide an order flow that directs to WhatsApp with an order format (chat)
Role & Responsibility
My role here is as a UI/UX Designer. I translated the owner's business requirements into a high-fidelity UI design which will be implemented as their main website.
Constraints
The initial requirement is just to design a single-page landing page that has all the features requested. I designed the desktop and mobile versions first, but when I wanted to move to implement the design in a no-code platform, the project was completed for an undisclosed reason. Hence, I just made the design and did not develop the website.
Design Process
Requirement Gathering
I scheduled a meeting with the business owner to gather all the requirements and what they planned to do for the website. They actually just want a simple but complete landing page that has all their service information and a CTA that directs the visitor to order from WhatsApp. All of the requirements for the landing page are:
Landing page
Service list
Pricing information
Testimonials
How to order
CTA flow to WhatsApp
They didn’t have any specific style or design references for the website so I’m free to explore any kind of design. From there, I listed the section for the single-page landing page and defined what content would be displayed in each section. The sections are:
Hero section
What is Gummys
Services list
How to order
Testimonials
CTA
Footer
The website is using the Indonesian language so what I wrote above is just for documentation using English.
Low-Fidelity Design
For the lo-fi design, I used a design template from Figma Community (which I forgot the source) and later explored its section using my design style, but the initial layout reference was from that template.
This is the rough version of the landing page design:
Final Design
Based on the low-fidelity design, I explored various design elements in each section, here are final design with each section's explanation.
Hero Section
The final and approved hero section goes like this:
It’s quite simple, containing a full-width faded image as a background, with blue as the primary colour on the CTA and background. The decision to choose this image is because it perfectly aligns with the company's goal which is helping student to complete their tasks using Gummys’s assignment service. The main text also supports the business goals which say “Get all your tasks done instantly!”
The primary color here is azure blue which will be used on many design elements, but I also explored a gradient as a supporting visual element which also be implemented on various highlighted information like company name and numbers data. The gradient is created from the primary colour and I combined it with light green so it made a beautiful transition from blue, to cyan, to light green.
On the navigation bar, I created a menu that if clicked will scroll down to the respective section (since this is a single-page landing page). The CTA button is also there which will take visitors to Gummys WhatsApp directly. On the first view (hero section), the navigation bar fill is transparent, but when scrolled down, it will change into white fill, like this:
Under the image and main section, I added data numbers to bring business credentials right away so the visitors will know that this business is trusted with various proven data.
Our Services Section
For this section, I displayed all the services that Gummys have and made it a card so it looks very clickable. Each card has a respective image or illustration and the service name, when clicked, this should go to the detail page of each service but since they only asked me to create the landing page design, then when clicked, each card will direct to WhatsApp with a templated text message about the specific service chosen.
There are eight different services here and the reason why I design it like this and not as a carousel is because I want the visitors to clearly see all the business services in one go without having to scroll or swipe.
Why Us Section
As requested, I added a Why Us section with all the information that engages visitors to be more trusting to order from Gummys. Under the section, I added an alert that says a new benefit is added for visitors who buy the services. This alert is a function also as a CTA since visitors can click right away to order the services. Why do I place the alert here and not anywhere else? In this section, we are talking about the benefits of why you should order from Gummys. Since the alert is also about a new benefit that has been added (a royalty stamp for the buyer), then I decided to put it there to create the feel of excitement.
Testimonials Section
The testimonials section contains a carousel of cards that display testimonial messages, customers’ images and names, also with the services they ordered. This section is auto-scrolled to create an unlimited feel that the business has many customers.
How to Order Section
This section is quite simple, highlighting three steps that visitors need to take to easily order the service. As simple as that.
CTA Section and Footer
For the CTA section, I designed a banner with faded background showing an image that resembles the excitement customers will feel after ordering the service. The image is also aligned with the text and placed fitly so it won’t feel distracting. On the right side of the banner, there is a CTA button that is made very standout and clickable.
The footer is also very simple, having a section navigation and showing the business's social media. This design is approved by the business owner and they think that all the information needed is already added.
Mobile Version
I also made the mobile version of the design with several changes to the layout. The information is the same as before, just some layout changes here and there to fit the screen size.
Measurable Outcomes
When the landing page design is completed, I deliver it to the business owner and they like it a lot, especially for the colour combination between the primary and the gradient, thus making this project done without revision.
Limitations & Lesson Learned
Designs That Didn't Make It To The Final Cut
The initial requirement for the project was just the single-page landing page, but there was also a talk between me and the business owner about designing the service detail page. The current flow is that when clicking the service card, it will take visitors directly to WhatsApp using a templated chat, but with the detail page, there will be detailed information about every service available like description, pricing, terms and conditions, service testimonials, and ratings.
I tried to design the detail page, I made a rough high-fidelity one but before I finished, the business owner told me that they wanted to wrap up the design for some undisclosed reason, thus making this detail page design didn’t make it to the final cut.
Designing this project was a nice experience, I explored many design styles and visual elements, and even though the design didn’t make it to the development phase, it’s still become one of the projects that I am proud of.
