Berlin Start-Up Map Website: Redesigning the Public Service Section
Making public information for startups accessible by redesigning the information architecture.
Project Overview
- Client: State of Berlin’s Senate Department for Economics, Energy and Public Enterprises
- My Role: Research, Information Architecture, Webdesign, User Testing
- Project time: 9 days (July 2021)
- Platform: Desktop
Background
Startup-map.berlin is an initiative of the State of Berlin’s Senate Department for Economics, Energy, and Public Enterprises in cooperation with the Berlin Startup Unit. The website gives an overview of the Berlin Startup Ecosystem. It also provides condensed information about public services on topics like e.g. funding, moving, infrastructure, Corona-aid. For this project, I collaborated with another UX/UI designer.
The Challenge
- Making public information accessible for startups and for spreading the information to a bigger audience
- Linking and updating the information that is already there
- Giving the public service information an equivalent look and feel like the rest of the startup-map.berlin
The Process
User Research — User Persona — Problem Statement — Prototyping & Wireframing — User Flows — User Testing
Public Services — Current State
Information was displayed as a lot of text and links. Just from the first impressions, visitors were overloaded by the information on the page. The hierarchy of information structure was lacking, also the links were missing visual cues.
Getting to Know Our Users — Survey and Interviews
STAKEHOLDER INTERVIEW
To get a better understanding of the project, we started off the research with an interview with the stakeholder. It helped us to set the target audience and clarify the project requirements. The project should provide valuable information in a fast and suitable way for people who are about to launch a startup or have launched one in Berlin. The aim is to bundle all important information for start-up founders and make it more easily accessible.
USER SURVEY
Our next step was to conduct a survey in order to better understand the way of getting the information on the startup ecosystem in Berlin and the main difficulties our users are faced with while doing so. The survey showed that there isn’t one specific source of information. The common difficulties users faced when searching for info were regarding the trustworthiness and availability of info on different sources, the texts and regulations were complicated and confusing, also the language difference presented an obstacle in understanding the info provided.
USER INTERVIEWS AND FIRST USABILITY TESTING
After the survey, we conducted eight interviews via Zoom calls. Most of the interviewees were startup founders at an early stage. Besides the interview, users were asked to do a quick test of the current state of startup-map.berlin with a focus on the Public Services page. The goal was to quickly assess first user impressions and discover the main pains while navigating and searching for information on the website. To group and organize data collected during research we used the Affinity Mapping method.
AFFINITY MAPPING FINDINGS
User Interviews:
- There is no one good source for information and it is hard to find them
- Bureaucracy is an obstacle
- Most of the information is only available in German (especially the legal part)
User Testing of BSM (Public Services) Website:
- Lack of information hierarchy
- Links not having visual cues
- Content table — how to structure and present information?
- Menu overlapping, unclear
- Possibility to search with keywords, filters
- Present steps on how to start a business
- Providing tailored info
- Possibility to change website language
Framing the Challenge
PROBLEM STATEMENT
With the help of the Affinity Map, we clustered the gathered information in different levels and began with our problem statement:
While visiting Berlin Start-Up Map website, start-up founders need an effective and user-friendly way to find information that is clear to understand to get help for their specific inquiries.
HOW MIGHT WE QUESTIONS
After coming up with the problem statement we reframed it into six HMW questions to help us find the best solution and facilitate the brainstorming phase.
Building Empathy — Defining the Target User
Having the problem statement defined, we started building the user persona to represent our target user. It helped us to understand who will be using the product and identify user needs.
Refining the Information Architecture
After having defined the problem and user needs we reviewed the existing content of the website. Based on our findings we brainstormed to come up with possible solutions regarding the improvement of the website information architecture.
The new site map of the Public Services homepage offers more structure and information hierarchy dividing the content into categories that are clear and easy to understand. Responding to our user’s needs an additional page with the most commonly asked questions (Top FAQ) was added along with the feature of getting Personalized Information.
Wireframing and Prototype Usability Testing
Firstly, we started sketching the initial ideas on paper, creating a Lo-Fi wireframe with three user flows. Based on the user research, our solution should provide a way for the founders to search, filter, and access information that is arranged in a clear way so they feel supported through different steps and processes. To test this assumption we will conduct remote usability testings of our prototypes to uncover more important insights like pain points, navigation issues, or if a design feature is useful or not.
MID-FI PROTOTYPE: USABILITY TESTING
Remote usability testing was done with Maze software. Testing was split into three missions (tasks) related to the user flows — checking out Starting a Business in Berlin and Top FAQ sections as well as using the Personalized Information feature.
MID-FI PROTOTYPE: USABILITY TESTING RESULTS
Besides testing out the usability of the website prototype, testers were asked to rate the usefulness of the sections and added features. They could additionally express their thoughts on adding/changing something to the website and flows through open questions providing valuable feedback for further iterations:
“The “Anmeldung” isn’t in the key words (the ones you have on the top) “
Tester #46073259, July 27th 2021 — Top FAQ page
Visually, I like this flow chart format. I want the information in the boxes to be clickable, to elaborate more on the details of this process.”
Tester #46081286, July 27th 2021 — Starting a Business in Berlin Page
“Why is it only one question per page? Lots of page loading will be required, makes the process take longer than it needs to.”
Tester #46113746, July 27th 2021 — Personalized Information Feature
MID-FI PROTOTYPE: USABILITY TESTING OVERVIEW
- 21 testers
- Overall usability score 73/100 (calculated by Maze) — the score reflects how easy it is for a user to perform a given task (mission) with the prototype, a high usability score indicates the design will be easy to use and intuitive
- Click tracking heatmaps helped us discover some smaller navigation problems like getting back from certain pages
- Most of the user feedback was collected regarding the Personalized Information mission
- Users found the information and feature provided fairly useful on average: Top FAQ page — 8,6/10, Starting a Business in Berlin page — 8,2/10, Personalized Information feature — 7,7/10
Hi-Fi Prototype — MVP Creation
When creating the Hi-Fi Prototype we worked with the already existing UI elements like the category filters to keep an equivalent look and feel like the rest of the website. Based on the findings from the Mid-Fi testing following iterations were made:
- Put “Anmeldung” in the filters, other keywords — Top FAQ page
- How to go back? — Top FAQ page
- Make infographic clickable — Starting a Business in Berlin page
- Change from having only one question per page — Personalized Information feature
- Put Yes/No options to select in the questionnaire — Personalized Information feature
Learnings and Next Steps
In the testing of the Hi-Fi prototype we had 25 participants which provided us with the following learnings:
- Better organize topics of filters, make them more recognizable (clickable), be mindful of German legal terms and how they translate for English speakers — Top FAQ page
- The infographic on the founding process could have clickable links (heatmap findings), be more visually attractive, and shorter — Starting a Business in Berlin page
POTENTIAL FOR FUTURE IMPLEMENTATION?
- The majority of the testers found the Personalized Information feature useful (8,9/10 average in the Hi-Fi test)
- Adding video tutorials to make the content more engaging
WHAT’S NEXT?
Meeting our stakeholders for the project review so far. Together, we will discuss the benefits of the website redesign, also explore possibilities for future implementation of solutions presented. The goal is to align with the stakeholders and set clear expectations for the further development of the project.
➡ Interact with the Hi-Fi prototype HERE.
