Case study: Reinventing local medical service website regarding new international challenges.
Details
Challenge: Help a local business enter the international market by designing a new user experience and making rebranding
Deliverables: Research and brand materials, hi-fidelity interactive prototype
Design Sprint: 9 days
Team: Marie-Anne, Alaa and me
Client: Soc Med Medical Center.
This project was a compilation of design thinking, market analysis, branding and stakeholder interaction. Along this journey, I’ll share with you our key learnings from this challenge. Hope some of them will help you to deal with similar projects in future.
Discover
Stakeholder Interview
We’ve conducted the interview with the co-founder of the clinic, who is responsible for current website development and technical support. During the stakeholder interview we found out:
1. It’s a family-owned business with more than 100 clients per day in 20–60 age range and about 40 permanent employees. Recently they’ve opened an onsite pharmacy and thinking of starting additional services like a dentist cabinet, massage, beauty centre, etc.
2. They consider their website to be outdated with too much badly structured content and navigation, which they think may distract potential clients.
3. All appointments are made via phone that users find on the website. Clients receive analysis results by mail, but it’s done manually by call centre employees. Both these functions seem to be rather crucial disadvantages compared to the company’s competitors.
Competitive analysis
To better understand the marketplace and our client’s business we chose 3 competitive companies (one from the current market and 2 from potential ones) and conducted feature and branding comparison analysis. It helped us to identify opportunities and threats and also helped to focus on improving upon what already exists (as reinventing the wheel wasn’t our target 😉).
We’ve found out that our client’s current website doesn’t include some of the crucial features that the majority of other clinics have, such as:
- user profile page with appointments history and analysis results;
- feature to schedule/reschedule and cancel your appointments online.
The value proposition of all analysed brands is built around offering convenient healthcare options. And their brand personalities also have much in common: they want to be seen as trustworthy, based on long-standing experience and certifications.
To validate those findings we proceed to user research.
User Research
We’ve conducted 5 interviews with people who have a different experiences with medical services and their digital products. That helped us to find out the following:
1. Users prefer to make appointments online: it saves their time and some systems allow them to receive immediate invitations to their calendars, so they don’t need to make notes or remember it.
2. They also like to receive a reminder the day before the appointment, preferably via sms, or even better messengers, and definitely not by phone calls.
3. They enjoy further automatisation such as receiving analysis results to their e-mail.
4. They also find it hard to decide which particular doctor to choose, browsing on the medical website, and they would also like to see some reviews on doctors’ services as well as doctors’ profile page on clinics’ websites.
User Journey Mapping
In order to better identify problem areas and opportunities to increase retention and attract new users we’ve broke down the experience of using medical services.
We’ve started with the persona, whose experience we were planning to map. Below you can find important characteristics of the persona for medical clinic website.
Sasha is a successful guy with a busy professional and personal life. He prefers to organise all his appointments online, using websites or even mobile apps.
He noticed that years go by and it’s time to start taking care of his health, so his goal is to schedule health check-ups on a regular basis.
But currently, he is frustrated with his experience of calling doctors’ office/medical centres for an appointment and waiting 3–5 min for receptionist’s answer, as he has a really busy meeting schedule at work.
As you can see on the UJM above, we’ve defined 3 pain points on the way of our persona and come up with possible How Might We statements, so we could later formulate our final problem statement:
Busy professionals need to find a way to easily access medical services because they need to take care of their health regularly.
Informational Architecture
As far as we’ve been redesigning the user experience of already existing website, we’ve proceeded with analysing its’ informational architecture and coming up with Sitemap, showing the relationships between pages. Here our main focus was on enabling clear navigation, especially with catalog page, which currently was bad structured and not user-friendly at all. And also on making separate pages for appointment booking and user profile.
Later on, we’ve designed a user flow to show how our user will complete his main task of making an appointment online. It helped us to make sure that this path would be pretty clear and that users could easily accomplish what they want.
Coming to the solution
Using the MoSCoW method to prioritise possible features we’ve come up with our MVP:
Our new Social Medical website aims to help clients to have a clear overview of provided medical services so they could regularly take care of their health. Since there are often difficulties with making doctors’ appointments, our website offers online appointment scheduling.
Our complementary features are designed to support the clients by easily getting reminders about their appointments and also have access to all analysis result history on user profile pages.
We’ve implemented this MVP idea in sketch and performed concept testing. The most interesting insight that we’ve received was about telephone number in the header: as far as users frequently come to medical websites due to some urgent reasons, it’s really useful to have contacts right in the header, so it won’t take them long to find how to reach doctor’s office. We applied the received feedback in mid-fidelity wireframes and the main changes were:
- add an address block to the main page, so it would be more obvious for users at the beginning of their journey on the website whether the medical centre location is suitable.
- change the wording for the appointment arrangement process as it’s divided into 3 pages and it’s easy to get lost.
We’ve also performed usability testing with the mid-fidelity wireframes and found out that is crucial to add a price tag at the “appointment confirmation” and “booking successful” pages so it would be clearer to users what they are applying for. But overall our testers liked the flow and found it quite intuitive to navigate.
Branding
To proceed with the final prototype we’ve come to the branding stage, where we’ve tried to translate our findings into a professional and pleasurable visual communication.
To be aware of current trends in this space on the one hand, and set our product apart from the competition, on the other hand, we’ve examined the visual identities of the competitors.
They (1) apply different shades of green as their main colour, (2) use quite a lot of icons to identify different website sections and (3) include images of doctors to show who stands behind their services.
To come up with our own visual concept, we’ve started with defining our core brand attributes:
-Family business,
-Health care,
-Service oriented.
With these brand attributes in mind, we’ve created the following moodboard.
We’ve decided to pick Quicksand font as it is rather formal, and at the same time modern and clean. It creates an approachable and soft feeling, that is well applied to medical services business.
In our colour palette we’ve decided to spice the traditional blue medical colour with 2 rather bright accent colours (Portland Orange and Thick
Yellow) as far as we have a good amount of whitespace on our wireframes.
All these elements, including buttons, toggles and etc. helped us to communicate the essence of our visual brand, that is about healthcare in family owned and service oriented business, that you could see on the stile tile below.
We also come up with 2 versions of new logo for our client’s brand.
We’ve implemented all these on our mid-fidelity wireframes and taking into account all the feedback we have from testing we’ve made our final prototype.
Final solution
New version of the website allows users to make an appointment online, navigate through catalog of clinic’s services, and also reschedule or cancel the upcoming appointment and view the results of previous ones on their user profile page.
Taking into account how busy our User Persona was, we’ve also tested how the information will be displayed on different screen sizes. To check this we’ve selected the page with the most complicated layout — the homepage and made designs for tablet and mobile.
But the final prototype wasn’t the last step for us. We’ve also conducted desirability testing using Microsoft reaction cards and found out that users see our website as clean, clear and useful. That we assume is quite a good result for a medical services website.
What’s next?
As the next step, we are going to present all the project’s research and brand material and also the final prototype to our client looking forward to his feedback. Hope he will apply this concept to his real website and this will help the business to attract new clients and prosper in new markets.
I would also like to share some personal key learnings from this project. It was my first experience with moodboard and style tiles creation, so initially, we take it quite straightforward and at the testing session first version of the moodboard failed to meet the original brand attributes. Following the advice of our classmate, we’ve changed our approach and come up with fewer images, that described attributes more preciously, but at the same time were not necessarily connected to our business sphere. That helped a lot to convey our concept so now I know how to deal with such kinds of tasks.
A big thanks to my team and those who took part in several rounds of user interviews! And thank you for your time reading this case study! Please feel free to share your comments and suggestions.
