DSTN


UX / UI

Graduation Project

Social Intranet

Gemeente Zaanstad

DSTN x HU x ZNSTD


February, 2022

August, 2022


Graduated.

Introduction

During my graduation project, I collaborated with the Gemeente Zaanstad, a municipality located near Amsterdam.


Initially, they sought a design student to address minor search issues on their Social Intranet. However, what they truly needed was a modern update to their UX Design, a realization that became apparent during the project.


I applied design sprints using the 'Design Thinking' method, which I will outline below in 6 steps, leading me to my final prototype recommendation.


Step 1: Empathize

Step 2: Define

Step 3: Ideate

Step 4: Prototype

Step 5: Test

Step 6: Deliver


Please note: As this project involved a government institution, sensitive information cannot be disclosed. I'll illustrate my process using blurred examples, but will showcase my prototypes fully.

Personal growth

To reflect on my personal and professional development, I utilized the DAKI reflection method, incorporating input from both myself and my mentors, divided into four categories: add, drop, improve, and keep. My goals during this graduation project and for the future were:


Decisiveness: To learn to make quicker decisions and overcome my perfectionism.


Communication: To communicate effectively and concisely.


Confidence: To trust my abilities and stop second-guessing myself.


Behavior: To maintain a critical thinking approach in my designs and collaborations to produce the best work within the given time frame.


Assertiveness: To be assertive and explore alternatives when the initial option doesn't work.


Help: To listen to my body signals and seek assistance when I encounter challenges during the design process.

My role

Interviewer

Graphic Designer

Illustrator

UX Researcher

UX Designer

UI Designer

Timeline

  • Overall 20+ weeks
  • Discovery & Research:

° 5 weeks

  • Design & Testing:
  • ° 13 weeks
  • Reports & Presentation:
  • ° 2 weeks

Tools used

Google Docs, Slides

Microsoft Excel, Powerpoint

Teams

Miro

Adobe Xd, Ai, Ps

Team

col 4 placeholder

Problem

Initially, the core issue wasn't clear. The assumption was outdated internal communication channels caused a lack of basic information awareness.


Yet, interactions with the target audience highlighted dissatisfaction with the primary channel, the Social Intranet Zaanl!nk, where finding information was challenging.


My project goal was to enhance Zaanl!nk's efficiency.

Solution

  • In addition to redesigning their social intranet 'Zaanl!nk', I integrated a chatbot function to assist users with their queries and improve search efficiency.

  • According to my mentors at Gemeente Zaanstad (the clients), this was a significant need they hadn't realized. They were deeply appreciative of the extensive research and effort put into the final recommendation for implementation.

  • The project aimed to enhance employee efficiency, creating a positive societal impact.

Awards

  • It’s Nice That
  • AIGA
  • Fonts In Use
  • The Dieline

Contact

email@domain.com

000-000-000


— Instagram

— Twitter

— Facebook

Below, you’ll see blurred screenshots with brief descriptions of the main pages from the social intranet at that time: home, news, and guidance. These are the pages I’ve choses to showcase in my prototypes.


Home page


Most users find the homepage very static and cluttered. They have the need for a social intranet that’s more alive, is dynamic, has a human touch to it and is diverse and inclusive. Zaanl!nk is the first page that launches when the user starts browsing.


Home page scrolled down


Here you can see that users put external news in the social feed. These users don’t know where else to share it to raise awareness with colleagues. Other users find it quite annoying and messy to see external news articles in the timeline.



News page


The users find the news page uninspiring, which is why most don’t take the time to read other articles that might be important. Something on a ‘need’ and ‘good’ to know basis. Preferably shortcuts from the homepage too.


Guidance page


Here you can search for links, documents and such. Most users find this page helpful, but lacking in usability.



Guidance page


This is where the user gets quite annoyed, because when they try to find something and don't know the word or correct subject for it, they end up having to go through 8 – 10 pages, with each page containing 12 different themed blocks.

Business Needs

