Herman Digital Marketing website case study
Introduction
Client:
Herman Ismail
Duration:
4 week
Roles:
UI/UX Designer, UX researcher, Interviewer, Usability Test moderator, Interaction Designer
Tools:
User Research, Wireframing, Branding, UI Design, Prototyping, and Testing
“From the Empathy Research, I have managed to point up a few areas that potencial clients want to look for, rather than what I & Herman think clients are looking for.”
Scope and focus
Herman wanted a responsive website to promote his services to his customers as he is venturing to be a freelance marketing advisor for SME clients
Background
With the desire to start running his own business, Herman decided to quit his job, to start a small freelance business offering his marketing services to small and medium enterprise clients. He is able to offer clients an audit on current digital marketing strategies based on their business needs, create their web presence by making an attractive landing page, and good copywriting that is SEO friendly. The unique selling point strategy is that he is able to provide to his client is a free consultation (per-client basis), flexible costing and a set of free revisions for the website design works and social media posting. He wanted to be able to project the idea of marketing virtual assistance to his potential client.
Problem statement
With Herman just starting his venture into his freelance business, he wanted a website that is able to build client confidence in his skill & service while also able to include good testimonies from clients that he worked with previously.
Research
Goals of UX Research
I wanted to understand people’s behaviour, attitude and pain points when they choose to purchase digital marketing services so that Herman is able to provide a good user experience online.
Research Methodology
1) Competitive Analysis is the process of identifying competitors and evaluating their strategies in order to determine their weaknesses and strengths in order to better your own company.
2) User interviews can be a great way to extract information from users for user experience understanding, usability understanding and ideation.
Competitive Analysis
User Interview - Empathy research
The interview consisted of 5 participants in a 1 on 1 interview over Zoom/WhatsApp video conference. The participant's ages are similar but the key reason for their selection is their background that they are business owners that still operate in the category of Small & Medium Enterprise (SME). Which is the category of clients that Herman wants to sell his service to.
Empathy Research finding summary
- Help build new client trust by displaying testimonies and portfolios of previous works.
- Whatsapp is well integrated within the website for client contact points.
- Make sure that the client can set up a meeting with Herman from WhatsApp for consultation and discussion about their digital marketing needs.
- Highlight the advantage of free consultation before the client uses the package.
Define
Moving on to the define stage, I start to piece together a UX persona and its empathy map based on all the information gathered from the interview. Establishing a persona helps to form a reference that I can use to understand and emphatise with the end user in order to form the user experience later.
UX Persona
Empathy map
Design
Design stage will help take me closer to forming the final products. Sorting the information is the first step to take in forming the design requirement. To establish the foundation of the Herman digital marketing website, I start to draft out the planning for site content and layout using these methods.
- Low fidelity wireframes (Sketches)
- Task flow & user flow diagram
Low fidelity wireframe - Sketches
I had a discussion with Herman to sort out the information that has been gathered with the UX persona and the interview summary. We have concluded that the type of website that works best for him is a landing page that helps to funnel clients to Herman's business. With that confirmed, I start to explore a few ideas of the wireframe with hand-drawn sketches first.
Task flow & User flow diagram
For the task flow diagram, I have based the interaction design that would happen on the landing page on how my UX persona “Syed Fahmi” would approach the problem on the website. Exploring the UX persona interaction further, I draft out the user task flow to showcase the actions that users may take when navigating through the landing page and contacting Herman.
Mid fidelity wireframe
This is where all the ideas that is developed in previous works start to be put together and take shape. Using the sketch as the starting point, I began to create the UI layout in Figma for Herman’s landing page. Extra pages for the pop-up and comparison page are developed also as it help to flush out most interaction in the early design drafting stages.
Herman branding
As the landing page starts to take shape and form, It's time to develop some designs for the branding of Herman's digital marketing business. Herman already got some idea for the logo design in the beginning as he did draft them off in Canva. When the logo is passed to me, I started to fine-tune and developed the logo into a bit more solid form that is easily recognisable for web or print. After the logo is shaped is finalised. I work with Herman again in getting the colour scheme that we will use on the landing page. We started with a selection from a blue hue and then proceed to search for a neutral colour and an accent colour. The final result is in the style guide.
Test
Prototype v1
With the wireframe done and the design branding is ready, the next step is to start developing the final landing page that will be used as a prototype. Images are then selected, the icons are crafted and then all the items is put together cohesively for the final landing page design. When the design is ready. I was thinking to get the previous interviewee to test it out, but unfortunately, they are unavailable. So I started to make a backup plan to recruit newer people to help with the testing.
Usability testing
With the aim of the test to flush out the pain point and evaluate the user flow, I carried out the test to 4 participants using 2 scenarios. The test is done remotely with the participant sharing their Figma prototype screen over zoom. The scenario that is used is as per below
Scenario 01: Explore and navigate through the landing page and describe your experience out aloud
Scenario 02: To proceed with testing out Herman service, go through the packages selection process and describe your experience in choosing a package to go with.
All the usability test findings are recorded and then a report summary of their feedback is written. From the summary, points are categorised in the important topics of good and pains to help make improvements for the next iteration.
Prototype v2
Amendments is done to the prototype v1 and saved to a new version is created from that prototype to help see the difference done version 02 from version 01.
Conclusion
What I have learned
This is the first real client project that I work with and it's a very intriguing project by nature. Working together with Herman directly open up a new perspective on how I should approach UX design with a real client in mind, Going over details and good communication helps me to accomplish this project successfully. The challenge that I encounter is that not many people understand what is digital marketing and the one who does, already had their expectations of the outcome in mind. By emphasizing both sides, I am able to come up with a viable solution in the landing page prototype that may help Herman in getting customers to his digital marketing business.
Next steps
- Make iteration to the prototype when it goes live with real customer feedback.
- Explore and refine the way Herman do client meeting request if there is a large volume of customer he needs to interact with.
- Think of ways to improve a few aspects that can't be tested like if there is a large volume of WhatsApp requests is received, how would Herman sort or categorise them into levels of importance to meet up with clients.
Selected Works
