196 lines
11 KiB
Markdown
196 lines
11 KiB
Markdown
|
---
|
|||
|
|
title: Design of a responsive Website for a major German city
|
|||
|
|
date: 2024-03-31
|
|||
|
|
tags: [UX Research, Web Design, Product Strategy]
|
|||
|
|
image:
|
|||
|
|
url: images/projects/smartberg/image.png
|
|||
|
|
alt: Cover Image
|
|||
|
|
overview: As part of my UX training "Certified UX-Designer", I designed a responsive Website for Smartberg, a major German city. The project goal was to create a barrier-free, user interface, that equally well adapts to the needs of the city's heterogeneous target group. Such a group comprises people from all age ranges and includes Smartberg's citizens, students, tourists and employees of the city administration. Moreover, this project included the development of the city's visual identity, which stands from the intersection of history, cultural traditions, modernity and an ecologically oriented Smart City, with digital administration.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Problem statement
|
|||
|
|
|
|||
|
|
Given the many, and sometimes contradictory sources of information that exist today, **it isn't easy to find reliable information**. Moreover, busy lives, make it **harder to be updated about what is going on in the city**, and given the prevalence of the internet, information needs to be shared online to reach most people. Further, the heavy workload faced by city workers requires solutions that make procedures faster and smoother both for city hall workers and citizens.
|
|||
|
|
|
|||
|
|
# Solution proposal
|
|||
|
|
|
|||
|
|
A responsive Website that **unifies and offers trustworthy information and services** to citizens and visitors of the city. Additionally, a **mobile App for citizens,** that allows them to **easily handle their city hall procedures** and stay **updated and reminded of events** of interest in the city.
|
|||
|
|
|
|||
|
|
This solution needs to be equally well accessible from any device and stick to conventional functions and interactions, given the heterogeneity of the city's target group.
|
|||
|
|
|
|||
|
|
## Understand
|
|||
|
|
|
|||
|
|
### Project goals
|
|||
|
|
|
|||
|
|
As stated, the project brief consisted of the design of a responsive Website for Smartberg, which needs to adapt and help solve the needs of the different target groups of the city. From a stakeholder perspective, the goals that want to be achieved, based on each target group, are:
|
|||
|
|
|
|||
|
|
**Citizens of Smartberg**
|
|||
|
|
|
|||
|
|
+ Use citizen services, information and forms for administrative matters.
|
|||
|
|
+ Use information services about all happenings and events in the city.
|
|||
|
|
+ Community building - establishment of a city community for the exchange of citizens.
|
|||
|
|
+ Involve citizens in decision-making processes (open democracy).
|
|||
|
|
|
|||
|
|
**Students**
|
|||
|
|
|
|||
|
|
+ Student offers and accommodation services.
|
|||
|
|
+ Use cultural offerings (concerts, theatre, cinema, readings...).
|
|||
|
|
+ Enjoy nightlife (parties, clubs, concerts).
|
|||
|
|
+ Take advantage of culinary offers (restaurants, bars, pubs, cafés ...).
|
|||
|
|
|
|||
|
|
**Tourists**
|
|||
|
|
|
|||
|
|
+ Visit places of interest and cultural institutions.
|
|||
|
|
+ Book accommodation (hotels, guesthouses, flats...).
|
|||
|
|
+ Take advantage of cultural offerings (concerts, theatre, cinema, readings...).
|
|||
|
|
+ Visit restaurants, bars, pubs and cafés.
|
|||
|
|
|
|||
|
|
**Employees of the city administration**
|
|||
|
|
|
|||
|
|
+ Relieve the city administration through online citizen services.
|
|||
|
|
+ Increase attractiveness through tourist offers and hospitality services.
|
|||
|
|
+ Provision of educational and cultural offers.
|
|||
|
|
+ Connection and integration of social media offerings.
|
|||
|
|
|
|||
|
|
### User Research
|
|||
|
|
|
|||
|
|
As part of Smartberg's attempt to become an attractive city brand for tourists, it was thought to expand the city website into a **service platform**. Thus, I conducted a user interview to develop content and service ideas for tourists, based on their **needs before and during a visit to Smartberg.**
|
|||
|
|
|
|||
|
|
Firstly, I considered Germany´s "Sinus-Milieus" classification (groups of like-minded people within a population with a similar outlook on life and values). And within this classification, the **"socio-ecological milieu" group segment**. The purpose of this was having a general understanding of the mindset and motivations that might move Smartberg's target group of tourists (sustainability and culture seekers).
|
|||
|
|
|
|||
|
|
Further, I stated the research goals and formulated the main questions for a **user interview.**
|
|||
|
|
|
|||
|
|
#### Research goals and questionnaire
|
|||
|
|
|
|||
|
|
- What information is important for users (tourists) to have access to?
|
|||
|
|
- Which values influence their travel behaviour?
|
|||
|
|
- Which services and content would they like to have access to?
|
|||
|
|
- What makes them choose a destination over others?
|
|||
|
|
- What problems do they face when travelling that could be solved by the website?
|
|||
|
|
|
|||
|
|
**Q1** What aspects are important to you when choosing a holiday destination?
|
|||
|
|
|
|||
|
|
(e.g. entertainment, safety, price, nature, accessibility).
|
|||
|
|
|
|||
|
|
**Q2** What makes a good travel destination for you? What is your idea of a good holiday destination?
|
|||
|
|
|
|||
|
|
**Q3** Are there certain activities that you like to do when travelling? Which ones?
|
|||
|
|
|
|||
|
|
**Q4** Do you inform yourself about your destination before travelling? How do you find out about your destination before/during your trip? (activities, events, where to eat, transport)
|
|||
|
|
|
|||
|
|
**Q5** What information would you like to know about your destination before travelling?
|
|||
|
|
|
|||
|
|
**Q6** Do you regularly use any services/apps when travelling? (e.g. Google Maps, Vegan Cow, All Trails, tourist information)? Which ones?
|
|||
|
|
|
|||
|
|
#### Empathy map
|
|||
|
|
|
|||
|
|
After delving into the *socio-ecological milieu*, and conducting a one-person interview, I condensed the information into an empathy map to gain more insight into the user attitudes and experiences on travelling. The particular emphasis here was on understanding **what circumstances might affect the person emotionally** and **what social influences they are exposed to.**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### User persona
|
|||
|
|
|
|||
|
|
I translated insights from the empathy map into a user persona, to have a more complete reference of the **user's mindset and attitudes**, to guide future design decisions.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### Customer Journey
|
|||
|
|
|
|||
|
|
Based on the user research, I created a Customer Journey to understand the whole process a user might go through while interacting with the Smartberg brand. The main purpose was to **identify possible obstacles (annoyances)** the user might face and the **resulting opportunities (potentials) to improve their overall experience.**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### User Scenario, Use Cases and User Stories
|
|||
|
|
|
|||
|
|
As part of the development of the tourist offers section of Smartberg, I conceived a user scenario to analyse possible processes and paths, the user might go through. This scenario displays the process of visiting Smartberg's website to find out ideas for family trips until the booking of an activity.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### Usability testing
|
|||
|
|
|
|||
|
|
For the tourist section of the Smartberg website, is planned to include a section showcasing popular excursion destinations and attractions. To gain an **understanding of the use of comparable websites**, I carried out a usability test using the Think Out Loud method on "Freiburg's top 10 sights". The main goal was to identify usability successes, shortcomings and potentials, that can be implemented in the Smartberg website.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### Swot Analyze
|
|||
|
|
|
|||
|
|
I further did a competitive analysis to concretize the strengths and weaknesses of potential competitors (Freiburg).
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### Value Proposition
|
|||
|
|
|
|||
|
|
One of the project's goals is to enhance the quality of life of Smartberg's citizens by facilitating city hall procedures. Hence, I developed a value proposition, which takes some of the **citizens' tasks/activities** and traces a proposal of **how the product can bring value to the citizen**, based on their needs.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Ideation
|
|||
|
|
|
|||
|
|
### Story Card
|
|||
|
|
|
|||
|
|
I wrote down a Story Card for applying for a new passport on the Smartberg website. The purpose of this is to **identify the problems that need to be solved and the solutions that will best meet citizens' needs** while prioritizing the features to be developed.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Card Sorting
|
|||
|
|
|
|||
|
|
I wrote down all the content ideas for the Smartberg website and conducted the Card Sorting method with one person. The Card Sorting showed how current category labels (names) were understood, and which contents were thought as belonging to the same category, and therefore expected to be found under the same section. All in all, this allowed **setting category names, spotting redundant content and finding the most appropriate content structure for the website.**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### User Flow
|
|||
|
|
|
|||
|
|
To better understand how users move through the Smartberg website, I created a user flow that shows possible paths from the homepage to booking a theatre show. This user flow allows for a visual reference to the **possible steps and paths the user can take**, and thus the **identification of steps that can be optimised for the user to reach their goal more easily.**
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## Design
|
|||
|
|
|
|||
|
|
### Sketch
|
|||
|
|
|
|||
|
|
Through sketches, I created an initial concept for individual screens that display the user flow (homepage--> booking a theatre show) described above.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Wireframe
|
|||
|
|
|
|||
|
|
***Website, desktop version***
|
|||
|
|
|
|||
|
|
I developed wireframes displaying the individual screen sequence for the theatre booking user flow.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
***Website, mobile version-Homepage***
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
***Smartberg's App***
|
|||
|
|
|
|||
|
|
I conceptualized a mobile App in addition to the responsive website. The app is aimed exclusively at the town's citizens. The focus is on citizen services, catering and cultural offers. Here, I designed the mobile app process for registering a car with a preferred licence plate number.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Hi-Fi Prototype
|
|||
|
|
|
|||
|
|
Based on the user research and previous UX analyses, I created a high fidelity prototype, which corresponds to the MVP (Minimum Viable Product) for Smartberg's website. The visual design emphasizes culture and tradition. The UI builds on the city's look, by taking the color palette from the city's arquitecture and opting a more traditional-looking font.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Style guide
|
|||
|
|
|
|||
|
|
Lastly, I condensed the website's visual elements into a small style-guide, which serves as a reference for the creation of future cohesive designs for the city.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|