The organisation had two business needs:

1) Improvement and/or expansion of the internal communication channels.

2) Better meeting employees' information needs.

Finalised research question

It became clear that I needed to address a UX problem, one that focuses on enhancing user-friendliness, information provision, and file accessibility in an efficient and simple manner. It was also crucial for both the client and myself that the final product be future-proof. Therefore, the revised main question was as follows:

"How can I optimize the user experience of Zaanl!nk to

efficiently meet the information needs of the end-users?"

Step 1:

Emphatize


Step 2:

Define




Step 3:

Ideate



Step 4: Prototype

col 4 placeholder

Step 4:


Prototype




Step 5:


Test





Step 6:


Deliver




Step 4: Prototype

col 4 placeholder

Empathy map

I've held in-dept interviews with various target audience members until I gained a deep understanding of the problem.


I'll always remember traveling to a village cemetery to interview the lead-caretaker about Gemeente Zaanstad's internal communication; our 2.5-hour conversation was both enjoyable and insightful.


After the interviews, I analyzed the data and created an Empathy Map, revealing common pain points and desires. It was evident that the social intranet needed to be more organized and structured, foster better connections with colleagues and the organisation, have a modern design, and contain simple and accessible help.


Quickly it became clear to me that there was a strong need for the social intranet to offer a more efficient information provision.


5 themes

In the next phase, I consulted experts from organizations with over 500 Social Intranet users, extracting insights, tips, and tricks. This information informed the creation of a benchmark outlining guidelines for a successful social intranet during change and how Zaanl!nk can meet user information needs.


To guide this project better, I organized insights from experts and best practices into five themes:


1. Usability: Give end-users freedom in using Zaanl!nk, providing guidance, guidelines, and an option for feedback.

2. Timeline Traffic: Encourage members to create groups for important topics, designating the group creator as the administrator.


3. Key Figures: The communication department should exemplify social intranet use and ask the executive team to promote Zaanl!nk for productivity and collaboration.


4. Help: Reduce barriers for groups feeling hesitant to ask for intranet assistance.


5. Administrator: A Community Manager is crucial for ensuring Zaanl!nk's proper use, acting as a central point for questions, tips, and monitoring.


UX goals

The following theories and models have provided me with a clearer understanding of what the solution should meet or consider. Below is a brief summary of the goals based on these theories:


1. Fitts' Law: Minimise the distance to the target.


2. Carousels: Reduce news articles in the social timeline feed.


3. Ryan & Deci’s Self-Determination Theory:

3.1 Autonomy: Allow users control over their social intranet profile (layout, color, use of hashtags etc.).

3.2 Relatedness: Provide space for users to share their stories, fostering empathy and connection with

each other and the organisation.

3.3 Competence: Ensure usability and ease of use.


4. User Delight: Ensure that users derive pleasure from using the final product by making it functional, reliable, and usable.

UX patterns

According to my research it was concluded that there was a strong need for something new, but also familiar. Tidwell explains in the 2010 book 'Designing Interfaces', that users can apply their prior interface knowledge to the new one, as long as the elements are recognizable and the relationships between them are clear. This way, users can more quickly grasp new features.


To ensure that my "Guiding Principles" aligned with and made the final product feel familiar, I consulted the following UX Patterns:


Carousel: News blocks and "Colleague Spotlight."


• Categorization: Different sections, news page, and guidance page.


• Favourites: Saving files, links, and other items for quick navigation.


• Chat: Chatting with Zen Link.


• Self-expression: "Colleague Spotlight," Timeline.


• Autonomy: Being able to find something independently on the intranet.


• Intentional Gaps: My shortcuts to indicate that you can add your own shortcut button.

Maslow’s pyramide

By using a Maslow’s hierarchy, the needs of employees were hierarchically described in a general sense (Pernice & Caya, 2021).


The needs of my target audience can be effectively categorized into the need for belonging and esteem. These are highlighted in green in the image left. From this, I deduced that the needs of the users were situated at a psychological level.


