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.
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.
• UX Designer
• UI Designer
email@domain.com
000-000-000
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:
efficiently meet the information needs of the end-users?"
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.
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.
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.
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.’
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.
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
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'.
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)
Iteration 2, concept 1: homepage
Iteration 1, concept 1: Newspage
Iteration 2, concept 1
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
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.
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.
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
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.
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.
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).
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.
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.
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)
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.
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'.
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.
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.
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.
I also made four design versions of Chatbot Zen.
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.
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
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.