Re-design the PAFF! website ensuring it is easy to use, appeals to a broad audience and has an original yet authoritative tone of voice, ensuring it is responsive.
I analysed both Italian and International museums/galleries with a focus on information distribution, clarity and how impactful the websites were.
The sites were analysed and compared to one another, allowing to highlight common patterns.
Analysing the existing site I highlighted key pain points (information architecture, user experience and the visual design) and also key next steps (understand the best information grouping, define page structure, work on TOV and create engaging displays).
To identify the way users group and understand information, I ran a card sort including categories present in the PAFF! website and other websites.
When analysing the results from the card sort, I compared it to the existing PAFF! distribution and was able to identify key categories and guidelines to follow and ensure navigation and information finding is as clear as possible for users.
5 participants were selected within the target group and interviewed, with the goal of comparing and benchmarking the PAFF! website to websites with a strong user experience.
The tasks tested were the ones most likely to convert into a museum visit in real life. Overall the PAFF! user experience and visual ranked the lowest compared to the other three museums.
I collected behavioural information on the users based on desk research and interviews. I initially created provisional personas which, merged with the research insights, led to a persona to represent a broader group of users.
Defining the target user was key to have a deep understanding of the audience and use as a north star when designing the website.
Based on research I defined a user story for the target persona, which is most likely to lead to conversions: “Federico Scacchi heard about the PAFF! museum and wants to visit. He wants to know what’s on and book a ticket.” I then developed the task flow and user flows, where all the key steps and decision nodes were highlighted.
Merging together the insights gained from the card sort, the interviews & benchmarking and based on the project goal and user flows, I fleshed out the skeleton of the website — the sitemap, to ensure the user would find what they needed in as little steps as possible.
I wanted to stay true to the comic book identity expressed by the client, maintaining their current logo.
Defining a style guide which looks clean and minimal, yet provide also a bold and playful touch, that is unique to PAFF! and uses the CMYK print and winks at comic books.
To add to more of the comic book touch to the website, I created a set of illustrations to represent key services and parts of the site.
On top of it being an aesthetic choice, the illustrations give rhythm to the pages and allow for more breathing space.
To me sketching is an essential step in the creation of wireframes and of high fidelity mock ups.
Exploring first the landing page and then other parts of the site, I alternated between paper and digital. The intent was to echo comic books without making it overpowering and set the tone of voice for the rest of the site.
I created responsive high fidelity screens for each page and prototyped the interactions for the desktop version of the website. This led to the final design, testing and getting insights from users.
Participants in usability testing were asked for feedback on the structure and aesthetic of the site initially and, when using the prototype, for gain/pain points linked to information architecture and user flow.
The insights were translated into action points, which I started iterating on.
In the next steps the website will be further tested with users and refined for mobile, tablet and desktop.
This will be iterated on to receive final client validation to move forward and, if so decided, to implement the design on the current platform used (WordPress) or to develop it in collaboration with an agency.
