The Art Alive Rebranding
Brief:
For my last group project in my Ironhack bootcamp, we were asked to recreate an e-commerce website for a small business. In that sense, we were fortunate to collaborate with a company called The Art Alive, and we proposed a rebranding especially centered on their website.
What Is The Art Alive?
Before describing our process in further detail, we should first establish what this company does and what they are all about. The Art Alive is a project run and created by Sara Santos, an Art History graduate, that put a spin on her academic background in an incredibly dynamic way. Essentially their motto is to bring art to life. They take static images, like paintings, sculptures, photographies, even tattoos and add movement to them. However they also offer other related services such as augmented reality and video mapping / video projection. Their main client base consists of the marketing and events divisions of museums, art galleries and auction houses. Occasionally they also work with artists directly.
The Problem:
Even though the they have a website, at the present moment The Art Alive’s most used platform is Instagram, and that’s also how the majority of their costumers find the page to begin with. However, since Instagram requires constant maintenance in order to keep engagement it is hard for them to keep on being relevant. Nevertheless the creator, Sara is also aware that certain clients recommend her project to other potential clients showcasing the website, rather than the social medias. As such The Art Alive’s hopes for this project was to end up with a website that simultaneously felt like a portfolio and a digital business card, all while capturing the essence of the company that is so unique.
Competitor Analysis:
We started our rebranding process by doing secondary research focusing on The Art Alive’s main competitors. Our stakeholder gave us some very insightful notes before starting. For example, she mentioned that only a handful of people do the same thing The Art Alive does, and since they are so few, they have a community of their own where they help each other grow. For example one competitor does only animations of Chinese porcelain, while another does only video projections.
One thing worth mention was that half of their competitors don’t have websites of their own, and publish their work exclusively on social media. We explored the websites of those that did have it. We noted their layouts, the way they prioritized the topics on their navigation bars, how the websites worked on mobile etc…
Adding to that we also pointed down the things that made The Art Alive different from the competition. There were some things we noticed from both our research and our interviews with the clients of The Art Alive. Firstly they have a very loyal costumer base. Sara always goes above and beyond her clients expectations, exeeding both on material delivered and always ahead of deadlines. This is one of they key factor that make the clients recurrent. Another thing that stands out with The Art Alive is the vast range of services when compared to the competition. As of now they offer 3 kinds of service: Art Animation, Video mapping and AR, while the competition aims to focus only on one of these.
This is not the end of The Art Alive’s stand out features. One thing they do is selling merchandise. Available on Redbubble and Society6, one can find The Art Alive’s most iconic works in t-shirts, posters, pillow cases, etc…
Since these services are all clear and distinguishable factors in The Art alive, we decided as a team to highlight them on the new website, we were about to create. As such, with our research completed, stakeholder and clients interviews also completed, and a competitor analysis we proceeded on to the design stage at last.
Inspiration and Design Process:
The very first thing we did for The Art Alive’s rebranding was mapping out the information already present on the existing website. After the map was concluded we suspected that the website wasn’t organized in an intuitive manner. We could see (according to the image bellow) that the content was mostly spread out only in two tabs of the navigation bar. We did several card sorting tests (closed, open and hybrid) which proved our theory, not a single tester organized the content in the same way the website had it.
Gathering the feedback from our testers we felt confident in creating a new structure for the website which we then tested in the same manner. We decided to keep the header with the most important tabs in likeness to the competition (Works/Gallery; Services; Bio/About; Shop and Contacts) we also created some subdivisions, but this time around, they are more evenly spaced out, rather than focused on just one or two tabs. In our second card sorting tests we gathered much more positive feedback so we moved forward with our design process.
Before moving forward with the actual designs, however, we decided to create a symbolic user persona in order to better empathize with The Art Alive’s client base. From this desire, Charlotte webster was born. She is a museum curator that wants to make her company stand out from the competition. She is in her mid 50’s and even though she keeps up to date with the major trends whenever she wants to showcase the Art Alive’s website she knows others might not entirely tech savvy. This detail stems from an insight we found during our research, the majority of the Art Alive’s client’s are curators, and auctioneers, and their marketing employees. They have a big tendency to be of an older age and not interested on complicated technology.
With this insight in mind we wanted to create the simplest user flow to work with when creating a website.
“Explore the works of the Art Alive, Find out what services they do and reach out to them”.
This was our main objective. We wanted the website to showcase the best highlights with minimal effort on behalf of the user.
As mentioned, we started our process by taking into consideration what we saw from the competitors and also the best parts of The Art Alive previous website. We decided to go with a adaptive design for the mobile version, and we created prototypes for both mobile and desktop, which we then tested on 5 people each.
In our test we received some very interest feedback which we aimed to apply in our mid fidelities. For example, originally we meant to create only a simple layout exploring the latest Instagram posts (as it is their main platform). This idea worked well on computer devices because of the navigation bar that guides the user without requiring much thought. We were soon pointed out that the same logic was working as we hoped for the mobile, as it required a bit more exploration to explore the website. One of the testers reminded us that the goal was to, ultimately, “not make the user think”.
As such, for our mid fidelities we added 3 small cards on the home page highlighting the services. Once we finished converting our low fidelities into mid fidelities we tested both designs once again on 5 new people. This subset of testers has a little less feedback to give, but still some precious insights. We were told that they wished to have a way to connect the services page with the contact page automatically. In our contact page we have a form that the users can fill out to ask questions directly to The Art Alive. With this feedback clicking on a service would lead directly to that page, with the subject text field already filled.
As it happened with our transition from low to mid, we noted down all the feedback given and implemented them later on, in the high fidelity. Before getting started on that design, however, we had to create a moodboard in order to help us establish colors and fonts. Our goal was to create a moodboard that reflected all of The Art Alive works and personality, while leaving us inspired enough to test out several fonts and colors.
Once we established colors and fonts we made the transition from mid to high fidelities. At this stage we reached out to our stake holder once again to ask them for the original images and videos, as well as to showcase out progress with the rebranding so far. Once we had the approval and the materials we finished our first layout of the high fidelities, which we in turn showcased in a design critique. In this critique we were pointed out that we might need to revise the color schemes due to the AA and AAA policies. Regardless of that, we received over all good praise, but our work was far from finished.
We tested several color combinations using a figma plug in called contrast, and despite struggling a bit to figure out what was causing the issue, we eventually discovered the root problem was our mobile footer. Upon review, we decided to scrap it all together as it was a secondary feature to begin with. (This footer consisted only of the social medias of The Art Alive, however you has easy access to the Instagram on the home page, and the remaining ones in our contacts page).
Once we were pleased enough with our high fidelities we took them for tests once again and this time we tried to apply most of the feedback provided directly on the high fidelities. This time around we were point out some logic flaws when it came to prototyping. F. e.: we planned to have plain cards showcasing only images, and once you clicked/hovered on them we would see the text for what they stood for and the image would become a video. As it happened on our low fidelity tests, already mentioned, this was a logic that worked a lot better on computer rather than phone. Firstly because you dont click on a phone, you press, and you press so quickly you dont have time to read. So we decided to change the order of our componente variants on Figma so that the Text appeared along with the static image and the video would only play while pressing.
We also reimagined the logo in order to give it a bigger flare on the hero page, and highlighted the text on the desktop version in order to make it clear that is was a clickable element (another feedback we got in our last round of tests). An additional insight that was applied in the desktop version was to move the home page from the footer to the navigation bar, in order to maintain the preset values people have regarding this button (they are much more used to see it up top, rather than in the footer).
All of this applied feedback across the stages led into this result you can play below on video.
Next Steps:
We already showcased our final product with our stakeholder who was extremely please with our work. In that case the immediate next steps would be to contact a developer and actually create the physical website for The Art Alive. But that is never the end of the job of a UXUI designer, as a digital project is a product that keeps on needing upgrade, and maintenance in order to keep up to date on current trends. It is also our job to keep on taking feedback from users and apply it when possible in order to make the userflow as smooth and intuitive as possible. In regards to immediate design chances, we were also given feedback to work a bit further on our shop page in order to make it clear that the works seen there are only available for purchase on the stores listed or make it so that they are sold in the website directly. This would imply also the creation of a shopping experience userflow, but it could certainly be done with more time and relevant feedbacks on the topic.