Art Attack Museum Website

Project Overview

This project was about designing a responsive website (for Desktop, Mobile and Tablet) for a public art museum to advertise exhibitions, provide museum information to patrons and enable them to schedule visits. The target users were visitors (either tourists or locals) that were interested in art. 

The project was completed under the Google UX Design course, so the information provided on the website is fictional.

It was completed after the Art Attack Museum app was designed (click here to view the case study for the app).

My Role

I was the UX Designer and Researcher leading the Art Attack Museum’s responsive website design (Desktop, Mobile, Tablet versions) from beginning to end. My responsibilities were conducting user research and interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, considering accessibility, testing, iterating on designs and refining them.

Problem

The problem was building a responsive interface that would be appealing to the users and relevant with the Art Museum's app that I had already designed. Also, the website had to be responsive and compatible with desktop, mobile and tablet devices.

Goal

Having the users’ needs in mind, the responsive website was built with an appealing interface, while efficiently providing information, easy navigation and task completion.

User Research and Empathizing

The User Research for the Art Attack Museum's website was mostly based on the conducted research for the Museum's app, but adaptations and adjustments were made along the way. Therefore, the research base was the same, but the design decisions were adjusted to fit the device behavior, context and constraints.

Pain Points

• Not a lot of free time: Interfaces should be straight-to-the-point. Users need an easy to use website, without spending a lot of time searching for the desired action.

• Lack of information: Users need to have a clear picture of the information the Museum is providing.

• Can’t process text information quickly: Considering accessibility is important, so features like voice search or using the right contrast are crucial for a better user experience.

Persona

The following Persona was also used for the Art Attack Museum app as the Research for its website had the same base.

User Journey Map

This User Journey Map based on the Persona I created named "Eva", is adjusted to reflect the design of a website.

Define Phase

Problem Statement

Eva is a 29 years old teacher and traveller who needs to have adequate and on-time information about the museums’ exhibitions, because otherwise she feels like she misses an opportunity.

Ideate Phase

Goal Statement

Our Art Museum website will let users have adequate and on-time information about exhibitions, which will affect users who don't want to miss opportunities to visit an exhibition they find interesting, by providing clear information about current and future art exhibitions and giving them the chance to subscribe to the Museum's Newsletter. We will measure effectiveness by analyzing the website's data on how many users will subscribe to the Newsletter.

User Flow

To ensure that the interface is intuitive and efficient, and to align design with business and user goals, the following User Flow was created.

Sitemap

While creating the Sitemap my goal was to organize the website's structure and information strategically, so that users can efficiently navigate. I tried to keep it simple and easy.

Paper Wireframes

At first, 4 different versions of the Desktop website’s Homepage were designed. The most appealing aspects were selected and then combined into a final version.

The final version of the Desktop website's Homepage

The next step was to design a Homepage for the mobile and the tablet websites alike. What followed was to sketch the rest of the screens of the responsive website.

The final versions of the Mobile website's Homepage and the Tablet website's Homepage

Digital Wireframes

The aim was to create an easy to navigate website, with a relatively simple and intuitive design that would be based on users’ needs. Incorporating multiple pathways to get to the same page was crucial for navigation.

Low-Fidelity Prototype

Here is the complete user flow of the desktop website, focusing on the navigation of the user and the complete connectivity of the pages.

Click here to view the Art Attack Museum's Desktop website's Low-Fidelity Prototype.

Click here to view the Art Attack Museum's Mobile website's Low-Fidelity Prototype.

Click here to view the Art Attack Museum's Tablet website's Low-Fidelity Prototype.

First Usability Study

The usability study that was conducted focused on the user flow and the difficulty users had while using the three versions of the website. 

Findings

• Users need accessible interfaces, designed with the right contrast for them to be able to read text easily.

• Users need to interact with clear and straightforward design that does not confuse them.

• Users need to be able to click on words and images in order to interact efficiently.

Mockups and High-Fidelity Prototype

Sticker Sheets

The color palette and the typography of the responsive websites matched those of the museum’s app that had been already created. The components and the visual elements were similar, refined to match the essence of the website.

Grid Style

The Grid Style that was used for the Desktop website was 12 columns with a 16px gutter and a 140px margin, for the Mobile website was 4 columns with a 16px gutter and 20px margin and for the Tablet website was 12 columns with a 32px gutter and 16px margin.

Mockups and High-Fidelity Prototype before refinements

Second Usability Study

The usability study which was conducted at this stage revealed that the contrast ratio had to be improved on certain parts of the design. Here is presented the refinement of the desktop website’s homepage: on the upper part, a rectangle with low opacity was added behind text, so that it can be read more easily and the layout and options were slightly changed.

Also, the “Unsubscribe here” option that would show up after subscribing to the Newsletter was removed, to avoid confusion. Such an action could be accomplished via the Newsletter email.

Final Design

Mockups

Accessibility Considerations

• Using the right contrast ratios was considered while designing the website, so that users can easily read text.

• Voice search was implemented on the design: a mic icon is visible on the search bar.

• Headings with different sized text for clear visual hierarchy were used.

Takeaways

Impact

During the usability studies I gained a lot of feedback from the participants that helped me improve the designs. Some positive feedback I received had to do with the usability, intuitiveness and the consistency of the design.

What I learned

Focusing on the real users’ needs is crucial for designing interfaces. Usability studies always reveal needs, such as new buttons, confusing hierarchy or navigation flaws. 

Future Steps

• Continue the usability studies and receive more feedback from potential users.

• Ideate on new features and make changes wherever necessary.