top of page

GEL Website Optimisation

Improving the GEL website's discoverability, accessibility, usability, and clarity for both internal and external users.
This project is in progress *
macbook-pro-16-inch-space-black-front-66d7826d4d46e1fa3a9f9b9c-_2x.png

Why

  • Users have to navigate between multiple pages or platforms to get the full picture

  • Currently, the GEL website is very web-focused

  • Engineers go to Storybook first, GEL website second

  • T30 - more emphasis on delivering multi-channel experiences

  • Alignment with Mobile apps Design system

Requirement

  • Reduction in unnecessary clarification queries in #ask-kiama

  • More contextual journeys - (in one space)

  • Scalability to support Multi-channel experience (Scale)

  • Code integration within GEL website

  • GEL website as the single source of truth

  • Reduce duplication of effort across platforms

My role

Role

Interviews | User Research | Usability testing  | Personas | Wireframes | Prototyping

Methods

Secondary Research, Affinity Mapping, Surveys, Workshops

Team Members

Srishti, 2 Trainee Designer

Time

8 weeks (with ither design work)

Tools

Figma & Miro

User story

As a GEL user, I want to easily find, access, use and understand information on the GEL website so that I can build world-class products and services with confidence.

Research goals

Use and find information - GOAL 1

  1. Make it easier for users to use and access the GEL guidance

  2. Make it easier for users to find what they're looking for in the GEL

Accuracy and trust - GOAL 2

  1. Build user trust and confidence that GEL guidance helps to create world-class products and services

  2. Keep content on the GEL website accurate and consistent

Communication - GOAL 3

  1. Determine and better communicate the purpose of each front-end Kiama product

  2. Better communicate the changes we make to guidance material

Purpose - GOAL 4
  1. Help users understand the purpose of GEL guidance

  2. Support users during the transition between GEL 2.0 and GEL 3.0

Data collection

Our first priority was to gather data. As a team, we initiated this process by conducting a survey. The designers organised a workshop with the entire GEL team to clarify our objectives and determine what insights we hoped to gain from the survey.

Learning goals for survey

  1. What do people want from the GEL website?

  2. How do people use the GEL website?

  3. What types of people access the GEL website?

  4. What are the main tasks they want to achieve?

Screenshot 2024-09-03 at 8.53.00 PM.png

Total survey participants 80

Nuggets

Nugget 1:

People are more confident talking to the GEL team for answers than finding answers on the GEL.  - Goal 4, Goal 2

​

Nugget 2:

The GEL gives users confidence in their design decisions. Goal 2

​

Nugget 3:

There are 151 Content Designers and Product Designers, which is 20% of all Digital Services, that use the GEL.

Most Engineers and Product Managers do not use the GEL because they feel it's not part of their job. They access other resources like Storybook and Confluence. Goal 3, Goal 2

​

Nugget 4:

GEL users are wanting real examples. Goal 1

 

Nugget 5:
Have content, code and design integrated in one place. Goal 1

Quantitative data insights

  1. Mobile Design: 35% of users design for mobile, even those outside the mobile team1.

  2. Figma Component Links: 21% of users chose Figma component links to find what they need.

  3. Information Sources: 58% get updates from the #Kiama-Updates Slack channel, and 43% through word of mouth.

  4. GEL Website Usage: 34% use it ad-hoc, 30% weekly, and 21% never use it.

  5. Usage Frequency: The top three ways the GEL website is used are ad-hoc (34%), weekly (30%), and never (21%).

  6. Guidance and Validation: Some users visit the GEL website for guidance (43%) and to validate their use of components (18%).

  7. Job Relevance: Many engineers and product managers do not use the GEL website, as they feel it is not part of their job (40%).

  8. Findability: Users rate the findability of the GEL website at 3.67 out of 5, with the left-hand navigation and search bar being the most used methods.

  9. 60 % users want code, content and design to be integrated in one place.

  10. Top 5 most requested items to be included in the GEL website are: 
    Real examples (83%), Accessibility information (76%), Rationale added to documentation (57%), Access to content, design and code in one place (50%), Sensible defaults and essential standards. (50%)

This helped us in creating User Personas which turned out to be really useful while listing out the new concepts of the website.

Personas

Collaborator Cora.jpg

Beliefs

  • People want contextual guidance and to see code, content, design and accessibility guidance in one spot.

  • People want to take fewer steps to find information.

  • People want a single source of truth

Lo-fi Designs

We designed two mockups, Side Nav and Double Drawer, based on our beliefs and the quantitative data we collected. We started with component page design.

Current design of component page

Screenshot 2024-09-04 at 5.36.23 AM.png

Side nav mockup

