Still in the works, I will complete the project creation process as soon as possible.
Revamp the Sangfor Website
Revamp the Sangfor Website
Revamp the Sangfor Website
About The Company
About The Company
Sangfor is a leading global technology company focused on cybersecurity, IT infrastructure and cloud computing solutions. Founded in 2000, Sangfor is headquartered in Shenzhen, China, and has grown rapidly to reach more than 230,000 customers in 160 countries.
Sangfor is a leading global technology company focused on cybersecurity, IT infrastructure and cloud computing solutions. Founded in 2000, Sangfor is headquartered in Shenzhen, China, and has grown rapidly to reach more than 230,000 customers in 160 countries.
My Role
UX Designer
UX Designer
Year
2021-2022
2021-2022
Tools Usage
Figma
Figma
01
01
Creative Team
Creative Team
We are a creative team consisting of a creative lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.
We are a creative team consisting of a creative lead, UX Designer and UI Designer responsible for creating great user experiences. We work together to understand user and business needs, then design and build interfaces that are intuitive, engaging, and easy to use.
Monica Chatlin
Creative lead
Monica Chatlin
Creative lead
Monica Chatlin
Creative lead
Agni Fauzan
UX Designer
Agni Fauzan
UX Designer
Agni Fauzan
UX Designer
Dhamapala Febrianto
UX Designer
Dhamapala Febrianto
UX Designer
Dhamapala Febrianto
UX Designer
Joashua Aditiya
UI Designer
Joashua Aditiya
UI Designer
Joashua Aditiya
UI Designer
Rizky Amelinda
UI Designer
Rizky Amelinda
UI Designer
Rizky Amelinda
UI Designer
02
02
Objective Project
Objective Project
Improvements to the Sangfor website aim to improve the user experience and user interface, making the information architecture simple and clear with a design that complies with the Web Content Accessibility Guidelines (WCAG). The goal is to transform the Sangfor website into a platform that is visually appealing, intuitive and easy to access for users.
Improvements to the Sangfor website aim to improve the user experience and user interface, making the information architecture simple and clear with a design that complies with the Web Content Accessibility Guidelines (WCAG). The goal is to transform the Sangfor website into a platform that is visually appealing, intuitive and easy to access for users.
03
03
Problem Statement
Problem Statement
Sangfor's current website has a complex user experience and inconsistent user interface. The information architecture is unclear and difficult to navigate. Additionally, this website may not comply with the Web Content Accessibility Guidelines (WCAG), potentially excluding users with disabilities.
This lack of clarity and accessibility prevents users from easily finding the information they need and can negatively impact Sangfor's brand image.
Sangfor's current website has a complex user experience and inconsistent user interface. The information architecture is unclear and difficult to navigate. Additionally, this website may not comply with the Web Content Accessibility Guidelines (WCAG), potentially excluding users with disabilities.
This lack of clarity and accessibility prevents users from easily finding the information they need and can negatively impact Sangfor's brand image.
04
04
Design Process
Design Process
A design-thinking approach to bring creative solutions to the table. Here's how the discover, define, develop, deliver framework can be adapted for this specific context:
A design-thinking approach to bring creative solutions to the table. Here's how the discover, define, develop, deliver framework can be adapted for this specific context:
Discover
Discover
This initial stage focuses on understanding the situation. You'll gather information through research, identify the core problem and explore different perspectives.
This initial stage focuses on understanding the situation. You'll gather information through research, identify the core problem and explore different perspectives.
Discovery
Discovery
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
User Findings
User Findings
Navigation and User Experience :
Complex Navigation : Users found the current website navigation cumbersome and not intuitive, leading to difficulties in finding relevant information quickly.
Inconsistent Design : Inconsistent visual elements and a lack of a unified design language detract from the overall user experience.
Mobile Responsiveness : The website's performance on mobile devices is suboptimal, with issues such as slow loading times and poor layout adaptation.
Content Accessibility :
Technical Jargon: The content is often filled with technical jargon that can be overwhelming for non-technical users, making it difficult to understand the value propositions of Sangfor's products and services.
Search Functionality: The search function on the website is not as effective, leading users to struggle to find specific documents or resources quickly.
Language Support: Limited language options restrict the accessibility for a global audience, particularly non-English speaking users.
Performance and Speed:
Loading Times: Users report slow loading times, particularly on pages with heavy graphics or multiple embedded resources.
Technical Issues: Occasional technical glitches, such as broken links and non-functional forms, frustrate users and hinder their experience.
Navigation and User Experience :
Complex Navigation : Users found the current website navigation cumbersome and not intuitive, leading to difficulties in finding relevant information quickly.
Inconsistent Design : Inconsistent visual elements and a lack of a unified design language detract from the overall user experience.
Mobile Responsiveness : The website's performance on mobile devices is suboptimal, with issues such as slow loading times and poor layout adaptation.
Content Accessibility :
Technical Jargon: The content is often filled with technical jargon that can be overwhelming for non-technical users, making it difficult to understand the value propositions of Sangfor's products and services.
Search Functionality: The search function on the website is not as effective, leading users to struggle to find specific documents or resources quickly.
Language Support: Limited language options restrict the accessibility for a global audience, particularly non-English speaking users.
Performance and Speed:
Loading Times: Users report slow loading times, particularly on pages with heavy graphics or multiple embedded resources.
Technical Issues: Occasional technical glitches, such as broken links and non-functional forms, frustrate users and hinder their experience.
Business Findings
Business Findings
Brand Preception :
Outdated Design : The website's outdated design impacts the brand's perception, making it appear less innovative compared to competitors with modern, sleek websites.
Brand Messaging : Inconsistent messaging across different sections of the website dilutes the brand's core value proposition and unique selling points.
SEO and Online Visibility :
SEO Optomization : Poor SEO practices have led to lower search engine rankings, reducing organic traffic and visibility.
Content Strategy : The lack of a coherent content strategy affects the website's ability to attract and retain visitors through valuable and regularly updated content.
Brand Preception :
Outdated Design : The website's outdated design impacts the brand's perception, making it appear less innovative compared to competitors with modern, sleek websites.
Brand Messaging : Inconsistent messaging across different sections of the website dilutes the brand's core value proposition and unique selling points.
SEO and Online Visibility :
SEO Optomization : Poor SEO practices have led to lower search engine rankings, reducing organic traffic and visibility.
Content Strategy : The lack of a coherent content strategy affects the website's ability to attract and retain visitors through valuable and regularly updated content.
Define
Define
It's time to define the problem or opportunity more clearly. Here, you'll synthesize the information gathered, analyze the data, and clearly define the specific challenge
It's time to define the problem or opportunity more clearly. Here, you'll synthesize the information gathered, analyze the data, and clearly define the specific challenge
User Persona
User Persona
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
During the initial phase of the project, our team conducted extensive research to understand the target audience, user needs, and project requirements. We conducted analyzed competitors, and gathered insights to inform our design decisions.
Name
Riana
Age
32 Years
Occupation
IT Security Specialist
Background
Riana has a bachelor’s degree in cyber security and has worked for six years in the techbnology industry, As an IT Security Specialist, he is responsible for identification, risk assesment and protection of comoany data security
Goals
Design Consistency
Clear Information Architecture
Detailed Product Information
Support Resources
Frustation
Complex Navigation
Insufficient Product Details
Lack of Immediate Support
Difficulty integration of new security systems
How Might We
How Might We
To develop existing problems, it is necessary to ask questions so that the resolution of existing problems is more focused and clear. Here are 3 questions that must be answered in process design.
How Might We improve the website's navigation to be more intuitive and user-friendly, allowing users to find the information they need quickly and easily?
How Might We make Sangfor's content clear, concise and easy to understand for a global audience, even for non-technical user and those who don't speak english?
HMW optimize the website's performance to ensure fast loading times, minimize technical glitches, and create a seamless user experience across all devices?
To develop existing problems, it is necessary to ask questions so that the resolution of existing problems is more focused and clear. Here are 3 questions that must be answered in process design.
How Might We improve the website's navigation to be more intuitive and user-friendly, allowing users to find the information they need quickly and easily?
How Might We make Sangfor's content clear, concise and easy to understand for a global audience, even for non-technical user and those who don't speak english?
HMW optimize the website's performance to ensure fast loading times, minimize technical glitches, and create a seamless user experience across all devices?
Develope
Develope
At this stage creativity takes center stage. With a well-defined problem, you'll brainstorm and develop potential solutions.
At this stage creativity takes center stage. With a well-defined problem, you'll brainstorm and develop potential solutions.
Sitemap
Sitemap
Based on the research findings and the concept template wireframe, we have created a sitemap to visualize the structure of the website or application. This will help organize the information architecture and ensure a seamless user experience.
Based on the research findings and the concept template wireframe, we have created a sitemap to visualize the structure of the website or application. This will help organize the information architecture and ensure a seamless user experience.
Analyze the current Sangfor website and list templates to use as a benchmark when creating a sitemap
Determining the level on the sitemap and creating a sitemap on the whimsicall application
Discussion with the internal team to discuss the final sitemap
Revision of feedback from client & sitemap successfully created
Analyze the current Sangfor website and list templates to use as a benchmark when creating a sitemap
Determining the level on the sitemap and creating a sitemap on the whimsicall application
Discussion with the internal team to discuss the final sitemap
Revision of feedback from client & sitemap successfully created
Template Wireframe
Template Wireframe
First, we put together a wireframe template in Excel to shorten the timeline and make it easier for the technical team when building the project. we made the concept template wireframe from 130+ pages to 32+ Pages making it easier for my team when building the project.
First, we put together a wireframe template in Excel to shorten the timeline and make it easier for the technical team when building the project. we made the concept template wireframe from 130+ pages to 32+ Pages making it easier for my team when building the project.
Discussion with the internal team (PM, BA, Tech, Creative) to discuss the page that will be designed
Breakdown of all Sangfor pages that will be designed
Group Sangfor pages based on levels in the sitemap and analyze similar layouts on each page
Discussion with all project teams to discuss the final list template
Create documentation in the Excel application
Discussion with the internal team (PM, BA, Tech, Creative) to discuss the page that will be designed
Breakdown of all Sangfor pages that will be designed
Group Sangfor pages based on levels in the sitemap and analyze similar layouts on each page
Discussion with all project teams to discuss the final list template
Create documentation in the Excel application
Wireframe
Wireframe
Then, we create a wireframe based on the sitemap, we have to create a page that can be reused for other pages because we created a wireframe concept template
Then, we create a wireframe based on the sitemap, we have to create a page that can be reused for other pages because we created a wireframe concept template
Identify key functionality and layout requirements for each screen
Sketch out rough wireframe designs using a figma tools
Iterate and refine wireframes based on feedback
Collaborate with UI designers to ensure wireframes align with visual design principles
Identify key functionality and layout requirements for each screen
Sketch out rough wireframe designs using a figma tools
Iterate and refine wireframes based on feedback
Collaborate with UI designers to ensure wireframes align with visual design principles
Template1
LANDINGPAGE 1
Cyber Security
Cloud & Infrastructure
Support
Template 2
LANDINGPAGE 2
Product
Solution
Services
Innovation
Industries
Services Overview
Services Policy
Support resources
Template 3
PRODUCT DETAIL
IAG - Internet Access Gateway
NGAF - Next Generation Firewall
Endpoint Security
Cyber Command - NDR Platform
Platform X
Sangfor Access
Hyper Converged Infrastructure
Sangfor Clud Platform
Virtual Desktop Infrasturcture
WAN Optimization
Sangfor Intelligence Edge Router
Template 4
SERVICE DETAIL
Incident Response
Secirity Assesment
TIARA
Manage Cloud Services
⚠️
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
Examples of some wireframe templates when creating a Sangfor website, I can't show all the wireframes because they belong to the company
Deliver
The final stage focuses on implementing the selected solution. This involves refining selected concepts, testing and iterating based on feedback.
The final stage focuses on implementing the selected solution. This involves refining selected concepts, testing and iterating based on feedback.
High Fidelity
High Fidelity
Creating a high-fidelity user interface for a website like Sangfor involves several detailed steps, from conceptualization to implementation. Here's a breakdown of the process with a focus on mood boards, colors, typography, and asset creation:
Creating a high-fidelity user interface for a website like Sangfor involves several detailed steps, from conceptualization to implementation. Here's a breakdown of the process with a focus on mood boards, colors, typography, and asset creation:
Creating a Moodboard
Gather Inspiration: Gather visual materials from various sources such as design website and competitors sites
Determine Theme : Identify a general theme and style aligns with sangfor's brand and goals
Creating a Moodboard
Gather Inspiration: Gather visual materials from various sources such as design website and competitors sites
Determine Theme : Identify a general theme and style aligns with sangfor's brand and goals
Color scheme
Brand Colors: Start with existing brand colors to ensure consistency.
Color Psychology: the psychological impact of colors and how they align with brand messages. the color blue often represents trust and security, which is relevant for technology companies like Sangfor.
Color Palette: Create a color palette that includes primary, secondary, and accent colors.
Color scheme
Brand Colors: Start with existing brand colors to ensure consistency.
Color Psychology: the psychological impact of colors and how they align with brand messages. the color blue often represents trust and security, which is relevant for technology companies like Sangfor.
Color Palette: Create a color palette that includes primary, secondary, and accent colors.
Typography
Font Selection: Choose a font that reflects the brand personality. For Sangfor we chose the red hat display font, this font is suitable for technology companies like Sangfor
Font Installation: Choose a complementary font for the title, subtitle and body text to simplify the text hierarchy in the design.
Typography
Font Selection: Choose a font that reflects the brand personality. For Sangfor we chose the red hat display font, this font is suitable for technology companies like Sangfor
Font Installation: Choose a complementary font for the title, subtitle and body text to simplify the text hierarchy in the design.
⚠️
Examples of some user interfaces when creating a Sangfor website, I can't show all the user interface because they belong to the company
Examples of some user interfaces when creating a Sangfor website, I can't show all the user interface because they belong to the company
05
05
Final Solution
Final Solution
Sangfor's website design process has gone through a series of structured and organized steps, ensuring every aspect of the design is carefully thought out and implemented well. From initial discovery to final delivery, our focus is always on creating a website that is not only functional and aesthetic but also provides the best experience for the user. With this launch, we are confident that the Sangfor website will be an effective tool in supporting business goals and increasing user satisfaction.
There are several processes that we cannot convey in this case study, we only convey the big picture, thank you to everyone involved in this project. Our hard work and collaboration has produced an extraordinary work.
Sangfor's website design process has gone through a series of structured and organized steps, ensuring every aspect of the design is carefully thought out and implemented well. From initial discovery to final delivery, our focus is always on creating a website that is not only functional and aesthetic but also provides the best experience for the user. With this launch, we are confident that the Sangfor website will be an effective tool in supporting business goals and increasing user satisfaction.
There are several processes that we cannot convey in this case study, we only convey the big picture, thank you to everyone involved in this project. Our hard work and collaboration has produced an extraordinary work.