This model has assisted me in describing my Guiding Principles, which helped me in ideating concepts. Particularly the GP: ‘Connecting Factor.’

Guiding Principles

Based on insights from my user-research and theoretical models, I have established three Guiding Principles:


Connecting Factor

The design should help create a sense of connection with the organization and among the users.


This is grounded in user needs, where there's a desire to move away from a sense of isolation. Additionally, the target audience wants to see more personal stories from colleagues and an organization that provides space for this.

Sustainability


The design should be flexible and capable of evolving to meet the future information needs of the user.


This principle addresses both user and business needs. The user requires a modern social intranet environment, while the organization needs a communication tool that aligns with the audience’s requirements, enabling them to work efficiently

Assistive


The design should assist users in finding desired search results and provide satisfaction in their information needs.


This principle stems from user needs, emphasizing the necessity for a user-centered environment where users can customize sections, improve search functionality, and receive accurate search results.



No rules

The advice from my mentors – who are Communication professionals at Gemeente Zaanstad – was to eliminate technical constraints, granting me more creative freedom. This enabled me to develop three concepts aimed at solving the problem. Below you'll see the style-guide colours I was allowed to use; corporate colours (image 1) and support colours (image 2).


The concepts were validated by sharing them with my mentors during our weekly meetings and gathering input from the target audience.


1) In the first iteration, I personally gathered prompt feedback from a focus group consisting of 6 end-users.


2) For the second iteration, I conducted a survey within Zaanl!nk, and, combined with mentor feedback, received 22 responses, as described below. Here is when I used the support colours.

Image 1

Image 2

Concept 1,

Iteration 1


Friendly Neighbourhood Hero, Zen L!nk



My first concept involved Zen L!nk, a fictional non-binary figure who serves as the central point of contact and the face of ZaanL!nk. Zen's role is to promote harmony and balance on the intranet while providing assistance with intranet usage queries. Zen also regularly shares this information through posts on the Timeline.


When a user is stuck or unsure about what to do, then it's helpful to use an "overlay" to provide assistance in a non-intrusive way. This can be used to gently guide the user in the right direction. (Harley, 2014)


I implemented this approach to consult Zen L!nk, a direct help chat-line to the intranet administrator. With it, I tried to give Zaanl!nk a modern and refreshed 'look and feel'.


You can consult Zen for guidance on various topics, such as:


Identifying useful groups based on your interests through topic filtering (linked via hashtags or group subjects).


Helps you locating specific files and resources by using a simple question like, "What are you looking for?"


Access frequently asked questions and answers (FAQs).


How to get in touch with the intranet administrator.


Right-click on the link to view the first iteration of this concept in a new tab: iteration 1; concept 1


Below you can see my process.




Concept 1 – Sketch low-fi


Concept 1 – Wireframe – Home Zaanl!nk Social Intranet


Concept 1 – Wireframe – Home Zaanl!nk Social Intranet – Overlay


Iteration 1, concept 1: homepage


Iteration 1, concept 1: Zen L!nk (overlay)

Feedback

Concept 1:

Iteration 1


The first iteration aimed to present the renewed ZaanL!nk environment and assess its usefulness to the target audience. It revealed that the abundance of news-related buttons caused confusion and information overload. However, Zen’s inclusion was positively received, although some clarity issues arose regarding its interactivity and readability.

Concept 1:

Iteration 2


In the second iteration, based on feedback, I focused more on making Zen L!nk more prominent and readable. I got approval from the mentors to use supporting colors in line with the current brand identity, which are visible within Zen.


The split news blocks are much clearer thanks to the visuals. Additionally, the news buttons in 'My Shortcuts' have been replaced with other buttons, such as 'Intranet Beleid' and 'Missie & Visie.'


A new section called 'Collega Spotlight' has been introduced, featuring blogs about a colleague's workday. Below this are the sections 'Good to Know,' where important announcements are shared, and 'Nice to Know,' which includes birthdays and anniversaries.


