Responsive Web Design for a Nursing Company in Switzerland 🇨🇭

UX Researcher

UX Designer

UI Designer

Figma

Miro

Spitex Final Responsive Designs

Table of content

❇️ Project Overview

✦ About the client: Spitex Plus24 gmbH

🚫 The Problem: Non-responsive and outdated design is impacting service bookings

❇️ The Solution: A platform that is accessible, user-friendly, easy to navigate, and responsive across all devices

❇️ The Process: Defining our project goals & business constraints + user research summary

❇️ Main Changes after Hi-fi Usability Study

❇️ Extensible Design System

❇️ Project Mockups

❇️ Key Takeaways - What I learned

❇️ Next Steps: Recommendations for Future Features

🤩 Impressed? Want me to build a website for you?

📊 Stats for a similar project

✦ Timeline: ~1-4 weeks

✦ Budget: $2,000+

✦ Number of components: 30+

✦ Deliverables: Research, Full Responsive Web , Branding / Design System & Logo

💖 Click to book a service here or book a 15 min call with me here 💖

❇️ Project Overview

✦ About the client: Spitex Plus24 gmbH

Spitex Plus24 gmbH is a home nursing provider that serves elderly citizens in Switzerland. They provide tailored care and support to their clients in the convenience of their homes.

About Client

I was assigned to revamp their website, which was outdated. I took charge of creating a comprehensive set of responsive web designs and also developed a scalable design system. Furthermore, I closely collaborated with a front-end engineer to ensure that the design was implemented seamlessly.

🚫 The Problem: Non-responsive and outdated design is impacting service bookings

After conducting a heuristic evaluation of Spitex's website, I gathered some key issues that majorly affected the usability of the website:

Key Usability & Accessibility issues on Spitex Plus 24 GmbH's site

Heuristic Analysis 01

Heuristic Analysis 02

Heuristic Analysis 03

❇️ The Solution: A platform that is accessible, user-friendly, easy to navigate, and responsive across all devices

Ensured its responsiveness on all devices, aiming to provide users with easy access to information and seamless navigation

Fixed the inconsistencies in the design elements and color contrast by implementing a scalable design system that follows the WCAG guidelines

Created an about us page to show social proof and boost credibility & a contact form to allow users to easily contact Spitex Plus24 gmbH without leaving their browser

Responsive Design Screens

About Us Page Responsive View

Before / After screens on how I fixed issues & inconsistencies in design elements

❇️ The Process: Defining our project goals & business constraints + user research summary

"How did we achieve the desired goal?" photo alongside our desktop view mockup

3 Main Project Goals

3 Business Constraints

The company lacked previous user research

1 round of Usability Study due to budget constraints

User Interviews unveiled user mental modals

Themes & Insights gathered from the usability study

User Pain Points based on the usability study

❇️ Main Changes after Hi-fi Usability Study

Design Improvement based on usability study- 2/3

Design Improvements based on usability study - 3/3

The hi-fi prototype turned out to be a result with 0 error rates

❇️ Extensible Design System

Spitex Design System

❇️ Project Mockups

Spitex Final Responsive Designs

❇️ Key Takeaways - What I learned

Keep iterating and listening to your users and you'll find the right answer

Strong teamwork = Successful product - Engaging and collaborating with the stakeholders and the front-end engineer helped shape the final product and highlighted the significance of effective communication and teamwork in delivering successful design solutions.

❇️ Next Steps: Recommendations for Future Features

Text Enlargement and Contrast Enhancement: Considering the diverse range of users and their varying visual capabilities, it would be beneficial to incorporate a feature that allows users to enlarge text and adjust contrast. This would ensure that the content remains easily readable for individuals with visual impairments or those who prefer larger text sizes, improving overall accessibility and inclusivity.