SYAFIQ K. DESIGNS
Guardrails Security Platform
Methods: User Interviews, Affinity Mapping, Feature Inventory & Prioritisation, Wireframing, Design Systems, Prototyping & Testing
Tools: Figma, Photoshop, Illustrator
Type: Client Project
Timeline: 3 weeks
Challenge:
To understand the thought process of users when navigating through an application security platform website and identify:
• The needs of users when searching for product information
• To identify the frustrations of users when seeking for information
Role:
For the research part, I was focused on performing the Heuristic Analysis and User Interviews. I was also tasked with coming up with the brand guidelines and design systems; how we ultimately derived our design concept and thinking based on our findings from user research and
competitor analysis.
1
2
3
4
5
Discover
Define
Develop
Design
Next
Steps
Understanding the target audience:
After the initial discussion with the client, we identified that the primary target audience market were developers, startups and small enterprise. Based on this, we did a secondary research and decided to focus on developers but also took into consideration for the general public who would visit the website as well.
We found that developers are the source of most vulnerabilities as they are the one responsible for the coding of the site/application. The shift in responsibility in ensuring a secure site/application to developers have thus put the spotlight on them, so that security can be ensured right from the start of the development lifecycle.
With the redesigned website, we have set 3 objectives for GuardRails that we hope to achieve by Quarter 1 of 2021:
Heuristic Analysis:
We did a heuristic evaluation based on Jakob Nielsen's 10 heuristic values on the current website interface to determine the site interface usability, of which several problems pertaining to various heuristics were revealed, and as a team, we have come up with several recommendations such as:
• Recommend keeping the global navigation consistent
• Using more plain language and less system-oriented terms for the copy and messaging
• Propose a design that will help communicate the features effectively with appropriate copy and visuals, as well as refining the user flow
Content Analysis:
We also did a content analysis of the existing site, to examine the overall content and some problems identified and solutions proposed were:
• Recommend having a profile for each staff to show the personalities of the team and remove repeated job postings in the 'about us' section.
• Sticking to a single term instead of using 'reseller' and 'partner' interchangeably across the site.
• No clear USP in the product page; recommend to identify what GuardRails' USP is and have additional information on how they are better than other existing products out in the market.
Feature Inventory:
We compared the features of GuardRails with 4 other competitors to identify any gaps and opportunities. As shown here, having documentation and good support + service is vital, as well as providing customer reviews/case studies and video demonstrations of the product. Lastly, sharing some information about the team would also give a personal touch on their website.
Other key takeaways were also identified from the competitors and what were could implement for GuardRails were:
-
Provide a clear USP in the homepage
-
Minimize wordiness by utilizing icons/images
-
Provide a video demonstration of the product
-
Consistent UI across the site
-
Provide case studies/showcase who the clients are (with company name)
-
The main homepage is the first impression that either attracts or deters users to want to know more.
User Interview:
The next step was to gather insights through in-depth 1-1 interviews with 10 users(5 Developers, 2 Freelancers, 2 Start-ups,1 Small Business),
ages 20-40 years old, all who have some basic understanding in security platform. Based on their responses, here are the key insights gathered:
1
2
3
4
5
Discover
Define
Develop
Design
Next
Steps
Persona:
We came up with a persona, 'Developer Dave' based on the analysis. Dave is 31 years old and a co-founder of tech start-up. Below are the scenario, goal, needs and frustrations of the persona; as well as the problem & solution statement.
Problem:
Dave needs a security platform that allows him to easily integrate into his existing workflows so that he can be more involved in the process of ensuring security during the development of his applications.
Solution:
We believe by redesigning the website and focusing on improving the navigation, user flow and information on the site, we will meet Dave’s needs and frustrations.
How Might We:
-
Highlight the USP of the company’s product in the homepage such that it is the first thing that users will see?
-
Improve the information that is provided in the documentation that makes it easier for users to understand?
-
Provide past case studies such that potential clients can have some form of product validation?
-
Incorporate an engaging platform that allows users to share their experiences and find help related to the product?
Customer Journey Map:
We then came up with the customer journey map; to better understand the process of their purchase:
1
2
3
4
5
Discover
Define
Develop
Design
Next
Steps
Existing site map:
After the initial phase of the research done, we mapped out the existing sitemap and had a few research methods done to better analyse how users perceive the website navigation.
Tree Test Analysis:
A tree test analysis was done to understand how our users perceive the current site map and to analyse the existing site map navigation and identify areas for improvement:
-
Used Optimal Workshop as a tool to test the existing site navigation
-
Conducted with 8 participants
-
Areas covered: Product page/Help & Support/Latest updates
Below are the tasks given and the success rate; as well as the observed path and suggestion:
Usability Testing (initial):
A set of tasks was given to 5 participants to understand their thought process while navigating through the existing site.
What we learnt were:
System Usability Scale (initial):
The SUS scale is an industry-standard questionnaire used for measuring perceptions of usability. It consists of 10 questions and participants are to rate from 'Strongly Disagree' to 'Strongly Agree'. The questions are about how easy or difficult it is to use the website. For the first SUS on the existing website, it scored a 52.5 which is, below average by industry standards.
Proposed site map:
Based on the Tree Test, Usability Test and SUS results, as well as considerations from Guardrails, we proposed a new site amp where we added new sub-headers such as 'features' and 'customer stories' under the 'product' header. Under 'resources', we added in 'product support', 'partner program' and 'FAQs'.
User Flow:
This user flow we created for the proposed new website shows the process of what users would go through when they are interested in the product and want to sign up for it. The key point to note is users can sign up by creating an account with Gitlab/Github and then be directed to a link where they can download the platform. If users already have an account with Gitlab/Github, they can immediately be directed to the download page.
Home Page Layout Analysis:
We decided to do an analysis of the homepage, by categorising what each section in the layout is supposed to represent; as well as another column of what users perceive them to be.
Competitor Analysis:
Below are 4 competitors(Snyk, Sqreen, Codacy & VeraCode) that we have studied since they have a similar layout and content to GuardRails.
This allowed us to identify potential gaps or opportunities that we can implement in our new design.
Key Takeaways:
Based on the study of the 4 competitors above, we recommended GuardRails to provide:
-
Video demo of how GuardRail works.
-
Version updates as an announcement banner.
-
Client feedback/case study to showcase how the product has worked for them.
-
A quick link to resources for developers to access.
-
CTA - for signup/demo.
1
2
3
4
5
Discover
Define
Develop
Design
Next
Steps
Establishing a Design System for GuardRails:
We decided to create a design system for design consistency for the website as well as having an established corporate identity that helps us define various guidelines such as logo usage, brand tone & voice, brand values, personality, etc. Graphical elements such as the icons, UI patterns and illustrations used for the website were also highlighted.
Prototyping and usability testing (1st round):
We came up with a redesigned website based on the data we have gathered previously and designed a high fidelity prototype so we could proceed with usability testings (a set of task was given to 5 participants to understand their thought process while navigating through the site) to further finetune the design. Here are some of the findings we discovered from the 1st round:
Some of the changes after 1st round of UT:
1. Changing of colour theme
Users have described the first iteration colour theme of being rather dull due to the use of a dark blue-grey tone, and thus lacked the “pop” that would otherwise excite them and keep them engaged.Therefore, by using bright orange and increasing the brightness of the blue, we are able to introduce more life and colour to the site.
2. Increased Specificity in Descriptions
Users wanted more concrete data and specific information rather than plain statements that lacked convincing statistical/evidence.
Therefore, by providing numbers (i.e., 99% detection accuracy) and specific details gives a quantitative, objective, and more persuasive narrative.
3. Added Pricing
Users wanted to know the pricing of the plans to have a more informed decision before committing to a plan.
Therefore, by providing the cost of each plan allows potential customers to make a more conscious decision.
Usability testing (2nd round):
Another round of UT was conducted with 5 new participants after the design changes. Here are some of the findings we discovered from the 2nd round:
Some of the changes after 2nd round of UT:
1. Provided a Personal Introduction
Users felt that there was a lack of personal connection to the team and company when viewing the team members profile.
Therefore, by providing a personal introduction and how they contribute to the team, it can give users a good first impression, show the GuardRails’ personality and increase engagement with users.
2. Clearer Discounted Pricing Plans
Users have been reported to missed out on the special pricing plans available as they were not obvious enough.
Therefore, by providing two CTA buttons (Start-ups & Students), it makes it clearer and get user’s attention when browsing through the page.
3. Created a Community Page
Not all users knew what to expect with the term “Product support”. And was confused with ‘Documentation’ page.
Therefore, we changed the name to ‘community’ as a clearer term where it allows members and visitors to the site to view, share, ask questions and exchange thoughts with one another.
This creates a more open and friendly environment which also encourages interaction with the site.
Overview of System Usability Scale(SUS) results:
We compared the SUS scores of all 3 design versions; we can deduce from the table below that the latest version definitely has improved based on
the users:
Design limitations:
-
Due to time constraints and the lack of information from GuardRails, we were unable to provide more detailed information/statistics that users wanted to know how GuardRails stand out from their competitors.
-
Therefore, it is strongly recommended that the company can provide these statistics on the site if they were to implement our solutions moving forward.
-
Due to time constraints we were unable to conduct the 3rd Usability Testing on our New Site Iteration 3. If time permits, we would have hoped for a UT3 testing to confirm and substantiate our design iterations.
-
We decided against changing the chatbot, after researching other websites, because we realised this could be a default feature added by the website builder, and might not want to take away the mental model or familiarity of it from users.
1
2
3
4
5
Discover
Define
Develop
Design
Next
Steps
Next Steps:
-
Focus on account creation on the website for users to be part of Guardrails community, and participate in the forum and vote what kind of features they would like on the ‘Roadmap’.
-
For the Product Page, more planning and time would be needed to craft the content for each of the features. I.e. We might need to work with video artists and developers to ideate on the visuals that best communicates the features toward the users.
What I learnt:
It was interesting coming into a new area, we learnt about not just security platforms, about also the thought process of the users on this product and the website; what was initially perceived and what was later discovered from them. Some of the challenges we faced as a team was during the UI phase where we would have conflicting ideas on the aesthetics, but we realised that we had to quickly come to a consensus and focus on the objective and timeline for the product to be launched.