Varberg Municipality

Mockup image showcasing homepage, project-page and map feature
Mockup image showcasing homepage, project-page and map feature

Information-service about urban construction with a digi-physical experience.

My Role: UX-Research, UX-Design and UI-Design

Duration: 6 weeks

Tools: Figma, Photoshop

Team: 5 Design students

Project overview

This project was a collaboration between Varberg Municipality and Halmstad University. The goal was to design a solution for residents who felt uneasy towards Varberg's impending changes.

In essence, this UX design project gave Varberg municipality a solution for effective communication,community engagement, and a shared vision, enhancing residents' participation in Varberg's ongoing transformations.

Key Features:

  • User-Centric Design: Tailored to west coast residents preferences for a community platform.

  • Accessible Information: Prioritizes simplicity for an easy understanding of Varberg's developments.

  • Community Engagement: Fosters citizen participation, enhancing a sense of shared understanding.

  • Social Cohesion: Strengthens community bonds, fostering a unified vision for Varberg's future.

  • Progress Visualization: Allows residents to visualize and connect with Varberg's evolving landscape.

The Concept

The purpose of this design is to emphasize targeted information that generates interest and encourages engagement.

The design solution aims to make residents feel involved and well-informed in an easily accessible and factual manner, while also providing an entertaining element.

Image of a phone scanning a QR-code
Image of a phone scanning a QR-code

Scanning the QR code or entering the URL directs users to a page with details about the specific construction project.

Image of the project page
Image of the project page

1. Construction project page:

  • 360-degree animated image of the construction when finalized.

  • Information explaining what is being built, its appearance, purpose, and impact.

  • Progress bar to inform users the estimated time-span of the project and where they are in the process.

Image of the homepage
Image of the homepage

2. Homepage:

  • Overview of all ongoing construction projects around Varberg. Users can click on projects to find more information.

  • Users can also search for a specific construction project.

Image of the map feature
Image of the map feature

3. Map feature:

  • Informing users where the different construction projects are taking place.

  • Also informs the user about closed roads or limited accessibility due to the construction.

Image of the scanning feature and picture of a man using the AR filter
Image of the scanning feature and picture of a man using the AR filter

4. AR Filters:

  • Gives the user the opportunity to visualize how the finalized project will look like.

  • Makes it possible for the user to share the images with friends on social media.

  • Urges the user to collect filters and at the same time informed about the ongoing projects.

Research - Discovering the problem

The research phase involved a combination of qualitative and quantitative research to gain insights into the perceptions and experiences of individuals regarding urban changes, particularly focusing on Varberg municipality.

1. Semi-structured Group Interviews:

  • Conducted 3 semi-structured group interviews at Halmstad University.

  • Interviewed a diverse group of students, exploring general sentiments toward positive and negative aspects of a city.

2. Semi-structured Individual Deep Interviews:

  • Conducted 7 individual deep interviews, lasting around 40 minutes each.

  • Explored personal and city-related changes, positive and negative aspects of these changes, and coping mechanisms.

3. Expert Consultation:

  • Consulted with a domain expert to understand Varberg residents concerns and perspectives on urban changes.

  • Explored the potential impact on daily life, traffic, and cultural identity.

  • Emphasized the need for forward-thinking and digital solutions.

4. Netnography / Secondary Research:

  • Conducted an ethnographic investigation on relevant Facebook groups and Varberg municipality's website.

  • Gathered insights from online discussions and community engagement.

5. Insights:

  • Identified positive attitudes toward change if it resulted in a favorable community.

  • Recognized challenges related to construction, transportation, and concerns about preserving cultural identity.

  • Uncovered a lack of clarity and information about ongoing and future construction projects.

  • Noted a need for targeted and easily accessible information.

Data Analysis and Methods:

  • Recorded and transcribed all interviews and noted various observations for in-depth analysis.

  • Utilized Affinity diagrams to identify key themes and patterns.

Picture of an interviewee doing card sorting during interview.
Picture of an interviewee doing card sorting during interview.
Image of people taking notes.
Image of people taking notes.
Image of post-its on a whiteboard with our identified themes.
Image of post-its on a whiteboard with our identified themes.

Defining the problem

