Mused — Case study of UI design project
Written in June 2021 for my BA in Web and Mobile Design at Haute École Albert Jacquard. Have a preview of my final result.
This case study has been written while creating the project, week by week. If you wish to read a recap of my process, I invite you to go to my portfolio.
Week 1 — How to discover the story behind the artwork
As the final project for my Bachelor's in computer graphics (web design), I have to create a website that reflects our capacity as UX designers and front-end developers. This evaluation is the conclusion of all our training. It is individual and I have 3 months from this day to develop a convincing idea. As teachers become coaches, I am free in my choices, without restrictions. However, the deliverable will be presented to a jury of experts and has to offer a complete experience.
For my choice of topic, I had in mind to merge storytelling about Greek mythology with art history. Both are subject matters that I particularly enjoy looking into and I thought why not use topics that I know will not irritate me after a few months of analyzing it. The only question was how to transform that concept into a usable and functional website.
After consideration, I decided to create a website that allies storytelling and functionality. I noticed that visiting a museum must be done on multiple trips, otherwise, you lose interest in the artwork due to the abundance, you become exhausted or you take a very long time to explore each item. The solution that I offer is a tour that guides you through the museum in order to concentrate on one particular subject at a time for each visit.
I acknowledge the fact that I will not be able to cover the whole history of Greek mythology and I don’t want to. I believe if I choose to go through only one subject and maximize its research, it will be more effective. I also know that I want to focus on one particular museum for my project and that is the Royal Museums of Fine Arts of Belgium and more particularly the Oldmasters Museum. By all means, this project has the possibility to expand into multiple tours, diverse subjects, and even different museums in the future.
Initially, I wanted to concentrate a major part of my project on storytelling, so I decided that my website would be open to non-visitors like students who are doing research or people from other countries. The first section of my website will be the story of Greek heroes, which is useful to know before you choose a tour and visit the museum. During the visit, comes the history of each artwork related to it and a description of its artist. It will be the second section. It will be different from an audio guide since they always recount the art history of the main and most famous pieces and what I want to offer is a thematic visit.
For all art lovers, I offer a thematic tour of artworks from the Royal Museum of Fine Arts (Oldmasters Museum) on the topic of the heroes of greek mythology in order to be able to focus on one particular subject at a time for each visit.
What’s next? I realize that I have to gather all the content as soon as possible so that I can focus on developing my website. The priority for the following weeks is to have a finished text and to define the main tasks of the project.
Week 2 — The Content
During these last few weeks, I worked on the direction of my project. I thought that my website would have lots of storytelling but it changed considerably. By rewriting the pitch phrase over and over so the public could understand my project better, I realized I had to prioritize some sections of my website. Today, I am going to explain all the modifications I brought along.
I had several meetings with my teachers about the way I presented my project. It allows me to understand better what to bring forward and what the project is really about so afterward I can present it easier to the jury. First, here is the previous version of the pitch phrase.
For all art lovers, I offer a thematic tour of artworks from the Royal Museum of Fine Arts (Oldmasters Museum) on the topic of the heroes of greek mythology in order to be able to focus on one particular subject at a time for each visit.
After some consideration, I realized I wanted my website to be adaptable for many different museums and different kinds of topics. For June, yes, I will make only one tour available (greek mythology in the Royal Museum of Fine Arts) but it could have been anything else. Therefore, I decided to remove these terms from my pitch and concentrate on the notion of “preparation” and “help”. Here’s my second draft.
I am creating a website that helps the visitors to prepare before going to a museum and during their visits. On the website, I offer some tours according to specific themes in order to put in context the artwork when you go on site. The user can choose a topic so he will have a more targeted experience.
I agree it’s very long and I repeat myself. At this point, I became aware that I could not create the part “before the visit” and “during the visit”. It will be too vast and I will not have the time to create the tour and present all the artwork. So, I am going to focus on the part where I offer different kinds of tours for different kinds of museums. After some brainstorming, here’s my latest draft so far. I guess it’s still going to change along the way but I am satisfied with this version for now.
I offer a website that allows people to organize their future visit in a museum through a tour around a specific theme in order to target their discovery of art.
I created a survey to find out the needs of my users. I already had a pretty good understanding of what my website would look like, and how to navigate it, but I didn’t know how some elements are more important than others. First, this survey allows me to get feedback on my pitch phrase and then evaluate the functionalities that I have in mind. I also gave the chance to fill a lot of sentences, for example, by associations of words, so I don’t influence the user’s answers.
For now, I am still waiting for answers. I have around 50 responses but I think I will have a better vision if I have more than 100 replies. This should be done in a couple of days.
Just after my first presentation in front of my teacher, I knew I had to get my content pretty soon. At the time, I still thought I had to write all the explanatory text of each artwork of the themed tour. So I dove into work. The day after, I went to the museum and collected as much information as possible. I mapped all the artwork in the museum (how many on each wall) so my users can find them when they visit it. I also took note of all the paintings and sculptures that involve Greek and Roman mythology. Back home, I chose a topic within the themed tour because I knew I could not talk about everything. I selected 16 artworks (as a reference, the same amount as the audioguide) about the divinity of nature.
The fact that there will be different sections within a theme adds another level of functionality to my website. For example, there might be several tours for the theme “Greek mythology”, but also there might be multiple tours for other themes and other museums. That was the moment when I chose not to do the part on my website about the guided visit and all the explanations of each artwork. I will focus on the offer of themed tours.
As I said before, I had a good perception of what the navigation of my website would be but I needed to recreate all of it on paper. Once I got it, I thought it would be better to present it to you with Figma. Here’s the basic layout of my website.
The main page will be the center of all things. From there, you will be able to: one, choose among random tours, two, select a specific museum and you will be redirected to settle on the tours available for this place, or three, pick a theme, for example, “Christianity” and will be offered all the tours available for this topic.
At the moment, for the landing page, I decided to only choose a few themes and only Fine Arts museums in Belgium, but the project can expand and have filters, search bars, and an infinite amount of tours. I don’t know if I will have the time to create all the pages for all the tours so I will focus on Nature’s divinity tour as planned and will specify that the other tours are not available at the moment.
Regarding the page for the tour itself, I included a small introduction of what it is about, some images, the map of the tour, and some information about the museum. I added a ranking that will be useful for the “most popular” section. I also created a “save” button so the user can add it to a “saved list”.
Mobile version for when you “start the tour”
Even if I know I don’t have the time to put it together, I still like the possibility of having a guided visit within the website so I created a button to “start the tour” so people can understand the potential of my project. However, I am going to stop my development after the QR Code page as if my users don’t have a ticket to access it.
For the copyright, I know it will be a challenge to have access to the paintings. For a school project, I think it is doable but I have to get into the skin of a real-life situation. My solution will be to re-create the artwork by illustration, portraying all the major features. It will allow me to support my graphic design.
I think my project is clearer now and I can move forward more confidently. On the schedule for next week, I plan to create an MVP (minimum viable product) because there is a deadline in two weeks. I will focus on all the content and images I need and a little bit on my graphic approach. I believe I have done the most complex part of my project which is finding the direction to take, and setting everything in motion. From now on, I will move faster and faster.
Week 3— The Wireframes
After one month and a half of cooking up my project, I finally got to show some wireframes of how my website would look in the end. I transformed the basic mock-up I made last week into real visuals. I mainly focused on the navigation and the different layouts of the pages so we could picture a real-life situation.
I knew that at the end of these two weeks, I had to show my project to my class. The goal was to present a wireframe and some content so they understand intuitively where I’m headed. That gave me a massive boost to move forward. I really wanted to have constructive feedback and therefore, I had to offer something interesting.
I started by transforming the mock-up into wireframes with real images and real text. I think it’s better to visualize and put in context the user. I also cleaned up some elements in the wireframe that were not clear. For example, I know that I want to adapt my website to multiple museums and different cities. However, on my landing page, I need to bring forward the main subject of my project, which is the tours and not the location. It has to be secondary. I think this is still a thing I need to work on.
Basically, I think it hasn’t changed much from the mock-up but it works pretty well. I am also satisfied with the feedback I got which was that it’s comprehensive even for someone who doesn’t speak English. I was suggested to add to the tour page a description of each key aspect of the tour. I also thought about doing a highlight of the tour (example in the image below). These are all good ideas that I will look into.
Because I had to present my project in front of my class, I thought it was time I chose a name for the project. It’s still temporary but the title I chose is “Museup”. I thought it sounded cheerful and hopeful. I had many other options that still are good choices. The next step will be to confirm the name and then create the logo around it.
Apart from the fact that my project will be adapted to multiple locations, there also will be a WebApp for the website. This section of the project is going to be used during the visit to a museum to experience a guided tour. However, you have seen on my wireframes that this has not been created yet. That’s because I don’t intend to have it on my final website (the one that I will give to my teacher for my exams). Nevertheless, I still want to create the wireframe to show how it will be linked to the main website and to see my graphic approach on both platforms. So it’s still in development.
I have created good navigation with my wireframe. I think my project is slowly clearing up. I had optimistic and positive feedback from my classmates and teacher so I think I’m on a good track. The next step will be to adapt all of it to different devices and then to make user tests. Adapted touches will be made after analyzing everything. I will not yet focus on the UI.
Week 4 — The User Interface and Graphic Design
For the last 4 weeks, I got the time to find a graphic identity for my project. My end-of-year assignment is now called Mused and ready to be transformed into code. All the UX design and UI designs have been done.
My first move to find an identity was to transform my wireframe with the right tones. I knew I wanted a dark-themed website with an accent color. With that addition, it was easier to visualize the direction I would follow.
My inspiration was something elegant and luxurious but which is still soothing and soft. I made a Pinterest board of all the mock-ups or layouts that reminded me of that.
The first choice I made was to pick a typeface. I directly fell in love with the NewYork typeface. Unfortunately, there was only one style for it. It meant that I would be more restricted. I tried to find an alternative but it was never the same. So I choose to stick with it. For more emphasis, I will use the accent color to have a differentiation.
For the colors, I was inspired by an image. I used the sample color tool and made my own palette. I decided to have a dark green background with some type of white for the text and yellow for the main attraction points (title, button hover,…). Then, I chose to incorporate an undertone of red for small details like the footer and the images.
From that, I created my own mood board. Some dark green which draws toward blue, some transparency, some noise on the images, and of course a reminder of paintings with painted illustrations.
With all these elements, I started(began?) to transform my landing page into what it would look like in the end. It was some tries and errors but I think I found something I am satisfied with. From there, I could arrange a design system for the hierarchy ratio of the font, the icons, and the buttons and links.
After I found good ground for the desktop format, I adapted my landing page wireframe to a tablet and mobile format. It was not hard to adapt the hierarchy ratio from there.
At this point, it is not complicated to apply my graphic identity to all my pages so I move straight to coding my website. However, there might be some changes to my wireframe that the actual website might bring up to light. Firstly, I think about the NewYork typeface. I had some echo saying that this typeface might be too thin. It works well with big titles but for example, a <h2> title might be too short. We will see. Secondly, the hierarchy ratio for mobile, I don’t think it matches. I might have to make it smaller.
At the moment, I have my navigation, and I have the graphic identity, now, I must jump on coding. I have all the cards in my hands and I am at home straight.
Week 5 — Coding the Final Project
After I planned all the designs for the last few weeks, everything was set. It was time to start coding. I could see the light at the end of the tunnel for this project. I knew exactly how I wanted my website to look like. When I am writing you this report, I have not finished all the pages but I believe I am on a good roll. Let me describe to you my progress so far.
My first initiative as I started coding was to create a structure in my work to stay as organized as possible and to know every step of the way what my next move would be.
First, I used Webpack to be able to serve files while developing. It is much more convenient for me to work this way. When that was established, I started coding. Not much to tell here. I begin with mobile first as I was always advised to do. Right now, my website is not responsive because I prefer to focus on details that take me more time and reflection.
I chose to code in SASS for the first time instead of CSS. I always knew it was more pleasant to work with due to variables, importation of stylesheets, etc. It was a risk for me because I never used it before, but I learned on the job, and actually, it was not that complicated once I got the hang of it. Indeed, it is very nice to work that way and I like that everything is grouped and tidy.
With all that in place, I created all the files I would need for my different pages and started developing my website.
I chose to start coding the common part of my website that will end up on all the pages: the fixed header and the footer. Then, I focused on the sliders which were a big part of the presentation of the tours. I ended up using a library to help me because JavaScript is not my strong suit. I used Flickety which is really easy to use.
After 2 weeks of coding, on and off, the landing page is almost finished. There are still some details to work on like the typeface that bothers me but overall I think I am progressing at a good pace. However be advised, that it is not responsive yet so please display it on mobile or with the inspector.
I finally adapted my other wireframes with my graphic identity. I followed the guidelines that I had established in my design system and just like that it was done. Here is my final result completely coded.
