"Salud responde", Andalusian public health app redesign. A case study.

Silvia Giraldo
5 min readMar 3, 2021

--

"Salud responde" is an app available to citizens from the region of Andalucía, Spain. This app is aimed at users who wish to have easy access to request and modify primary medical appointments in the Andalusian Health Service, and to access the contents of health interest available in Salud Responde.

Note: This is a personal project, which I am doing to improve my UX/UI skills.

Project overview:

After being a user of this app for years and encountering the poor user experience they offer, I decided to identify these pain points experienced by me and provide an appropriate solution based on my research.

Current reviews and some screens from the App

Pain Points:

We can clearly notice that the current look and feel of the app can be redesigned and improved with a new User Interface and a better User Experience. If you are from Spain, you will agree that most of any sites from any Government body are outdated and feel like a non ending maze. The app itself has plenty of problems and countless bad reviews in both App and Play store. Anyhow, here are the following reasons that support my decision to redesign this interface.

  1. There's a lack of visual hierarchy.
  2. The User Experience can be highly improved.
  3. There's a lot of inconsistency with the design elements, icons, typography, colors and the content is not structured and definitely very cluttered.

Goal:

  1. Improve the overall user interface.
  2. Provide a better experience.
  3. Add better interactions.
  4. Help improve their reputation and reviews, and decongest the call system giving priority to people that don't have access to smartphones like elderly people.

User flow:

Based on their current information architecture, and my research, it was clear that the platform needed a fast and effective way for users to manage their appointments and access their information.

User Flow — process of booking an appointment

There are three main levels:

  1. Entry point: new users will be prompted to add their information, i.e: ID or Social Security Card number. Ongoing users will access their profile.
  2. Decision making: in this stage, users need to choose from the options available and choose from one to go to the next level.
  3. Exit point: User will review their performed action, i.e: appointment booked, add to calendar. Leave app

Wireframes:

I started prototyping on my iPad different screens and trying out different options to declutter as much as possible and move on to Figma.

Example of one of my quick wireframe sketches on procreate

Low fi prototypes on Figma

After some iterations, I developed these wireframes on Figma.

Basic Wireframes on Figma

Design System

After having some basic wireframes in place, it was time to move onto the Design System in order to start designing High Fi prototypes. I will be using blue to convey a sense of trust, and as it's often used in health, it was a clear option for me, a variation of the green tone that they already use, and orange to highlight certain key areas. I used Roboto because is the default font for Android and Chrome OS, and is the font of choice in Google’s Material Design system. This font is simple and highly readable, for web and mobile uses. And I set it with the perfect-fourth modular type scale.

Design System Sample

Final prototype

With wireframes, a simple and clear design system, in which I also added forms, alerts, icons and spacing, it was time to move onto the final prototype. I would like to show you the before an after of a section that definitely needs to be there. Users are begging on the app/play stores a feature to be able to choose a time slot and a more convenient time for call appointments because right now, they set automatically and people often wait all day to receive the call.

High fidelity prototypes: done on Figma

Interactive prototype

The whole process would have felt incomplete without some interaction. It has been perfect timing to test out interactive components with variants on Figma. So far so good. If you haven't tried the beta version, I suggest you do ;)

Interactive prototype example

What can be improved?

There is definitely room for improvement and this is merely an example of the possibilities that these apps have in terms of redesign. I could have also ran some usability tests, as well as created a more cohesive brand identity for Salud Responde as well as more micro interactions.

Things that I have learned:

Doing this has given me a deeper understanding of the complexity of these apps. There is a lot of information from millions of people, features that are useful and also that can be implemented, but due to the lack of resources from the current public health system, sadly it can't happen. I have also learned the importance of design in government platforms and how much they are in need for a better user experience overall, in both online and offline sites. And we need to create platforms that are more accessible for people that are less digital literate.

I would like to thank you for taking the time to read my very first post on Medium. I am looking forward to hearing your feedback. Also, if you'd like, you can reach me out on LinkedIn, via email, or check out my portfolio site for more projects. Stay safe!!

--

--

Silvia Giraldo

I'm a designer passionate about UX/UI design, accessibility and technology.