1. Persona:

  • A Persona was created to understand and visualize aspects of the user's needs, interests, activities, goals, and frustrations.

  • We identified behavioural-variables by mapping and analyzing behavior patterns from the interviewees resulting in defining the personality of the persona.

  • Persona bio, goals, frustrations, motivation and technological habits were defined based on research findings and insights.

Image of our Persona
Image of our Persona

2. Context-scenario:

A contextual scenario was made to highlight the interplay between the persona's goals and everyday frustrations.

Without an existing product solution, it served as a tool to explore how a future product could effectively address the persona's needs.

Image of the context-scenario
Image of the context-scenario

3. Problem Statement:

We defined the Persona's problem as following:

Residents frequently face frustration, uncertainty, and fear due to changes in the physical urban environment, largely stemming from their limited insight into the consequences of these changes.

The absence of a straightforward means for residents to access information on the envisioned outcomes poses a significant problem.

Our challenge is to design a service that offers residents easy insights into the future appearance of the altered urban environment and its overall benefits to the city.

Solving the problem

1. Ideation and sketches:

Different solutions were explored and discussed such as digital information boards to mobile games. A consensus was achieved on a more cost-effective concept based on using QR-codes to access the information.

Sketches was made during the entire developing phase to better communicate and visualize our ideas on how to solve the personas different problems.

Image of the early sketches
Image of the early sketches

3. Low Fidelity Wireframes:

When we were happy with the concept we proceeded to map out the flow with Lo-Fi wireframes.

We also wrote out requirements for the different user interactions and Key-path scenarios.

2. Connecting Concept to Persona Goals:

The concept mainly provided information, but to align the concept with our persona's goals, we've added a social and active aspect.

We made QR code scanning and hunting more appealing by integrating filters, adding an engaging activity. Scanning a QR code now also gives the user access to a social media filter, visualizing the future construction.

Users can then easily share these filtered images with friends or on social media.

Image highlighting persona goals connecting to QR-code scanning and filters
Image highlighting persona goals connecting to QR-code scanning and filters
Image of Lo-Fi wireframes
Image of Lo-Fi wireframes

Usability Test and Iteration

1. Usability Test:

To validate our concept we conducted 5 Usability Tests on users. The test persons was given various tasks to perform and urged to speak openly about their thoughts. They were also timed on how long it took for them to complete a task or navigate to a different page. After the test we asked questions based on their experience, positive aspects, negative aspects and possible improvements.


  • Lack of visual aids that could facilitate the understanding of how certain features were supposed to be used.

  • The text were to small and hard to read.

  • Hard to understand the purpose of various elements of the design.

2. Iteration - Homepage:

We realised from the usability tests that elements on the landing page needed hinting that they were interactive.

To fix this we tried work on the affordance of these elements by rounding the corners and applied a drop-shadow.

Image that showcases changes we did on the homepage after usability test
Image that showcases changes we did on the homepage after usability test

3. Iteration - Project page:

The information on this page was deemed too unspecific, users also noted small text size and excessive content.

To address this, subheadings were created to focus on current relevance and individual impact.

The content was condensed into three subcategories based on identified needs:

  • Purpose.

  • Current construction updates.

  • Impact on residents.

Image that showcases the changes we did on the project page after usability test
Image that showcases the changes we did on the project page after usability test

4. Iteration - Map feature:

Participants evaluating the prototype had difficulty understanding the map feature. The box didn't seem clickable, and the map's purpose was unclear.

The interactive elements of the map were redesigned to be consistent and easy to learn, drawing inspiration from other map apps for recognizability.

Image that showcases the changes we did on the map feature after usability test
Image that showcases the changes we did on the map feature after usability test

What I learned

  • The importance of user evaluation and testing: It's easy to assume you have the right answers after an extensive research phase, but this project showed me that involving the users throughout the entire process is necessary.

  • Personas doesn't always give a correct description of the users: Though we got some valuable insights from making our persona I realised during this project by giving our users a face and personality made it sometimes difficult to understand who is who.

  • A need for more Ideation-methods: Though we discussed and sketched extensively I felt that some members in the team weren't as comfortable with these methods and therefore couldn't voice their thoughts and opinions resulting in less ideas explored.

Thank you for reading my case study!