netzn
Carolin Jütz
UI/UX designer
Made with

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.

Diving in

Searching for the pain points

During further workshops with the employees it turned out that the wish for a new website resulted from two main problems:


  1. The communication with members of IHK was anything but easy. They wanted to be closer to them and be able to react more flexibly.
  2. 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

Personas

MVP users

For the launch of netzn we focussed on two main target audiences:

  1. The IHK employee
  2. 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.

Photo by LinkedIn Sales Navigator on Unsplash
Photo by LinkedIn Sales Navigator on Unsplash

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.

Photo by Peter van Eijk on Unsplash
Photo by Peter van Eijk on Unsplash

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.

User journeys

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 sketches of Carlas way to create content.
First journey sketches of Carlas way to create content.

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.

netzn

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.

This version was to complex and time consuming.
This version was to complex and time consuming.

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.

The actual editor on netzn.de
The actual editor on netzn.de

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.

A simple solution for better user experience when using the editor as an inexperienced user.
A simple solution for better user experience when using the editor as an inexperienced user.

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.

netzn

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.

Wireframe of our first approach.
Wireframe of our first approach.

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.

The second approach shows the searchbar placed on top of tags.
The second approach shows the searchbar placed on top of tags.

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.

Modular design system

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.

The IHK employees use moods to transport their messages.
The IHK employees use moods to transport their messages.

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.

User testing

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.

The menue wasn't intuitive and didn't help the user to navigate quickly.
The menue wasn't intuitive and didn't help the user to navigate quickly.

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.

The new sidebar layout was much easier to use.
The new sidebar layout was much easier to use.

Cleaning the menue

After the user feedback, I redesigned the whole navigation in a few steps:

  1. Switch to a slim sidebar layout because the big dropdown menue was too intimidating

  2. Reduce options in the panel

  3. Highlight personal options

  4. Seperate users company pages from user profile options

  5. 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.

It is (a)live!

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.

2
Testing Groups
100
Testers
1
Year development

Learnings

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.