leonardbetz.com

2023-2024 | RESEARCH | UX | UI

www.Sachsen.de

Analysis and optimization

of the website www.Sachsen.de

Www.sachsen.de is the official portal

of the Free State of Saxony,

designed for residents, businesses, tourists

and anyone interested in learning about the region.

Its goal is to provide easy access

to government services, current news

and insights into Saxony's politics,

culture, economy, and daily life.

2023-2024 | RESEARCH | UX | UI

www.Sachsen.de

Analysis and optimization

of the website www.Sachsen.de

Analysis and optimization

of the website www.Sachsen.de

Www.sachsen.de is the official portal

of the Free State of Saxony,

designed for residents, businesses, tourists

and anyone interested in learning about the region.

Www.sachsen.de is the official portal

of the Free State of Saxony,

designed for residents, businesses, tourists

and anyone interested in learning about the region.

Its goal is to provide easy access

to government services, current news

and insights into Saxony's politics,

culture, economy, and daily life.

Its goal is to provide easy access

to government services, current news

and insights into Saxony's politics,

culture, economy, and daily life.

Problem Statement

The www.sachsen.de website has significant UX/UI issues

that impact user-friendliness.

The www.sachsen.de website has significant UX/UI issues

that impact user-friendliness.

The www.sachsen.de website has significant UX/UI issues

that impact user-friendliness.

Confusing navigation, lack of clear structure

and limited responsiveness across devices

make it difficult for users to navigate.

Confusing navigation, lack of clear structure

and limited responsiveness across devices

make it difficult for users to navigate.

Confusing navigation, lack of clear structure

and limited responsiveness across devices

make it difficult for users to navigate.

Additionally, the layout can be distracting

and accessibility features, including multilingual support, are insufficient.

Additionally, the layout can be distracting

and accessibility features, including multilingual support, are insufficient.

Additionally, the layout can be distracting

and accessibility features, including multilingual support, are insufficient.

A user-centered redesign would greatly enhance

clarity, consistency and overall usability.

A user-centered redesign would greatly enhance

clarity, consistency and overall usability.

A user-centered redesign would greatly enhance

clarity, consistency and overall usability.

Possible Solution

A streamlined, user-centered redesign

with optimized navigation, clear structure, full responsiveness

and improved accessibility — including multilingual support —

will enhance the usability and engagement of www.sachsen.de.

A streamlined, user-centered redesign

with optimized navigation, clear structure, full responsiveness

and improved accessibility —

including multilingual support —

will enhance the usability and engagement of www.sachsen.de.

A streamlined, user-centered redesign

with optimized navigation, clear structure, full responsiveness

and improved accessibility — including multilingual support —

will enhance the usability and engagement of www.sachsen.de.

Team

4 UX UI Designers

My Role

Product Designer

UX UI Designer

Project Duration

weeks

pages

Tools Used

Figma

Adobe XD

Miro

Skype

Google Forms

Design Process

Our team of originally five members collaboratively

handled the analysis, strategy and research phases,

adapting our approach after one team member left early on,

which required us to redistribute the workload.

Our team of originally five members collaboratively

handled the analysis, strategy and research phases,

adapting our approach after one team member left early on,

which required us to redistribute the workload.

Our team of originally five members collaboratively

handled the analysis, strategy and research phases,

adapting our approach after one team member left early on,

which required us to redistribute the workload.

Together, we designed the landing page

and each took responsibility for a specific subpage —

mine being "Family, Social Affairs, Health".

Together, we designed the landing page

and each took responsibility for a specific subpage —

mine being "Family, Social Affairs, Health".

Together, we designed the landing page

and each took responsibility for a specific subpage —

mine being "Family, Social Affairs, Health".

Due to time constraints, we only completed wireframes as a team;

however, I individually developed a finished design for my subpage,

transferring and refining the wireframes from Adobe XD to Figma.

Due to time constraints, we only completed

wireframes as a team; however, I individually

developed a finished design for my subpage,

transferring and refining the wireframes

from Adobe XD to Figma.

Due to time constraints, we only completed wireframes as a team;

however, I individually developed a finished design for my subpage,

transferring and refining the wireframes from Adobe XD to Figma.

Discover

Analysis

User Interviews

User Research

Analysis

User Interviews

User Research

Analysis

User Interviews

User Research

Define

Personas

