Singaporean.
I Design for Humans, although it would be interesting to be ChatGPT for a day.
About Us
TLDR
Problems: - Unclear representation of Information on Landing Page - Lacking Information Hierarchy therefore causing unclear user flow - Icons are not meaningful - Cognitive Overloading Solutions: - Maintaining Consistent and Standardized information presentation (Competitive Analysis conducted) - Design replicating Nielsen User CentricDesign Metrics (Preventing Errors if Users misclick on page, raising Flexibility and Efficiency of Use) - Design in Dark Mode for synonimity with various tech products (shows up-to-dateness of products) - Providing Social Proof at forefront to raise Trustability and Competitiveness Benefits: - Reduced User Efforts in terms of Cognitive Loading (guided through the process depending on what they need) - Catchy Design to capture attention in first 5s of entering page - Raise conversion rates and prevents user frustration in search of information - Reduced maximum webpage height
Understanding
Cloudflare's
Users
- Lengthy page and abundance of text confuse users. The lack of information hierarchy and structure will slow users down when scrolling through the website. It is important that websites capture User's attention within the first 5 seconds, and within the first 2500px of webpage viewport height, this is the most optimal period of time to convert users.
- As the website drags on and on, users feel put off and lose focus on their tasks, raising the barriers to use. Ultimately they may return to the search engine page to source for other solutions.
Design Iteration #1
Pros and Cons of Current Design
Pros
- Highly popularised Bento box design to provide bite-sized information and reduce cognitive loading on users
- Bento box design easily supports responsive designs through the use of flex layout and media queries, pipeline workload with be reduced
- Brightly coloured text fonts against a darker background will draw attention to key facts, raising clarity of information presentation and user flow.
- Website height is kept to a minimum to maximise user attention
Cons
- Lengthy pieces of information containing core business products cannot be easily presented to users who are solution oriented
- User demography must be studied well for strategic information placement.
What to be improved next Iteration:
- Integrating core product information after User Study of key information
Design Iteration #2
Improving previous Design to create Current Design:
Pros and Cons of Current Design
- Competitor Study to identify Information Hierarchy and Key Information bites on landing page (Imperva, ZScaler etc)
-
Solutions presented in 4 larger brackets according to user needs
-
Testimonials and integration with AI are clearly visible on site to show that brand is keeping up with the times
-
Interactive webpage design through hover components to capture user's attention
- Draws clear User Flow, nudging users through the site using keywords like:
-
What are you looking for? (Section heading)
-
Get a free Trial (Call to Action)
Pros
- Information is clearly presented and user flow is obvious
- Information is captured within 3500px to maximise user attention span
- Each section has an impactful statement to nudge users for conversion
- Message of site is clear
Cons (Obtained from User Interviews)
- Testimonials section is wordy and does not easily convince site users of concrete results
- Does not show how solutions fare better when compared to other competitors
- Hover component is not intuitive as change in design is minimal, Users did not know it was an interactive button to view Solution details
What to be improved next Iteration:
- Adding videos of user testimonials and integration with AI to strengthen brand message
- Simplifying Testimonial section to create a more impactful layout
Design Iteration #3
Improving previous Design to create Current Design:
Benefits of Current Design
- Reference to live sites for testimonial sections and using clean, impactful and minimalistic designs
-
Hover for more info about company allows minimal cognitive loading when Users first scroll through website
-
Once Users are interested and hooked, they mouse over testimonial statements for more info
-
Provide additional reports via "Read Report" for factual verification and to solidify Cloudflare's brand standing from a User's viewpoint
Pros
- Information is neatly presented and ensures that Users have freedom to choose the parts of information they wish to receive. Through minimal cognitive loading, we can strategically prevent confusion when using the site.
- CTA buttons are clear and within reach after a User reads an impactful statement