The 'Guidance' page has been restructured for a more organized layout, allowing for a quick overview of themes with related topic links.


Right-click on the link to view the second iteration of this concept in a new tab:: iteration 2; concept 1




Iteration 2, concept 1: homepage


Iteration 1, concept 1: Newspage


Iteration 2, concept 1

Feedback

Concept 1:

Iteration 2




The survey results (n=22) indicated that the majority of the target audience favors the concept and would use it. I’m pleased to report that the responses were both positive for Zen L!nk and the new social intranet environment. The whole new look and feel is being experienced as a 'fresh wind'.


Below, you'll find the input from the target audience categorized:


1) It is now clearer that you can click on Zen L!nk now due the white circle. The color combinations are also more appealing and provide a clear distinction between the themes. This helps the audience quickly locate Zen when needed.


2) The homepage appears somewhat busy due to the blue color scheme, but it is perceived as a refreshing change for Zaanl!nk, which aligns with one of the goals.


3) The 'News' tab functions more smoothly and is more organized by separating organizational and environmental news. The same goes for the news blocks on the homepage.


4) The 'Guidance' tab works very well and offers an clean overview as everything is visible at a glance, is more organized and visually appealing than the current version. Some express a desire to spend more time exploring it to discover the various topics and themes. They are looking forward to a final version. However, they suggest adding a section for popular or most-used themes or topics and a button for submitting new themes or topics.


5) My shortcuts: they find this efficient and user-friendly due to the tiles, labels and symbols indicating their purpose. They believe this would save them a lot of unnecessary time and effort in navigating. However, the tiles appear a bit too large, so making them slightly smaller would be preferable.


6) Colleague Spotlight is seen as a delightful addition to Zaanl!nk. The target audience enjoys seeing personal stories of colleagues, especially those they have never met, making Zaanl!nk feel more personal.


7) The sections 'Good to Know' and 'Nice to Know' are considered useful and enjoyable, but the audience would appreciate the addition of features for liking, commenting, or congratulating.

Survey result Q1

Survey result Q3

Survey result Q5

Concept 2:

Wist je dat…



My second concept called 'Wist je dat…', which translates to 'Did you know…', involves an internal online and offline campaign to share the value of the updated Zaanl!nk and to motivate the target audience to use it more. Initially, this could be a way to introduce concept 1 and concept 3. This campaign could include posters, flyers, and/or stickers that:


Share tips and tricks on how to use the new social intranet.


Provide information on where to find resources, submit news topics, access webinars and presentation announcements, and register office visitors, among other things.


Highlight employees by featuring a condensed version of a 'Colleague Spotlight' blog, with a (QR)link to the online version.


The goal of this concept is to motivate the user to make the most of the new and exciting features and enhancements of the updated Zaanl!nk.


Below you can see my process for concept 2.

Feedback

Concept 2:

Iterations 1 & 2




I asked the focus group if they would pause to view the posters when they encounter them online or on screens in the office, and the majority of them indicated that they would. This positive response was attributed to the pleasing color combination and the presence of a human face. They compared my posters to existing ones at the office and expressed that mine felt more vibrant, professional, and in line with the office atmosphere.


However, the results from the survey painted a different picture. Overall, people were more or less neutral about this concept, which was surprising, considering that, in person, the target audience appeared to favor this concept. Below you can view screenshots of the results from the survey.

Concept 3:

Kennisplein



Inspired by the location of the city hall and Gemeente Zaanstad office atop Zaandam station, this concept envisions a shared journey toward 'Kennisplein', which translates to 'Knowledge Plaza Station.' The goal is to enhance collaboration and tap into each other's strengths for a stronger workforce for the municipal.


This concept focuses on enabling colleagues to showcase their skills for potential project collaborations. While the current intranet provides this feature, there's untapped potential due to underutilization. To enhance these connections, the concept aims to inspire collaboration, alleviate isolation, and promote inclusivity.


