ROLE: UX Designer Freelancing TIMELINE: Aug 2021 - May 2022

In this page:

- Review old Information Architecture (IA)
- Define new IA
- Style guide and prototype
- Deliverable and iteration
- Logo Design Process

‍

1) Review the Original Website Information Architecture (IA)

- Understand and capture the state and information of the original website

- Categorise each bit of the content

- List all external links and documents

Screenshot of the original website highlighting content analysis and categorisation .

‍

2) Define the new IA reducing redundancy by clustering content by categories

This IA led the design of each page of the new website.

Clustered categories found from analysing the information content of the original website

‍

3) Define style guide and prototype the new website

Ths practice was already using "My Surgery Website" as their website provider and wished to keep it. I reviewed this provider components and recreated a unique design for the health centre. To achieve I created a prototype with all pages designed, including the content, to handover to the provider for the implementation. The colour scheme was selected from the brand colours.

Colour scheme used, colour contrast complaint with AAA WCAG 2.1

Information architecture and prototype of the new website.

Design followed the principles of design and had accessibility and heuristics into consideration to ensure a good usability. For example, use of breadcrumb to help user know where they are on the website (heuristics #1).

Some example pages:

Design of the new website page display the clinics available.

Design on the resources about family health.

‍

4) Handover and implementation review

All deliverables were prepared and sent for implementation, after which I reviewed the website to highlight inconsistencies with the designs. This allowed iteration for further improvement.

Screenshot of the implemented new website based on the designs with annotations to be discussed with developer for further iteration.

‍

Logo Design Process

As part of improving the user experience and elevate the branding consistency, I designed several iterations of logo design and worked with the colour palette which was the foundation of the website style guide.

The practice and surroundings served as inspiration to create a representative logo. The acronym of the practice was creatively transformed to integrate the concepts of health (the heart), support (two people holding hands), and healthcare (stethoscope).

The font Fredoka, was chosen for its curved lines which convey an inviting and friendly tone.