netzn
Designing the beginning of a regional business network.
Client: IHK Mittleres Ruhrgebiet
Time: December 2017 to January 2019
My Role and tasks: UX Designer and Lead Designer
- User journeys, stories und flows
- Personas
- Presentations
- Wireframes
- Defining Design Principles
- Design and Style Guide
- Branding
- Evaluation of user feedback
- Usability testing
Long read ahead
Hi, thank you for your time and interest. This case study will be a longer read (ca. 13 Minutes), as this was a huge project which brought me a lot of insights and learnings. Besides my daily job as UI/UX designer, I build up a new brand from scratch and had to balance between design lead, user and client feedback and the development team.
About the client:
The Chamber of Commerce and Industry (IHK) Mittleres Ruhrgebiet based in Bochum sees itself as a service provider and voice of those more than 27,000 industrial, commercial and service companies that are members of the Chamber. The focus is on the overall interests of the commercial sector - in Bochum, Herne, Witten and Hattingen.
About the project:
An unexpected journey. When a website relaunch gives birth to a social media network.
When the project started, my team members (1 key account manager, 2 backend dev, 1 frontend dev) worked on the concept of a new website for the IHK Mittleres Ruhrgebiet, which resulted in netzn, a new business network, designed for enhancement through feature addition.
In my role as UI/UX designer I started evaluating the past workshops with the client and forming a rough picture of what was coming ahead:
- Rebranding
Navigation improvement
Search improvement
User logins
Profiles linked to company data
As we digged deeper in all the information provided, we realized that our client and his customers needed more than a "simple" website with a login option.
Searching for the pain points
- The communication with members of IHK was anything but easy. They wanted to be closer to them and be able to react more flexibly.
- The findability of information made it difficult for users to find what they were looking for due to an old oversized menu structure.
Our solution:
A platform for direct interaction with the member companies, which simultaneously makes information faster and easier to reach, including the possibility of new features to make further progress in digitization.
Main solutions:
- Information and downloads as articles
- Findable through a search bar and new tagging system
- Subject related communication and assistance through groups
- Implementation of direct messaging
- Company pages and personal profiles
MVP users
For the launch of netzn we focussed on two main target audiences:
- The IHK employee
- CEOs and managing directors
The first group needs to be able to use netzn on a daily basis as part of their workflow and create own content suitable for their topic. The second group needs to be able to use netzn as a new networking tool in a local radius and as fast gateway to information and help by the IHK. On that basis I developed personas to get closer to the users needs. Below, you can find two examples.
Clara Neuhaus
41, Employee at IHK Mittleres Ruhrgebiet, apprenticeship guidance for technical professions
- Helps companies find apprentices
- Helps with questions about vocational education
- Checks current standards
- Plans exams and exam schedules
- Communicates with professional schools and examinants
- Uses social media occasional
She likes the idea of netzn, but fears that it might be a huge amount of extra time and work to create contents. It is crucial to her that the content generation is as simple and fast as possible.
Thorsten Friesenberg
52, Managing Director at Friesenberg GmbH
Wants to find information tailored to his needs fast
Wants quick support and contact persons
Doesn't want to create content by his own
Would like to see minimized bureaucratic obstacles
Wants to find qualified employees
Thorsten is a manager with hands on mentality and wants to shape the future of his company in a digitized world. He acknowledges the effort of the IHK to provide modern solutions and hopes for easier processes and fast communication.
In the process I did several user journeys, user stories and flows as sketches and low- to high-fidelity wires and accompanied them over the design phase, testing up to the final results.
As netzn is a complex project, I have chosen to show two of the user journeys that formed the main features in the end product.
First Journey: Providing Information
Based on the personas I looked at the optimal workflow for Clara.
She wants to generate an interesting article about how to do reports for apprentices. She uses Microsoft Word on a daily base, but has no experience in content management systems or online editors. So her journey should be as easy as possible with a satisfying and professional looking result.
The main problem here was that I had to find a balance between easy and fast to use content generating as posts and more complex layout possibilities.
The solution lies in between.
As I did the research on content editing options for blogs and social media posts, I became aware of the fact that most social networks limited their editing options for users when posting information. This had several benefits like easy to use interfaces and simple output. But this was not an option for our content editing model.
Clara needed more options to style and layout her articles. In fact she needed a hybrid of a social media post and a classical webpage.
When the social network CMS was born.
I'm known for my sketchbook, I start every process with notes and quick sketches to evaluate options. In this case I drew about 5 different approaches to content editing, from drag & drop solutions like Mailchimp does, to simple dropdowns that let you chose a type of content.
We set for the dropdown version, as we believed that it was a simple and fast way to add new content to an article.
Wireframes
With the beginning of wireframing I tried the drag & drop option as well. Evaluation showed that this layout was too complex to use and took to much time. So we did the simpler approach and focused on speed.
Nevertheless, I find it very useful to test ideas in an early phase with wireframes. They make it more understandable how an interface and interactions would feel like.
Improvement
My dear colleague Sandra did an awesome job at designing the content editor. In the process we discovered that for better usability, we had to implement a sticky option bar to fit in all the common actions like "save draft" "preview" and "back". In this step we also slimed down the right sidebar panel to a minimum, because users were irritated by too many options.
You can see the final result of an article here.
Conclusion
We managed to provide a simple content editor for Clara which enables her to use content blocks to layout her articles without overwhelming options.
As the later tests showed, a big number of users wasn't aware of the option to add more to the layout than just text. We added a simple box with explanatory text that guided inexperienced users.
Second journey:
How to find information I need.
As stated in the personas, Thorsten wants to find information fast.
On the "old" website of IHK Mittleres Ruhrgebiet, it was hard for him to find crucial information. To find specific information Thorsten had to know in which category he had to look, then search for the topic in the subcategories and after that, scan the page if he could find what he had in mind.
As assumed, he got frustrated and phoned IHK employees to ask for that information. This is what we wanted to change.
Good bye mega menue!
The new approach on that was to get rid of the big menue and to implement a search system that allows him to type in what he searches or select tags fitting his needs.
I looked at well known search mechanisms and analyzed what users are used to when searching and what they will expect of our search.
First approach:
Tag focus
A first attempt on optimizing the journey was to navigate and find information through tags and additional filters. But there were several pain points:
Will I get the same results using the global search bar?
What if the user can't find a tag that suits his needs?
How can the user navigate to specific pages if we don't have a menue?
We figured out that we had to connect the searchbar directly to the tag system and implement a clear menue navigation.
Second approach:
Individual search bars
As I advanced in the subject, I found that it would be nice for users to have a clear separation between a global search and the option to search specific content of one company, as the old website of IHK should be replaced by a company page on the new platform.
Therefore it was necessary to have a prominent search option on company pages.
Conclusion
As we integrated a global search and a "local" content search, we made the process of finding information easier and faster.
But there are several pain points left after the implementation of the global search that must be optimized for better user experience:
The search results aren't what a user expects: It isn't transparent how the results are linked to your search.
The behavior and design of the two different search bars isn't the same
There is no indicator of what the difference between skills and tags is
This is owed to the fact that the global search was added in a short sprint before the final rollout and we could only do minimum testing.
Defining Principles
Before we, a design team of 4 designers, could start with the basic design work, it was necessary to define the design and communication principles for netzn, as we had no CD guidelines for this project. I defined three principles based on the internal structure and new positioning of our customer:
friendly, open, flexible
All design components were chosen along these principles and formed the foundation of netzn, influencing accessibility, usability and modular design elements.
I created a basic design guide with simple do's and dont's for understanding the overall look and feel and a style guide as guidelines for the whole team to easily design and add new components.
For a better understanding of how our modular system was growing, I have chosen an approach similar to atomic design, as it was the first time developing something modular for the whole design team.
Theming
As our customer wanted a unique look for their own articles, I came up with the idea of theming the articles in a colourful way, giving the employees the chance to transport their ideas suitable for their target group. The employes liked the idea of colourful theming but saw a problem in the idea of target groups. They thought that it was impossible to determine one specific group.
What did I do?
Understanding that the definition of target groups was too difficult for the IHK employees, I searched for a practical approach to the subject. I came up with moods, as every employee could define if his/her article should look calm, lively or relaxed. Then we designed a set of seven color moods for IHK articles.
The employees liked the outcome and could identify with this method to theme their contents.
Before launching the product, we made two testing rounds with our target groups and several internal testing sprints.
The first round was at the end of octobre 2018 with the IHK employees and focused on the content editor and tagging system. Luckily, the general content creation and principles of tagging content were no problem at all.
The second round was a big step in december 2018.
We did a beta tester only event with our second target group: 50 CEOs and managing directors. They were accompanied by a team of ten people who answered questions and observed problems in the process of loging in, editing the user profile and creating company pages.
After the event, we gathered feedback in groups on netzn and through emails the testers send us. Another big help was to look at the support questions asked, they showed specific pain points we could eliminate. We used these information to optimize the login process and our navigation among other things.
Navigation improvement
As the beta tester event showed, our main navigation wasn't as easy to use as we thought in the first place.
Yes, we reduced all the categories from the former website, but we replaced them with new ones. Now the users had to ask for where to edit their personal profile and couldn't separate between personal and company options in the menue.
Cleaning the menue
After the user feedback, I redesigned the whole navigation in a few steps:
Switch to a slim sidebar layout because the big dropdown menue was too intimidating
Reduce options in the panel
Highlight personal options
Seperate users company pages from user profile options
Integrate profile editing in the menue
We did no testing and it went online with the next rollout. I feared that the beta testers would be displeased as we changed the whole menue. But we had no single complaint and even a big praise from one user as he liked the new menue a lot. So we were on the right way for better usability and user experience.
netzn went online on 18th january 2019, after one year of development with the annual gala of IHK Mittleres Ruhrgebiet. It isn't finished yet and more features are to come.
I'm happy that we managed to realize such a big project in such a short time. But to be fair, I'm not happy with the overall user experience, which is due to the short development time, small team and not enough focus on the enduser.
Talk more to those who shall use it.
The testing groups gave some real important insights about their daily work and what they wished for. They helped me understand their real needs and how we could improve usability. I wish we could have done more testing cycles, as I believe that the end product could be much more usercentered and usable.
The whole project made one clear for me:
A strong focus on the user is necessary for a successful product.