TGS Website Redesign
The GAS Station (TGS), a boutique marketing agency
Objective: To conduct a systematic inspection of the UI and address the usability problems while improving the visual design.
My Role
UI/UX Design
Visual Design
Brand Design
Time Frame
Jul - Aug 2021
2 months
Project Type
Internship (Team of 2)
Design Process
Employing the Design Thinking process, I adapted the process to suit the needs of this project.
A heavier focus was put on ideation stage for this website redesign.
Empathise
Heuristic Evaluation
Understanding Users
Define
Problem statement
Ideate &
Prototype
Information Architecture
Wireframing
Test
Usability Testing
Heuristic Evaluation
A website with usability and branding problems
Clients are unclear about the agency’s services due to confusing navigation flow of the website.
Lack of clarity results in high drop-off rate, causing the company to lose potential clients.
Visual design does not communicate agency’s brand identity, and the company loses out on an opportunity to differentiate themselves.
How it worked before
I conducted a heuristic evaluation of the website based on the 4 focal points of design:
Navigation, Content, Presentation, & Interaction.
These were the key issues that I found.
#1
Confusing Information Architecture
Users don’t know where to go to to look for the services that the agency provides.
#2
Inconsistent Categorisation and Labels
Adds to users' confusion
Understanding Users
Our users value credibility and creativity
Insights & Recommendations
Credibility of marketing agency is important to users
Recommendation 1:
Need to show proof of works
Services and past works of agency are key decision-making factors for clients
Recommendation 2:
Highlight services and past works
User Journey Mapping
Scenario
Nancy is looking for a digital marketing agency to work on her brand as a real estate agent. She wants an agency that is experienced with social media campaigns and videography for her branding video.
Expectations
-
Clear online information
-
Able to browse through past works of agency
-
Looking for a creative company that can differentiate her brand
Inquiry Stage 🧐
-
Gets contact of TGS through google search (include other different avenues)
-
Find out more about services and past works
-
Determine brand reputation
Consideration Stage 🤔
3. Researches other agencies in Singapore
4. Compares services provided, quality of past works, and suitability to her needs
Decision 👍
5. Decides to reach out to find out more and get a quotation
Emotional Experience
Experience with Previous Website
Curious
Overwhelmed
Doubtful
Goal
Curious
Inspired
Certain
Recommendations
Showing branding and past clients is important in inquiry stage to indicate good brand reputation
Recommendations
Need to differentiate from competitors
Works are only explored if Services suit clients' needs, so need to facilitate more exploration of pages
Recommendations
Call-to-action needs to be strong and consistent
Setting the Goals
Having evaluated the website and anchoring the rest of the design process using the 2 key personas, I then listed out the priorities that were critical to address in this project.
Improve navigational structure
Improve visual design to show brand identity
Improve consistency & visual hierarchy
Reworking the Info Architecture
Navigation system was modified into: Home, Services, Works, and Contact Us to show clear difference in content.
Users' mental model tells us that services and past works comes hand in hand when clients are evaluating agencies. Someone who is interested in the services that TGS provides, they are able to quickly glance at the past works.
Wireframing
Navigation system was modified into: Home, Services, Works, and Contact Us to show clear difference in content.
Users' mental model tells us that services and past works comes hand in hand when clients are evaluating agencies. Someone who is interested in the services that TGS provides, they are able to quickly glance at the past works.
The Solution
Usable Navigation
Matches users' mental model
Eye-catching Visuals
-
Hero section on landing page plays on the agency's name of "Gas Station" to build a distinctive brand identity, along with its mascot
-
Subtle blinking lights motion in 'fuel meter' to bring the illustration to life
Clear Categorisation of Services & Works
-
Irregular blob shapes draw attention to the services that the agency provides
-
Bulleted lists to facilitate scanning
-
Icons facilitate understanding of services
Writing for Clarity
-
Precise & simple copywriting
-
Clear headlines facilitate scanning
-
Contractions to create conversational tone
-
Active voice with clear call to actions
Usability Testing
After designing the final product, I wanted to validate my design changes with usability testing. However, I had reached the end of my internship stint with TGS, so I did not manage to conduct the tests with their actual clients.
I decided that it would be valuable for myself as a designer to still conduct some tests on my own anyway, to gather some feedback and insights so I can learn from this experience and see how I can further improve my designs. These are my learnings after testing my designs with 3 participants, which can be implemented in future work.
One-on-one in-depth interviews
Learnings
Good
Improved brand perception of warm, friendly, & vibrant
Reached destination in fewer clicks & easy to navigate
To be improved
Hero section can be misleading – improve connection of gas station visual to marketing agency
Cater to universal usability – increase contrast ratio and larger click targets
Takeaways
This was an exciting project for me, as a self-observed and initiated project. Collaboration was key in making this project come to life. Creating a website redesign pitch and constant communication with colleagues allowed me to successfully communicate about the value of UI/UX.
Here are my key learning points:
-
Designs should always suit users' mental model
By uncovering users' mental models, key usability problems in TGS's website were resolved by modifying the information architecture to drive proper navigation flow.
-
Visual design strengthens brand experience
The new website also brings out the distinct brand identity of 'The GAS Station' using visual design. This integrates marketing into the product experience to attract users.
Given more time and resources, my next steps:
-
Conduct full-fledged user research by conducting user interviews with users who fit the roles of the personas, to understand their motivations, thought process, and task flow when using TGS's website
-
Conduct Pre-Usability Testing to identify gaps in the Heuristic Evaluation and further improve on the website design
-
Conduct multiple rounds of usability testing and iterations to constantly refine the website based on UT findings
