Medusa

Website Design and Case Study

UX/UI Design | 2020

01

About

This is a personal project created to improve and showcase both my UX and UI skills. A desktop and mobile website for an Italian theatre with a classical style of a cabaret.

02

Research

The research phase was done to try and define the target audience, as well as define both the problem and solution for the website user.

Interviews

I've conducted 13 interviews with people who frequently visit the local theatre, as well as a certain "classy" bar and lounge Bazza in order to see what their priorities and interests are and establish a user persona.

Problem

Responders indicate that they need an easy and convenient way to get the week's repertoire and a fast and simple way to reserve a seat for a certain play.

Solution

Minimalistic and modern design, with direct information and a familiar layout, while using a certain color scheme to keep the "classical" fell.

03

User personas

The interviews showed a few similarities in the focus group, which helped to create a very narrow user persona. Mostly women between 28 and 40 years old, with a distinctive lifestyle within fashion and art.

Tatjana, 29

Tatjana is a 29 year old interior designer, with a bachelor's degree in design. Her passion is art and her hobbies include reading and playing the piano. She loves fashion and spends every weekend watching a play in the theatre.

Andrea, 33

Andrea is a 33 year old fashion designer and influencer. She spends most of her free time preparing instagram content in her favourite bar Bazza and frequently visits the town theatre and library.

04

define and ideate

In this section I've created an information architecture depicting the way Tatjana and Andrea are informed about the Medusa teacher and a certain play that they wish to watch

Tatjana and Andrea's user flow

05

wireframes

Low fidelity wireframes

High fidelity wireframes

06

Colors and typography

The main color used is a certain shade of red, that's very reminiscent of old cabarets depicted in classical and medieval times, as well as being the signature color of theatres.

The typography on the other hand is "Montserrat" font, which is a modern sans serif type, easy to read. Put together with the classical theme, it gives a good contrast on the website.

Typography

Colors

Montserrat Regular

Aa

Montserrat Bold

Aa

#E65454

#FFFFFF

#343434

Final Design

Desktop and mobile version

07

Final changes

Since around 100% of the interviewees indicated that they prefer to use mobile browsers instead of desktop, the final desktop prototype moved the "RESERVATION" button from the hero page in order to put more emphasis on the image and white space.