Nel Amaro
This website was created in honor to of the artist Nel Amaro. It was part of a strategic plan promoted by the Department of Culture of the regional government from Asturias in order to publicize his artistic legacy between new generations.
Problem
According to recent studies, it seems that, nowadays, very few young people are interested in art. This is bad news because through art, young people can develop many positive skills and capabilities that could help them a lot in their lives.
Goal
Trying to get young people to pay more attention to art and to begin to know the legacy of some of the most prolific artists ever. In this case the goal is focused on publicizing the artistic legacy of Nel Amaro.
Role
UX Designer. I participated in this project from start to finish, therefore I did research, defined user personas, wrote texts, created wireframes and designed all the interfaces of the website.
Target Devices
Desktop, tablet and mobile.
Time
Around two months.
Tools
Figma, Adobe Photoshop, Adobe Illustrator, Flaticon, UsabilityHub, Unsplash, Freepik, Maketintsandshades, Google meet, Contrast-ratio, GoogleForms, icons8, Ami.responsivedesign, Gtmetrix.
User Research
One important maxim standard in UX is using Data-driven design for finding the appropriate direction that your design decisions should take. Therefore, before you start to define the visual identity of any product, you need to put yourself in the user’s shoes. Through empathy you will better understand the features that your product must have in order to align with the users’ needs. This time I did research based on a combination of primary research (surveys and interviews) and secondary research (prior studies which I found on the internet).
Surveys
I think that surveys are an excellent method to start collecting information about the user target. In this case, as the main goal of the project is try to publicize the works of Nel Amaro between new generations, I chose people ages 18 to 30 and asked them ten questions in order to discover the reasons why they are not into art. I used “Google Forms” to do this and next you can see the results of the survey.
Internet Research
One of the key challenges that I faced during the research process was understanding the new ways that young people use in order to learn new things. I discovered that one hundred percent of them use the internet, especially, through smartphones. This article by Barbara Yuste explains it in more detail.
Interviews
To get deep insights at first hand, I selected five people to interview. The interviews were held online because at that time the anti-COVID measures advised against face to face meetings.
Research Findings
One of the main conclusions that I arrived at was the need to expand the knowledge about Nel Amaro beyond a local scope. As the internet is all over the world and English is the language most used on it, I decided to build a bilingual website in Spanish and English. In this way it would be easier to reach more people. Another important goal of my strategy was to develop a marketing campaign for the website on social media such as Tiktok, Instagram and Twitter. I did that because the principal users of the website are young people and they consume social media content all the time.
User Personas
From the research outcomes I created two user personas that represent the different user types that might use this website.
User Persona 1
Place Statement
Ángela is a girl who is open to learn new things in order to grow professionally.
User Persona 2
Place Statement
Juan Carlos is a curious boy who would like to have more time to be able to attend more cultural events.
Preparing the Design
The results of my research provided me some important findings. For me, maybe one of the most important was the fact of discovering that the majority of young people use their smartphones to look for all information. That’s why I put a special emphasis on designing the mobile version.
Looking for Inspiration
From the beginning of the project I tried to get some design ideas through inspirational sites such as Behance, Dribbble and Pinterest. Through this moodboard I wanted to define my favorite visual options for this project.
Wireframing
Recently, it was said by a famous poet, whose name I forget, that wireframing is an activity for lonely hearts. Maybe that poet is right. I don’t know. Leaving that aside, I like creating wireframes because thanks to them I can visualize the structure of the website much more clearly.
Paper Wireframes
Mobile Version
Tablet Version
Desktop Version
Digital Wireframes
Mobile Version
Tablet Version
Desktop Version
UI Design
Now it is time to present my first visual solutions through mockups. In this way the stakeholders will be able to get a specific idea about the purpose of my design.
Mockups
The following illustrates how the product will look on the different devices that people normally use to surf the internet.
Content Writing
Through the different texts that you can find on the website, I have tried to transmit the passion that Nel Amaro applied in his works to a general audience without familiarity with the art.
Mobile Version
Tablet Version
Desktop Version
Design System
When I was a kid my mother always told me about the importance of being organized. At that time my capacity to understand all of the things she told me was limited, therefore, I was not able to make the most of her advice. Now, I am an adult and, sometimes, when I look back, I can connect the dots and realize that many things she said to me made total sense. Having a good and consistent design system helps you to think and build digital products with a modular approach that allows you to create a perfect collaborative environment with the other members of the team.
Grid System
In order to achieve a visual hierarchy easy to scale across all the devices, I used a Grid System based on the 8pt grid. As the majority of popular screen sizes are divisible by 8, this grid is the best option to use because it allows you to maintain a cohesive space between all the elements.
Atomic Design
Although I had heard about Atomic Design, it would not be until this project when I was able to understand it in more detail. Through this modern methodology, made up of different elements, you can create scalable systems and reusable components as well as design systems. Atomic Design is a great way to establish a common language between designers and developers.
Usability Test
After testing the prototype with some volunteers that I gathered through social networks, and correcting the aspects that had to be improved, the next stage was to check if the website met some of the usual requirements that a product like this needs in order to provide a good experience for the users.
Responsive Design
There are many tools on the market to evaluate if a website can be visually correct on any device. On this occasion I used an on-line tool called, Am I Responsive?
Website Speed
The loading speed of your site is a crucial parameter for search engine ranking. Besides, you must not forget that the faster your website loads, the better experience the user will have. I used an online tool called PageSpeed Insights to test the load times of the website. As you can see below I got an excellent result.
Implementation Phase
Finally, after completing all the steps of the UX process, it is time to launch the website on the internet. Althouh it has been a hard journey, I think it has been worth it.
Takeaways
Impact
I do not know the exact moment that ordinary people started to feel disconnected from art. Maybe everything began when the French artist, Marcel Duchamp, exposed his work “The Fountain” in public or when the Cubism appeared for the first time. I am aware that connecting art with ordinary people is not easy work, but I think that through new technologies we can try to reach people in different ways and show them modern art from a new perspective. Young people need to return to experience art by themselves, to know the meaning behind artworks and learn what motivates a person to become an artist. It is obvious that this website will not change that overnight, but at least I hope to make my own small contribution to the cause.
What I learned
Working on this project provided me the opportunity to improve my knowledge in UX design and to discover new ways to approach the research phase. I also learned a lot about the importance of aspects such as mobile responsiveness and website speed in order to improve the general experience for the users.
Thanks for Scrolling!!
