Project

Together2

Project overview

Together2 is a non-profit organisation that creates personalised solutions for people with disabilities, older people and the community. The client needed a website that translated the new brand and visual identity. The project required an analysis of their style guide and site map.

Project type

Website

Role

UI designer

Deliverables

Information architecture, wireframe, prototype, developers hand-off.

Palette

When I accessed the style guide, I realised that the palette was very colourful. They had 8 bright primary colours and, speaking to the client, they didn't want that one colour stood out more than the others. They wanted that all colours had the same visual strength.

Accessibility

The style guide showed that a white font should be applied to the colours of the palette. However, I knew that some of them would have the readability compromised. So, I tested the contrast of each colour to see if they would have to be adjusted regarding font size and colour. Then, I sent the recommendations to the client.

Together2 Colours accessibility

Wireframes

After talking with the client about the information architecture, I could design the wireframe and then have some iterations with the client.

Together 2 wireframes.

Prototype

The prototype was built high-fidelity, showing the main features to the client and the developers. The responsive versions of the website were also developed.

Challenges

The number of colours and squares made it hard to make a composition that didn't look confusing and overwhelming. I had to add a neutral colour (#F0F4F7) to have some areas of rest.

Also, there were some coding challenges, such as the client required that each page have a different logo colour on the navbar. However, the developers and I discussed every detail to achieve the best outcome.

Together2 main screens.

Homepage

Aged care services

About

Activities

Mobile

Together2 mobile screens.

Thank you for watching

Credits

Agency: Design Fox
Creative director: Martin Liu
Lead designer: Thatiana Ferreira
Photos: Together2 and Unsplash

See more of UI/UX/Web work