Right-click on the link to view the first iteration of this concept in a new tab: iteration 2; concept 3


Below you can see my iteration process for concept 3.


Concept 3: Lo-Fi sketch


Concept 3: Wireframe


Concept 3: Iteration 1


Concept 3: Hi-Fi iteration 2

Feedback

Concept 2:

Iterations 1 & 2




I asked the focus group if they would pause to view the posters when they encounter them online or on screens in the office, and the majority of them indicated that they would. This positive response was attributed to the pleasing color combination and the presence of a human face. They compared my posters to existing ones at the office and expressed that mine felt more vibrant, professional, and in line with the office atmosphere.


However, the results from the survey painted a different picture. Overall, people were more or less neutral about this concept, which was surprising, considering that, in person, the target audience appeared to favor this concept. Below you can view screenshots of the results from the survey.



Feedback explained




After gathering feedback from the focus group regarding the initial ideas and first iterations, I presented the concepts in a survey for the second iteration. I received 22 responses, which provided valuable insights. The input on the iterations for Concepts 2 and 3 were combined, because I summarily worked on these.


Turning point




It was clear that Concept 1 was favoured over Concepts 2 and 3, although the majority find a combination of all three helpful. Some inquired if Zen L!nk was a chatbot, leading me to reassess my approach. I decided to explore the idea of presenting Zen L!nk as a chatbot.



Chatbot

From this point, I delved into researching chatbots, exploring their types and determining the most suitable one for my project. Here's what I found:


Chatbots make it easier for people to interact with services, improving the customer experience and giving businesses new ways to engage customers. This efficiency boost can reduce helpdesk costs by about 30%. Chatbots are particularly useful for organizations looking to enhance user experience by quickly answering questions and providing user-focused support (Selig, 2022). They offer a simple and intuitive experience on an intranet (Adler, 2019).

Dilemma

While I was researching about chatbots, I faced a dilemma after learning from the intranet supplier that my initial concept (Zen L!nk) and its functionalities weren't possible within the current intranet environment, constrained by the Gemeente Zaanstad's standard intranet package. With budget limitations and a 3 year plan to switch to MS 365 Sharepoint, I had two options:


1. Develop for the current social intranet a less dynamic environment with Zen L!nk as a constrained profile, risking delayed responses to user queries and potential frustration, leading to reduced intranet usage.


2. Opt for MS 365 SharePoint to enable the envisioned functionalities, transforming Zen L!nk into an integrated chatbot within a new intranet via the MS 365 Power Virtual Agent app in Teams. This ensures linked and easily discoverable files, pages, links, and individuals, with Chatbot Zen accessible to the target audience in Teams.

Decision

After learning about the faster move to the MS 365 environment, I chose option 2 to cater to user information needs. I continued with Concept 1 and developed it into a fourth concept: SharePoint Zaanl!nk & Chatbot Zen L!nk.


This required me to collect information about SharePoint and chatbots in this environment. To gain professional insights into these topics, I spoke with two MS 365 specialists within the Gemeente Zaanstad, Ronald and Hans.

Expert: Chatbots

I discussed my fourth concept with Ronald, an IT Functional Manager at Gemeente Zaanstad with expertise in setting up chatbots in MS 365 environments. Ronald praised the well-thought-out 'Zen L!nk' concept, especially its strategic placement in the navigation bar, confirming the practicality and logic of using a chatbot in my case.


Additionally, he demonstrated the creation of a chatbot using the Power Virtual Agent within the MS Teams app, highlighting the importance of understanding user questions for effective training. (Ronald, 2022)

Expert: SharePoint

I discussed creating a SharePoint environment with Hans, Information Manager at Gemeente Zaanstad. With experience in MS 365 implementations, he appreciated the fresh and modern design of my concept for the new Zaanl!nk environment. According to Hans, the ideal intranet is a transaction-oriented work portal where all tasks can be performed within the platform, and he recommended incorporating a chatbot in my case. (Hans, 2022)

Benefits of Chatbot Zen

