Description
Designing an adaptive website for visiting the museum of minimalism online.
— Selection and registration for an online tour;
— view the tour on the website;
— payment for excursions.
View of Pure Pigment installation, Venet Foundation, 2018
Yves Klein
Task
Red, yellow, blue — Ellsworth Kelly
The user must sign up for an online tour to view it on the website or any other device. After buying a ticket, a unique link to the online tour will be generated, with which the user can visit it.
What should be available to the user:
— Registration for an online excursion without registration and SMS;
— viewing the excursion from a computer or device;
— interaction with the guide and visitors.
Research
Search and analysis took most of the project implementation time. With some of the museums and artists who were included in the research, you can see below.
Museums
We have a huge number of museums in the art world, but among them there are those that almost every art lover knows. I highlighted 13 and did a detailed analysis of their UX
Artists
After analyzing minimalism, it was decided to take the main representatives of this direction. Paying tribute to the figures who have become classics.
User Flow
The most simple and understandable user flow with a minimalistic variability of the ways of user expirience.
Main Page
Events
Artist Page
Reserve Event
Payments
Stream
Account / Login
Settings
Streams
Tickets
History
Exhibitions
New Artists
Collections
Store
Wireframing
The default 12 column grid is used for desktop solutions. For smaller screens, specifically for the tablet version, it was decided to take 9 columns of the same size, which made it possible to use identical sizes of cards and interaction windows.
GRID SYSTEM • DESKTOP
≥1200 PX
GRID SYSTEM • TABLET
≥992 PX
GRID SYSTEM • MOBILE
<576 PX
UI kit
Below is some of the UI-kit, colors and typography.
UI KIT
COLOURS
HEX #1F19C2
R31 G25 B194
Yves Klein
White
R255 G255 B255
HEX #FFFFFF
Malevich
R0 G0 B0
HEX #000000
Dark Grey
R48 G48 B48
HEX #303030
Light Grey
R136 G136 B136
HEX #888888
Gainsborough
R176 G196 B222
HEX #b0c4de
Smoky White
R245 G245 B245
HEX #f5f5f5
Garnet
R243 G71 B35
HEX #f34723
Emerald
R80 G200 B120
HEX #50c878
UI KIT
TYPOGRAPHY
Solution
Minimalism in the solution was an important necessity. Reducing action has become a top priority. On the main screen, it was necessary to fit all the artists and reject other decisions, so in my concept there was a choice of any date and time.
SOLUTION
HOMEPAGE
All available excursions are displayed on the main screen. There are 2 types of cards. X1 and X2. When the screen is reduced, they are rebuilt from 4 columns to 3. And all the cards are in one page on mobile phones.
Tablet
Desktop
Mobile
DESKTOP
HOMEPAGE
The card contains all the necessary information: the author's name and surname, time and number of rooms.
SOLUTION
ARTIST PAGE
The page with the event has a slider and detailed information about the author and the halls. The slider has a single window with interaction.
Tablet
Mobile
Desktop
DESKTOP
ARTIST PAGE
The user sees the author's name with the option to navigate back to the main selection. In the interaction window, you can select the nearest date, visitors and start time of the event.
DESKTOP
ARTISTS ' PAGES
As an example, I took the main representatives of minimalism and designed their pages on the website of the minimalism museum.
DESKTOP & TABLET • DETAILS
INTERACTION WINDOW
the interaction window has 6 states. From choosing the time, setting up the event, payment and form — to the screen with the start button of the event (with a timer before the start)
The start screen contains a selection of the date, visitors and the start time of the event.
User gets to the screen with the event settings, where you can select the exhibition period.
After clicking the reserve. The user gets to the first payment screen with a choice of methods.
The second payment screen is the completion of the payment, depending on the previous selection.
After payment, the user gets to the screen with a form for entering mail or phone number.
The interaction window becomes the entry point to the event and has a timer + recommend events.
SOLUTION
MAIL DESIGN
The letter contains the details of the event and call to action button with a timer. The email is very similar to the interaction window
DESKTOP
CARD VARIABLE
The cards on the main screen have 3 states. And serve as the input point of the stream.
Below are the states of the event cards with a description of their states.
00
00
:
:
00
start
The event card before the purchase of the visit.
A card after the purchase, with a timer before the event starts.
The card after the purchase, with the start button.
DESKTOP & MOBILE
EVENT TRANSLATION
It is a pity that the stream was not the main task, because this direction has great potential and it can become a good project in the future. At the moment, the raw version with a chat