Empathy Map

Journey Map

Personas

Empathy Map

Journey Map

Personas

Empathy Map

Journey Map

Ideate

User Flow

Card Sorting

Information Architecture

User Flow

Card Sorting

Information Architecture

User Flow

Card Sorting

Information Architecture

Design

Wireframes

Visual Design

Wireframes

Visual Design

Wireframes

Visual Design

Test

Usability Testing

Implementing Feedback

Usability Testing

Implementing Feedback

Usability Testing

Implementing Feedback

Discover PHASE

Background

During my training in UX/UI Design,

we were tasked with applying

our newly acquired knowledge

by optimizing the user experience

and updating the user interface design

of a large, existing website project.

During my training in UX/UI Design,

we were tasked with applying

our newly acquired knowledge

by optimizing the user experience

and updating the user interface design

of a large, existing website project.

During my training in UX/UI Design,

we were tasked with applying

our newly acquired knowledge

by optimizing the user experience

and updating the user interface design

of a large, existing website project.

Our team chose to work on the website

of the federal state Saxony, www.sachsen.de,

which suffers from a poor information structure,

bad user experience,

and a completely outdated UI design.

Our team chose to work on the website

of the federal state Saxony, www.sachsen.de,

which suffers from a poor information structure,

bad user experience,

and a completely outdated UI design.

Our team chose to work on the website

of the federal state Saxony, www.sachsen.de,

which suffers from a poor information structure,

bad user experience,

and a completely outdated UI design.

Actual state of the website

Challenge

The key challenge in the redesign process

was establishing a clear hierarchy to improve navigation,

as the current layout makes it difficult for users

to find essential information.

The key challenge in the redesign process

was establishing a clear hierarchy to improve navigation,

as the current layout makes it difficult for users

to find essential information.

The key challenge in the redesign process

was establishing a clear hierarchy to improve navigation,

as the current layout makes it difficult for users

to find essential information.

Additionally, creating an inclusive design that addresses

the needs of both marginalized and dominant groups

was challenging, as we aimed to make www.sachsen.de

accessible and welcoming for all users.

Additionally, creating an inclusive design that addresses

the needs of both marginalized and dominant groups

was challenging, as we aimed to make www.sachsen.de

accessible and welcoming for all users.

Additionally, creating an inclusive design that addresses

the needs of both marginalized and dominant groups

was challenging, as we aimed to make www.sachsen.de

accessible and welcoming for all users.

Examination of the website

in relation to ISO standards and design laws

Examination of the website

in relation to ISO standards and design laws

Examination of the website

in relation to ISO standards and design laws

Analyses of target Groups

Demographic research and target group analysis

Based on our demographic research

and target group analysis,

we identified five key user groups

for the Saxony website:

Based on our demographic research

and target group analysis,

we identified five key user groups

for the Saxony website:

Based on our demographic research

and target group analysis,

we identified five key user groups

for the Saxony website:

Residents (25-35 years)

Residents (36-49 years)
Residents (50-64 years)
Tourists (24-35 years)
Tourists (36-49 years)

Residents (25-35 years)

Residents (36-49 years)
Residents (50-64 years)
Tourists (24-35 years)
Tourists (36-49 years)

Residents (25-35 years)

Residents (36-49 years)
Residents (50-64 years)
Tourists (24-35 years)
Tourists (36-49 years)

Hypotheses

To determine the requirements

of the user groups for the structure

and content of the website, we created

hypotheses for each group.

To determine the requirements

of the user groups for the structure

and content of the website, we created

hypotheses for each group.

To determine the requirements

of the user groups for the structure

and content of the website, we created

hypotheses for each group.

For each hypothesis, we formulated

three survey questions to test them,

along with five general questions

about the interviewees.

For each hypothesis, we formulated

three survey questions to test them,

along with five general questions

about the interviewees.

For each hypothesis, we formulated

three survey questions to test them,

along with five general questions

about the interviewees.

However, due to time constraints

and the departure of one team member,

we were only able to focus on

three of the main target groups.

However, due to time constraints

and the departure of one team member,

we were only able to focus on

three of the main target groups.

However, due to time constraints

and the departure of one team member,

we were only able to focus on

three of the main target groups.

Hypotheses and Questions

Survey

To better understand the needs and preferences

of our target groups, we conducted a survey with Google Forms

