UX Design
Mediosteo is a medical website concerning alternative therapies. It offers articles and advertises various natural treatments.
Role
UX/UI Designer
Goal
Creating a space where my client could share her knowledge and communicate what services she has to offer in an intuitive way.
Approach
A good design starts with conversations, therefore I started the process with an interview with the founder. We determined brand values, users’ needs and business objectives.
Brand Values
Holistic, Natural and Professional approach
Trust
Experience
Users Need to...
- Understand what Mediosteo does
- Easily access medical articles they are looking for
- Know if the company is credible
- See company’s offer
- Be able to see if the services are suitable for them
- Be instructed about booking process
- Be informed about prices
- Know where the service is delivered
- Know how to contact Mediosteo
Business Objectives
- Increasing conversion on the website
- Build trust to Mediosteo brand
- Extend the time of stay on the site
Audience
- Women, 30-50 years old
- Living in Warsaw
- Searching for alternative ways of treatment
Solution
In order to address the above needs:
- I designed a simple website with an easily accessible blog module, thanks to which clients can easily reach medical articles. Medical articles will also help to build credibility and trust.
- In order to be perceived as professional, experienced, and credible, I used references to client’s TV appearances and social media accounts.
- To make Mediosteo associated with natural therapies, I chose the colors and motifs associated with nature.
- To make the website functional and readable, I used easy to identify headers and short blocks of text so the website is easy to scan.
- To address the business objectives I made sure that there is a visible call-to-action button and smooth user flow between therapy descriptions, pricing and booking instruction.
Result
- After implementing above features, the client noticed a 20% increase in clients paying for her services.
- Clients comment that they decided to choose Mediosteo because it seems reliable and trustworthy.
- According to clients smooth and intuitive user flow make the website comfortable to use.
Tools
WordPress
Balsamiq
Sitemap
The design of sitemap is based on users’ needs. You need to know company’s offer? There is a tab in the menu for that. You want to check prices? There is a sub-page for that too.
Wireframes
In this section I explain the decisions I made during the designing process:
- It was important to me to make it very easy for the user to navigate throughout the website. It’s not enough to just provide functionality, it’s essential to provide them exactly when users need them. I wanted to make it easy to get from the pricing page to contact page or to a page with descriptions of each treatment.
- There are two main categories of services that my client performs: diagnosing and therapy. I made sure to visibly distinguish that on the website so the users don’t get confused.
- To reinforce company’s credibility there are social media icons at the top of the home page
- Two most popular intentions of visiting the mediosteo website is accessing the blog or booking an appointment. Therefore, I placed two buttons straight at the front page to make it as easy as possible to find them.
- Just underneath there is an “about me” sections. Its goal is to introduce the owner and build connection and sense trust between her and users.
- Then, there is a short summary of the treatment that Mediosteo has to offer so users can quickly scan if there is anything they could be interested in. If a user wants to dive in the topic more, there is “read more” button for each section.
- Below there are snippets of TV appearances. Their goal is to show knowledge and experience of the therapist.
- The address and phone number should be super easy to find, that’s why not only are contact details on “Contact” page but also in the footer.
User testing
User testing stage was very insightful. I interviewed 5 people – they were asked to perform actions on the high fidelity design of the website – 2 of the users on the desktop version, 3 of them on the mobile version. I asked them to evaluate each task and overall experience of using the website.
- It was especially helpful with the mobile version of the website. It drew my attention to buttons location – they should be easily accessible for user’s thumb. I also decided to use more descriptive labels.
- In the first design I used more than one font. 2 users reported that the use of italics is unnecessary and it doesn’t correspond with the medical character of the website.
- In the Services tab (“Usługi”) I listed all techniques that my client performs with a short description. Users reported that if they want to know more about each method they don’t know how to get the information. Therefore, I placed dedicated buttons underneath the short description.
The button is small and might be difficult to reach on mobiles.
The use of italics is unnecessary.
Adding “read more” buttons underneath short descriptions.
Final Deliverables
Mediosteo brand is supposed to be associated with natural therapies but also professionalism and experience. Therefore, I chose colors and motifs associated with nature. At the same time I aimed to choose modern and medically-connected shades.
For typography I chose the “Muli” font – it’s beautiful and simple and it speaks for the professional look of the website.
Colors
Typography
Muli