Everyone I spoke with, including my coach, classmates, mentors, MS 365 experts, and external professionals, agreed that implementing a chatbot for the specific issue I'm addressing is the best next step for my project.


I then gathered all of the pro's:


24/7 Availability: Provides immediate answers to questions, beneficial for employees working night shifts or in different time zones.


Independence: Can independently address queries about files, intranet usage policies, or required forms.


Help Desk Relief: Alleviates the workload of the helpdesk, allowing them to focus on added value and innovation projects.


Smooth User Experience: Enhances the enjoyment of Zaanl!nk usage for the target audience, encouraging more frequent utilization in the future.


Translated

To see how Chatbot Zen will integrate with the new Zaanl!nk environment, I have applied the following theories and models from my research to my fourth concept to clarify how they translate at each point:


1) Self-Determination Theory (Ryan & Deci):

Need for autonomy, connectedness, and competence


2) Walter’s Hierarchy of User Needs:

Functional; Reliable; Usable; Pleasurable


3) User Delight:

Surface Delight, Deep Delight

Autonomy

Chatbot Zen

With Zen, the user can independently find files, links, and more (without help from the helpdesk). The user learns where to find items in Zaanl!nk, reducing the need to ask colleagues for assistance in the future. This saves time and minimizes frustration in using the intranet.


SharePoint Zaanl!nk

The user is efficiently provided with information in an organized and structured manner. The homepage consists of fixed sections:

1. News blocks for organization, departmental and Zaanstad

2. A Social Feed

3. Shortcuts

4. Colleague Spotlight

5. ‘Good to know’

6. 'Nice to know'

7. Additionally, the news page is divided more clearly into organizational, department and environment news from Zaanstad.

8. The ‘Wegwijzer’ (Guidance) page is also structured more clearly, allowing users to search for what they need more easily and efficiently.

Connectedness

Chatbot Zen

In this case, Zen shows empathy when the user indicates they can't find something. This creates a sense of understanding and support. An example of how a conversation with Zen might go:


Zen: "Hi, I'm Zen. What are you looking for exactly?"

User: "I'm looking for the collective labor agreement (CAO) for civil servants, but I can't find it."

Zen: "That's unfortunate. I'd be happy to help!"

Zen: "Here is the collective labor agreement for civil servants. Here is the link to the page where you can find this document yourself next time → link to page."

Zen: "Is there anything else I can help you with regarding Zaanl!nk?"

User: "No, thanks!"

Zen: "You can always consult me if you're stuck. Have a great day! :-)"


SharePoint Zaanl!nk

The fixed sections 'Colleague Spotlight' (blog) and 'Nice to know' (birthdays, anniversaries, milestones) foster connection with each other and with the organization. It will give Zaanl!nk a 'human touch', which meets one of the user needs.

Competence

Chatbot Zen

Zen is a tool to independently and quickly find information within SharePoint Zaanl!nk. The advantage of an MS 365 chatbot is that you can also access and use it within Teams. Users are subtly trained to know where to find specific files, links, and more, making them proficient in using the new intranet.


Sharepoint Zaanl!nk

The navigation, buttons, and sections are clear, enabling users to reach their goals on the intranet more quickly. It helps users become more skilled in using Zaanl!nk, leading to increased satisfaction, safety, and efficiency. This makes Zaanl!nk perceived as user-friendly more quickly.

The navigation, buttons, and sections are clear, enabling users to reach their goals on the intranet more quickly. It helps users become more skilled in using Zaanl!nk, leading to increased satisfaction, safety, and efficiency. This makes Zaanl!nk perceived as user-friendly more quickly.


User Needs Hierarchy

Functional: Zen's role is to assist end-users in navigating the new SharePoint Zaanl!nk.


Reliable: Zen is fast and available 24/7, providing effective responses that demonstrate understanding to help users achieve their intranet goals.