focusing on their demographics, online behavior, and interests.

To better understand the needs and preferences

of our target groups, we conducted a survey

with Google Forms focusing on their demographics,

online behavior, and interests.

To better understand the needs and preferences

of our target groups, we conducted a survey with Google Forms

focusing on their demographics, online behavior, and interests.

Survey with Google Forms

The results provided valuable insights into user priorities,

such as a strong preference for mobile-first design,

interest in cultural and leisure activities and

the importance of social media in reaching users effectively.

The results provided valuable insights into user priorities,

such as a strong preference for mobile-first design,

interest in cultural and leisure activities and

the importance of social media in reaching users effectively.

The results provided valuable insights into user priorities,

such as a strong preference for mobile-first design,

interest in cultural and leisure activities and

the importance of social media in reaching users effectively.

These findings guided the development

of a user-centered website tailored to their expectations.

These findings guided the development

of a user-centered website tailored to their expectations.

These findings guided the development

of a user-centered website tailored to their expectations.

Key Insights derived from the Survey

Demographics:

Majority: 36-49 years old, predominantly female.
Most users are residents, focusing on Dresden and Leipzig.

Demographics:

Majority: 36-49 years old, predominantly female.
Most users are residents, focusing on Dresden and Leipzig.

Demographics:

Majority: 36-49 years old, predominantly female.
Most users are residents, focusing on Dresden and Leipzig.

Device Usage:

Smartphones dominate, validating the need for a mobile-first design.

Device Usage:

Smartphones dominate, validating the need for a mobile-first design.

Device Usage:

Smartphones dominate, validating the need for a mobile-first design.

Social Media:

YouTube and Instagram are popular, enabling targeted marketing.

Social Media:

YouTube and Instagram are popular, enabling targeted marketing.

Social Media:

YouTube and Instagram are popular, enabling targeted marketing.

Leisure and Travel:

Preferences for relaxation, short trips, and family-friendly destinations.
Budget-conscious travel options (80-150€ daily).

Leisure and Travel:

Preferences for relaxation, short trips, and family-friendly destinations.
Budget-conscious travel options (80-150€ daily).

Leisure and Travel:

Preferences for relaxation, short trips, and family-friendly destinations.
Budget-conscious travel options (80-150€ daily).

Cultural Interests:

Strong interest in cultural events, outdoor activities, and local happenings.

Cultural Interests:

Strong interest in cultural events, outdoor activities, and local happenings.

Cultural Interests:

Strong interest in cultural events, outdoor activities, and local happenings.

Define Phase

personas

By grounding the design process in realistic user profiles,

personas ensured a user-centered approach

that addressed specific challenges

and enhanced the overall user experience.

By grounding the design process in realistic user profiles,

personas ensured a user-centered approach

that addressed specific challenges

and enhanced the overall user experience.

By grounding the design process in realistic user profiles,

personas ensured a user-centered approach

that addressed specific challenges

and enhanced the overall user experience.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

This method provided a clear problem definition,

guiding targeted improvements that resonate

with actual user needs and highlighted

the core issues to be resolved.

Personas

Customer Journey Maps

We mapped the entire user experience

—from the initial interaction to the final goal—

to identify key touchpoints and potential pain points.

We mapped the entire user experience

—from the initial interaction to the final goal—

to identify key touchpoints and potential pain points.

We mapped the entire user experience

—from the initial interaction to the final goal—

to identify key touchpoints and potential pain points.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

This approach provided insights

into the journey from the user's perspective,

ensuring a seamless and consistent design.

By analyzing these journey maps,

we resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

By analyzing these journey maps,

we resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

By analyzing these journey maps,

we resolved specific frustrations and obstacles,

creating a smoother, more satisfying experience

that aligned with the personas we developed.

Customer Journey Maps

Ideate Phase

Card Sorting

Our analysis revealed that the existing

information structure was far from user-friendly.

Our analysis revealed that the existing

information structure was far from user-friendly.

Our analysis revealed that the existing

information structure was far from user-friendly.

To address this, we conducted a card sorting workshop

to understand user preferences.

To address this, we conducted a card sorting workshop

to understand user preferences.

To address this, we conducted a card sorting workshop

to understand user preferences.

This workshop helped us define

a clear, intuitive information structure

tailored to the needs of the website's users,

ensuring easier navigation and understanding.

This workshop helped us define

