Website redesign

 The personal Objectives 

• facilitate a better user experience for ESTARE   by improving its UI.

• encourage users to book appointments through the website

• take full responsibility for the various roles involved in designing a product, such as a User Researcher, User Experience Designer, User Interface Designer.

The client

ESTARE Psychological Support Institute is an established therapy, counselling, coaching, and wellbeing services provider that offers a range of support options to individuals and businesses, including development workshops and training. ESTARE Psychological Support Institute is an established therapy, counselling, coaching, and wellbeing services provider that offers a range of support options to individuals and businesses, including development workshops and training.

The task

• redesign the ESTARE website to incorporate rebranding  and enhance its overall user experience,

• make sure that the redesigned website is in line with the brand’s identity and guidelines,

• rebuilding the information architecture and user flow and make it more interesting 

The team

Klaudia - UX/UI designer, accountable for the project.

Piotr - web developer.

Approach

The process was divided into steps.

1. Preparation    

    Schedule | Existing website evaluation

2. Discover    

    Problem Statement  |  UX Competitive Analysis |  User Stories

3. User research    

    Surveys |  Affinity Mapping |  User Persona |  User Journey Map |  Users Flows  

4. Ideate    

    Sitemap |  Low-fidelity Prototype |  Mid-fidelity Prototype |  Interactive High-fidelity Prototype |  Usability Evaluation

5. Usability testing    

    Goal |  Test objective |  Methodology | Findings |  Conclusions |  Preference Test A/B

6. Visual design    

    Colour palette | Typography | Copy structure | Imagery | UI elements | Design for Accessibility

7. Finalisation    

    Development | Testing | Future improvement

Preparation

01

Existing website evaluation

The process started with identifying key problems with the existing website and carrying out a UX audit to understand the pain points and areas of improvement in the live experience of the site. Short meetings were held to gather opinions from the client and potential users. Those insights were useful for the initial brainstorming sessions and expanded in the discovery phase.

Schedule

To increase efficiency, accountability, and clarity, a draft time plan was created and presented to the team members and the client. This helped organise the workflow, determine resources needed, and gave everyone a clear understanding of the process, keeping us on track. Meetings were planned to be held after each phase of the design, however, to follow an agile project management framework, multiple discussions regarding the process and/or design decisions also took place. This enabled us to gather more in-depth suggestions and inputs on the ideas as well as iterate and test them faster. It was necessary to adapt the plan after unforeseen circumstances arose. 

Discover

02

User stories

User stories capture the feelings, needs, and expectations of potential users toward diverse features. The next step was to decide the mood and expectations for the website.

UX competitive analysis

Two potential competitors were chosen to build their SWOT profile and conduct a UX analysis of their products. The goal was to identify what type of problems users face with competitors’ products, and to understand what the users might expect from ESTAREs website.

Problem Statement

The current website does not meet the user's expectations and does not represent the new branding.

User flows

Data collected from  User Journey Maps provided useful insight into users' motivations. Having an idea of what actions users could take, the most important tasks were selected and User Flows were created.

User research

03

User personas

User personas were created based on the patterns derived from this data-driven research. As the goal was to design something useful, desirable, and valuable, user needs had to be placed at the centre of the design. Creating ‘Ola’ and ‘Max’ allowed the team to see the potential customers and visualise their needs, which encouraged a customer- centric mindset that motivated us even further to create real solutions that impact actual people.

User journey map

User Journey Maps, based on the goals of the personas, were created to better understand users' perspectives and the design challenges ESTARE’s website visitors would face. It was a great way to empathise with the audience and get a clearer idea about how the users expect things to work. 

Affinity map

After collecting the information, an Affinity Map was created. The map helped to identify valuable insights into what potential customers’ seek when looking for a mental health support service online. Collecting feedback from ESTARE’s potential clients helped me understand their needs and goals, and further refine the problem statement.

Surveys

An online survey was conducted to understand further users' motivation and behaviour. The respondents were between 30 and 55 years old, which is the age range of the current ESTARE’s customer base. Out of the 34 respondents, 21 identified as female, 28 had children, 24 fell within the ‘desirable income’ criteria (4000 zl), 12 were familiar with the Estare website, 17 admitted to having seeked out a mental health support service(s) at least once within the past 5 years, and 6 claimed that they attend therapy currently.

The survey asked respondents questions about their preferences and habits. The survey turned out to be a tremendous information -gathering tool. It helped to gauge an in-depth insight into users' attitudes and concerns. Based on the results, I could focus on specific parts of the design to meet users' expectations.

Ideate

04

Prototyping

Taking the blueprint further, a high-fidelity prototype was created using Adobe XD. Prototyping made it possible to test ideas and design solutions at an early stage, before investing too many resources into building a final website.

Wireframing