Usable: Zen delivers the right information to users instantly based on trigger words and/or phrases. In SharePoint Zaanl!nk, the most used pages are made more accessible (homepage, news, wayfinder) with clickable links or buttons.


Enjoyable: Chatbot Zen has a face, adding a more human touch. Which follows up with the next paragraph.

User Delight

It offers fitting, helpful, and efficient responses (Deep Delight). Microcopy, including concise sentences injecting jargon and humor, is used. Anticipating user questions is the concept (Surface Delight).


The new Zaanl!nk environment provides appropriate content to users on the most used pages in a structured and clear format (Deep Delight). This reduces user pain points, incorporating relevant images, quick links, symbols, tiles, concise words, and short texts (Surface Delight).


With Chatbot Zen and the new features in SharePoint Zaanl!nk, the whole feels approachable and user-friendly, offering the potential for users to experience User Delight.

Jung's Archetypes


In UX, Carl Jung’s 12 archetypes are often used for long-term recognizability. They help organizations define their personality and decide how to present themselves, ensuring that customers enjoy interacting with the brand (Mediabirds, 2021).

Tone of voice

I consulted with my mentors and identified the desired internal "Tone of Voice" for Gemeente Zaanstad as:


helpful, balanced, facilitating, and future-proof.


I was divided between two archetypes that closely aligned with these characteristics: the 'Everyman' and the 'Caregiver'.

06. Everyman


Characteristics: the good neighbour, friend, helping hand, reliance, realistic, empathy, and connection.


Chatbot Zen: your helpful guide on Zaanl!nk, always there to assist you in reaching your intranet goals.


SharePoint Zaanl!nk: The goal was to provide a sense of calm and freedom with a clear, soft, and familiar layout. Designed for everyone, providing a customizable experience.

07. Caregiver


Characteristics: the helper, harmony, social, attention, respect, protect, and nurture.


Chatbot Zen: your Zen friend, protecting you from frustrations and ensuring you succeed.


SharePoint Zaanl!nk: a caring space with a recognizable brand, offering news and shortcuts to meet your needs. Use the orange button to take action.

Avatar style


I asked the target audience which avatar styles they found most appealing and why. I inquired about which ones they considered most non-binary, enjoyable, or fitting for Gemeente Zaanstad.


I personally created styles 1, 3, and 6, while the other three were provided merely as examples.

Chatbot style


I also made four design versions of Chatbot Zen.




Inspiration


I created two designs, drawing inspiration from the Microsoft SharePoint look-book and highlighting the referenced elements in red from Klarinet, a digital workspace maker. You can see these in the slides below.

A/B test


I asked the target audience which version they found most appealing and why.


Right-click on the links and open in a new tab to view versions A and B. Inside these links, you can click on the avatar to open a chat window with Chatbot Zen.


Version A, The Caregiver: https://adobe.ly/39hyLP5 


Version B, The Everyman: https://adobe.ly/3aN6nES


Version A – The Caregiver


Version B – The Everyman

A/B test results


Opinions were split between versions A and B of SharePoint Zaanl!nk, as well as the design of Chatbot Zen. Half preferred Version A for Zaanl!nk, while others favored Version B. Regarding the chat-window with Zen, option 2 had the highest preference.


These insights guided the design of the final product, incorporating elements from both versions. Further details are discussed in the design report.

Color Vision Deficiency


I discovered that one participant in my test group has an extreme form of Daltonism, a color vision deficiency. This individual sees only in black, white, and shades of gray.


In another project, I actually researched Daltonism and found that it affects 1 in 12 people with XY chromosomes and 1 in 200 people with YY chromosomes, with the most common type being Deuteranomaly, a red-green color vision deficiency.

Accessibility


I learned how to make websites or apps accessible to those with visual impairments.

I considered using symbols or short words for buttons, underlining hyperlinks, incorporating patterns and textures for object differentiation, and using contrasting colours.


I'm glad I considered these factors from the beginning and also took into account the preferences of the target audience without color vision deficiencies.

View the finalised product here


Final UX / UI product