a clear, intuitive information structure

tailored to the needs of the website's users,

ensuring easier navigation and understanding.

This workshop helped us define

a clear, intuitive information structure

tailored to the needs of the website's users,

ensuring easier navigation and understanding.

Card Sorting

Information Structure

Using the insights from the card sorting workshop,

we developed a new information structure

that aligned with user needs,

ensuring it was clear and intuitive to navigate.

Using the insights from the card sorting workshop,

we developed a new information structure

that aligned with user needs,

ensuring it was clear and intuitive to navigate.

Using the insights from the card sorting workshop,

we developed a new information structure

that aligned with user needs,

ensuring it was clear and intuitive to navigate.

Information Structure of the "Family in Saxony" subpage

Scoping

Problems & Solutions

With sufficient information gathered,

we could now identify clear problems,

propose effective solutions,

and organize the design process.

With sufficient information gathered,

we could now identify clear problems,

propose effective solutions,

and organize the design process.

With sufficient information gathered,

we could now identify clear problems,

propose effective solutions,

and organize the design process.

To enhance navigation, we decided to create

teaser formats on the homepage,

offering brief previews of subpage content.

To enhance navigation, we decided to create

teaser formats on the homepage,

offering brief previews of subpage content.

To enhance navigation, we decided to create

teaser formats on the homepage,

offering brief previews of subpage content.

My role focused on designing

the “Family in Saxony” subpage.

My role focused on designing

the “Family in Saxony” subpage.

My role focused on designing

the “Family in Saxony” subpage.

Key Design Guidelines

Optimize Site Navigation: Ensure smooth,
intuitive browsing by consolidating
and clarifying navigation elements.

Optimize Site Navigation: Ensure smooth,
intuitive browsing by consolidating
and clarifying navigation elements.

Optimize Site Navigation: Ensure smooth,
intuitive browsing by consolidating
and clarifying navigation elements.

Clear Content Structure: Arrange
information for easy access to
core topics, avoiding unnecessary clutter.

Clear Content Structure: Arrange
information for easy access to
core topics, avoiding unnecessary clutter.

Clear Content Structure: Arrange
information for easy access to
core topics, avoiding unnecessary clutter.

Responsive Design: Ensure the website
is fully responsive across all devices,
seamlessly presenting essential content.

Responsive Design: Ensure the website
is fully responsive across all devices,
seamlessly presenting essential content.

Responsive Design: Ensure the website
is fully responsive across all devices,
seamlessly presenting essential content.

Focus on Relevance: Avoid showcasing
off-topic content in prominent areas
to retain user focus.

Focus on Relevance: Avoid showcasing
off-topic content in prominent areas
to retain user focus.

Focus on Relevance: Avoid showcasing
off-topic content in prominent areas
to retain user focus.

Distinct Links: Make links
easily identifiable by visually
distinguishing them from regular text.

Distinct Links: Make links
easily identifiable by visually
distinguishing them from regular text.

Distinct Links: Make links
easily identifiable by visually
distinguishing them from regular text.

Clear Hierarchy: Establish a
structured page hierarchy,
dynamically adjusting font sizes
for different screens.

Clear Hierarchy: Establish a
structured page hierarchy,
dynamically adjusting font sizes
for different screens.

Clear Hierarchy: Establish a
structured page hierarchy,
dynamically adjusting font sizes
for different screens.

Engaging Layout: Design a visually
appealing layout that encourages
users to explore further.

Engaging Layout: Design a visually
appealing layout that encourages
users to explore further.

Engaging Layout: Design a visually
appealing layout that encourages
users to explore further.

Consistency: Maintain a cohesive design
aligned with the overall site style.

Consistency: Maintain a cohesive design
aligned with the overall site style.

Consistency: Maintain a cohesive design
aligned with the overall site style.

Accessibility: Provide content
in multiple languages and include
simplified formats for greater inclusivity.

Accessibility: Provide content
in multiple languages and include
simplified formats for greater inclusivity.

Accessibility: Provide content
in multiple languages and include
simplified formats for greater inclusivity.

Design Phase

SCRIBBLES

To develop a testable prototype efficiently,

I began by creating low-fidelity wireframes

based on initial sketches.

To develop a testable prototype efficiently,

I began by creating low-fidelity wireframes

based on initial sketches.

To develop a testable prototype efficiently,