To represent the user flow, simple hand-drawn screens were developed in Adobe Illustrator to make a mid-fidelity prototype. It was a great way to determine the functionality of the interface, prioritising content and placement of the elements rather than focusing on design details.

Sitemap

The next step was to visualise the site structure to make smart decisions about layout and page hierarchy. Showing how individual pages are related to each other helps create an interface that is intuitive, predictable, and usable.

Usability testing

05

Preference test A/B

To find out which of the design solutions suggested for the ‘Offer’ segment would be most suitable for the user, a Preference Test was completed. There were 23 participants, including those who took part in the survey and usability tests. The difference between the designs was not only the layout but also the way users interact with the content.

Conclusion

Through interviews, it was discovered that the subjects found the ‘Offer’ segment texts too academic, saying they could not concentrate on the text for an extended period of time. It also took much space, especially on the mobile version. Therefore, different design solutions had to be made.

Participants looked at other subpages (especially "Psychologia dla Ciebie" and "Zespół"). Page 'O nas' generated the lowest interest. Respondents found it irrelevant to their needs, too worldly, and repetitive. It also did not have an impact on building their trust. This input must be taken on board, and changes must be made. The other factors to be considered are formulating the vision and mission and making it easily accessible.

Findings

A total of 6 usability tests were conducted. All participants agreed that the new website is clear and easy to use. Working with the Adobe XD prototype was challenging for 2 of the testers. Tasks were completed by 3 users with ease. 2 of the participants had seen the previous website, and both independently mentioned CTA’s. The main troubles experienced by the participants were collected.

'Pain points' have to be fixed at this stage of the developing process. Fixing the issues labeled 'Errors' requires a significant investment of time and effort and could slightly raise user satisfaction.

Test objective

Observe how users navigate and how easily they complete the tasks:

• identify how long it takes to complete specified tasks,

• observe if users can understand how the website works,

• find out how satisfied participants are with the site,

• determine if the existing features and structure help users achieve their goals with ease,

• identify any usability problems.

Methodology

Remote (via Google Meets) moderated usability tests were conducted. The test consisted of a brief introduction and tasks to be performed on the ESTARE website. 6 participants took part in the usability test. They were observed and asked to think aloud.

Goal

Observe and measure how users interact with the website through task completion. Identify changes required to improve user performance and satisfaction and make plans for future functionality.

Visual design 

06

UI elements

Designing for accessibility

Main Navigation Tab In the first version, the menu text went lighter after hovering over. Highlighting text with different colours will help older users and users with visual impairment to better identify which tab they are about to enter.

Imagery

Photos

The photography used on ESTARE's website should be high quality, subtle with colours, and depicture calming images. To ensure that the page would not be overwhelmed with distracting colours, filters were applied to the team members' photographs.

Graphic elements

Any illustrations used should be simple, and follow a line art style. 

Copy structure

Jesteśmy dla Ciebie (We are here for you)

The corresponding text block was positioned at the top of the home page to ensure that as many visitors as possible would know about ESTARE’s vision and mission. Through a horizontal distribution, the three goals can be viewed more quickly and are perceived as a group.

By adding sections with clear titles and matching illustrations, the goals attract more attention and are easier to understand.

Dlaczego warto skorzystać z profesjonalnego wsparcia psychologicznego? (Why is it worth using professional psychological support?)

Instead of being part of a lengthy text, the reasons for using a professional psychological service are presented in the form of three simple steps to achieving mental balance.

This solution will make more people try to read the content, and the result will be signing up for therapy.

Typography

In order to keep the website structured and professional, the number of font families used was limited to two.

Aiming for a clear information hierarchy, the following solutions were chosen:

• Contrast and colour

Georgia typeface was selected for headings. Its bold appearance stands out against the regular weighted, slighly saturated Helvetica Neueve selected for the body.

• Scale

Headings are more prominent in size than body copy, attracting users' attention.

• Grouping

The content was divided into sections by giving each part a significant amount of space around it. Grouping allows to direct users' attention to the emphasised section.

Color palette

The ESTARE branding book was provided by an external  graphic designer. It was crucial to incorporate its colour scheme into the new website with the aim of creating consistency within the brand. Smoothing and eye-appealing colours instantly formed a bond with the visitors, and it was essential to cultivate an emotional connection with the user. The chosen web palette is clear, subtle and elegant, giving a sense of serenity, interest and optimism.  

Finalisation

07

Future improvements

At the moment, the ‘Kontakt’ page and the ‘Umów Wizytę’ button are similar but an ‘appointment page’ should be added shortly. Design for accessibility could be improved, especially for users with disabilities.

Testing

Testing the website was vital as a means to identify any errors occurring on the actual website. A list of issues was sent to the developer. 

Development

The updated version of the design was sent to the web developer and, due to time restrictions, budget, and technical issues, it was necessary to make additional changes.

SHORTCUT

SOCIAL MEDIA

LEGAL INFORMATION

CONTACT

KIK Design