In the Side Navigation mockup, we retained the current design feel of the component pages. We added tabs to facilitate easy navigation within the component pages and made several enhancements to the side navigation for a more seamless user experience.
Added Status labels to communicate latest updates
Added tabs to facilate easy navigation
Added related component to give more relativity to the component
Added FAQS to reduce the genral questions asked in ask-kiama
Side nav - Components - Date input - Overview.jpg
Added on this page for easy navigation

Double draw mockup

In the Double Drawer mockup, we drew inspiration from the Material Design website, where all content is consolidated on a single page, and the main navigation is split into two sections.
Added availability section to give overview of the component 
A toggle feature to switch between react & apps code base
Double Draw -- Date input.png

Synthesising interview feedback

Participants

Total: 15 participants

Persona list

  • Collaborator Cora: 3

  • Daily Dani: 1

  • Guru Greta: 3

  • Occasional Owen: 8

Screenshot 2024-09-04 at 6.25.30 AM.png
Nuggets

Nugget 1:

  • Most users expressed positively about being informed on updates through what's new pages, change logs and latest updates label. There is a need to know what has changed so the user is up to date. GOAL 3

Nugget 2:

  • There was some confusion around the differences between “Blog” and “whats new”. Also more exploration needed for rationale as there was confusion on what it means and what content would be there compared to other areas of the site. GOAL 2

Nugget 3:

  • Majority of users indicated that they prefer a combination of both mock ups:

    • Out of the component pages mockups, the Double draw component page was preferred. It was seen as clean and users had a preference for all content on a single page. GOAL 1

    • Side Nav drop down was preferred for navigational purposes as it was preferred to see everything and no info being hidden. GOAL 1

Nugget 4:

  • Accessibility is important to users and had a positive response towards seeing accessibility content, the want from users is to have it at a higher prominence. GOAL 4

Nugget 5:

  • Engineers were seen to have specific needs and expectations in consuming documentations, so the current mock ups to help bridge the gap may be seen as friction to them. GOAL 4

Hi-Fi designs
After all the synthesis and gathering feedback we started working on Hi-fi designs. 
Goals

Improving navigation - GOAL 1

  • Evaluate the effectiveness of each of the two suggested information architecture in improving navigational efficiency.

  • Determine the optimal navigation style (persistent vs. sticky) for improved user experience.

Enhancing role and platform-specific relevance - GOAL 2

  • Understand if the suggested changes in page structure benefit both designers and engineers in their respective roles or using specific platforms.

  • Do users expect all examples to change when toggling between web and mobile apps.

Usability of guidance - GOAL 3

  • How does the template work with real content? Is the information relevant, important and useful?

  1. Is the accessibility guidance helpful?

  2. Investigate the potential negative impact on engineers resulting from the placement of "Writing for 'in-page alert'" instructions. Determine if engineering-specific content being positioned lower on the page affects engineers' engagement.

  3. Analyze the impact of the term "properties" on engineers.

Impact of long pages - GOAL 4

  • Assess the impact of extended page length (all information on one page) on the user experience.

Side nav designs
Single nav V3.jpg
Double draw designs
Feature design 1
Iterating on multi platform preview feature of a component
Preview.jpg
After discussing with engineers it was noted that this feature can be a bit confusing for users and will be hard to build so we came up another design
Feature design 2
Iterating on preview code section of the component
About this component.jpg
Feedback from engineers - To include version and install of the component
About this component v2.jpg

Feedback from engineers - This is good, we will have to determine if the mobile app has similar install, version and usage information but for web this is good!

​

Confirmed with mobile apps they do have similar information.

​

Interviews

Participants

Total: 9

Persona list

  • Collaborator Cora: 3

  • Daily Dani: 2

  • Guru Greta: 0

  • Occasional Owen: 4

Synthesising the interviews
Screenshot 2024-09-04 at 6.44.01 AM.png
Nuggets

Nugget 1:

  • Double Draw nav was preferred over Side Nav by nearly all participants. Users also wanted DD to be sticky as they scroll down the page. GOAL 1
     

Nugget 2:

  • Not one of the nine participants mentioned that the page was too long. Many participants comment on how easy the page was to navigate using the sticky on this page component. GOAL 4

Observations

  • Participants wanted links from variants in list to their respective section

  • Participants found tabs easily and were quick to toggle between Web and mobile app

  • Few designers said that code content was irrelevant to them

  • Some participants tried to navigate the figma prototype via the search bar

  • One participant wanted a full page summary

  • Some participants want to be able to search for code on the page

  • Some participants want links to breaking changes at the top of the page if the lastest version contains a breaking change

  • Some participants want to be able to collapse the second level nav in DD

  • Some engineers want to a link to the code styling page on the component page

  • Some engineers were confused about the Term Version history and preferred Change log.

Next steps

  • Iterate on the feedback received for the component page design.

  • Design the homepage.

bottom of page