I began by creating low-fidelity wireframes

based on initial sketches.

This approach enabled quick visualization

and refinement of ideas.

This approach enabled quick visualization

and refinement of ideas.

This approach enabled quick visualization

and refinement of ideas.

Scribbles

WIREFRAMES

After sketching initial design ideas on paper,

I transitioned to high-fidelity wireframes

to refine my concepts further.

After sketching initial design ideas on paper,

I transitioned to high-fidelity wireframes

to refine my concepts further.

After sketching initial design ideas on paper,

I transitioned to high-fidelity wireframes

to refine my concepts further.

Using Adobe XD, I developed a first clickable prototype,

providing a tangible representation of the design

for user interaction and feedback.

Using Adobe XD, I developed a first clickable prototype,

providing a tangible representation of the design

for user interaction and feedback.

Using Adobe XD, I developed a first clickable prototype,

providing a tangible representation of the design

for user interaction and feedback.

High-fidelity Wireframes

Test Phase

Usability Test

To assess the user-friendliness of our designs,

we conducted usability tests

utilizing the thinking aloud method.

To assess the user-friendliness of our designs,

we conducted usability tests

utilizing the thinking aloud method.

To assess the user-friendliness of our designs,

we conducted usability tests

utilizing the thinking aloud method.

Participants navigated through

carefully designed user scenarios

and tackled specific tasks,

providing real-time feedback.

Participants navigated through

carefully designed user scenarios

and tackled specific tasks,

providing real-time feedback.

Participants navigated through

carefully designed user scenarios

and tackled specific tasks,

providing real-time feedback.

My role encompassed the creation,

moderation, recording, and evaluation

of these tests, ensuring actionable insights

for refining the design.

My role encompassed the creation,

moderation, recording, and evaluation

of these tests, ensuring actionable insights

for refining the design.

My role encompassed the creation,

moderation, recording, and evaluation

of these tests, ensuring actionable insights

for refining the design.

Usability Test

Implementing Feedback

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

The evaluation of the tests revealed

key areas for improvement,

providing valuable insights that directly

contributed to an enhanced user experience.

These findings guided us in refining the design,

ensuring it met the users' needs more effectively.

These findings guided us in refining the design,

ensuring it met the users' needs more effectively.

These findings guided us in refining the design,

ensuring it met the users' needs more effectively.

Comparison and conclusion

refinement

To finalize the Family in Saxony subpage,

I created a polished design in Figma,

ensuring a cohesive visual identity

aligned with the overall website.

To finalize the Family in Saxony subpage,

I created a polished design in Figma,

ensuring a cohesive visual identity

aligned with the overall website.

To finalize the Family in Saxony subpage,

I created a polished design in Figma,

ensuring a cohesive visual identity

aligned with the overall website.

The design was adapted to be fully responsive,

with layouts tailored for desktop, tablet

and mobile to guarantee a seamless

user experience across devices.

The design was adapted to be fully responsive,

with layouts tailored for desktop, tablet

and mobile to guarantee a seamless

user experience across devices.

The design was adapted to be fully responsive,

with layouts tailored for desktop, tablet

and mobile to guarantee a seamless

user experience across devices.

Refined Wireframes in Figma

Prototypes

Using these designs, I built functional prototypes

to enable interactive testing,

showcasing intuitive navigation

and an optimized information structure.

Using these designs, I built functional prototypes

to enable interactive testing,

showcasing intuitive navigation

and an optimized information structure.

Using these designs, I built functional prototypes

to enable interactive testing,

showcasing intuitive navigation

and an optimized information structure.

This approach ensured the design was ready

for real-world implementation while maintaining

a user-centered focus.

This approach ensured the design was ready

for real-world implementation while maintaining

a user-centered focus.

This approach ensured the design was ready

for real-world implementation while maintaining

a user-centered focus.

Desktop Prototype

View Prototype

View Prototype

View Prototype

Tablet Prototype

View Prototype

View Prototype

View Prototype

Mobile Prototype

View Prototype

View Prototype

View Prototype

However, design is never truly finished.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

Through continuous iteration, testing

and refinement, the design process offers

opportunities to further enhance usability

and create a solution that is even more

aligned with user needs.

Thank You for your time

Feel free to contact me

and check out my other use cases!

Thank You for your time

Feel free to contact me

and check out my other use cases!