BUZZ responsive website — a UX case study
Tattoos. Travel. Worldwide. A meeting place for tattoo artists and studios that is part of an authentic global cultural movement founded on ideas of urban, d.i.y and contemporary culture.
The Brief
We were approached by Tatteo to re-think and re-design their existing digital platform that allows tattoo artists to search for new guestspots and job opportunities in tattoo studios all around the world. They already have a Facebook channel and Instagram account with over 7,000 followers yet the traffic and usage of the website remains low. They already have an existing identity and logo but they were happy for us to develop a new brand.
Intro
Tattoo culture has never been as popular and widespread as today. As many as 1/5 of all Americans have a tattoo on some part of their bodies. With this increase in tattoo popularity has come the rise of tattoo artists who can appeal to a global audience and offer a unique experience through their art form. Contemporary tattoo artists often find work through friends and word of mouth and have to use self promotional channels such as Instagram in order to find new clients. Tatteo is a digital platform that links up tattoo artists with studios and allows them to search for new jobs and guestspot opportunities all around the world. Guestspots are places that tattoo studios offer to travelling artists who are looking for short term opportunities. It allows tattoo artists to travel the world and experience different cultures whilst also working and pursuing their careers. Often tattoo artists can be extremely popular and are requested by fans. If a studio hosts a high profile artist, this can lead to a boost in their own popularity and profile.
The Team
UX: Naz Lakhoo, Omar Ali
UI: Jimmy Hay, Lucy Coker
Tools
Adobe Creative Suite, Sketch, Invision, Principle, Keynote, pencil, paper.
Starting Point
After our first meeting with Tatteo our primary task was to try and identify what key features were going to be essential for us to include in our MVP by the end of the 3 week sprint. From the meeting we discovered that there were 2 main purposes of the website. The first was the B-B path which was between the tattoo artists and tattoo studios. There was also a B-C path which was the tattoo artists/studios and their fans.
From here we decided to focus on the B-B path for our design process since we felt this was the most important aspect of the user experience. The B-C path would be something that we would explore in a 2nd or 3rd sprint.
UX:
Comparitive Analysis
The UX team carried out a comparative analysis that looked into the existing platforms that offer similar functionalities as Tatteo.
We discovered that there was one platform that offered guestspots to artists already but the content on this site was fairly old and it hadn’t been updated in a very long time and so user retention was very low.
User Research
The next stage for the UX team was going to visit some tattoo studios and speak to studio owners and tattoo artists. They had prepared a questionnaire beforehand so that they could collect the information.
From the research that we collected in Camden we found out the following information:
- Some owners have had their studios for over 20 years.
- Some artists have been resident at a studio for more than 10 years.
- Studios invite artists from all over the world.
- Artists like to travel to other studios to experience new cultures/languages.
- Studios usually find new artists by word of mouth.
- Visiting artists need to respect a studios existing culture and ways of working.
We also carried out user surveys via an already existing Facebook group that Tatteo had set up which had over 5000 members. The Facebook survey asked the same questions as the real life survey so that we were able to collate all these results into meaningful data. The main take aways from the surveys were that 60% of both studios and artists said they would like to see a website that offered guestspot functionality. That told us that the guestspot booking feature was pretty important. 70% of artists also said that they travel worldwide to work. This told us that making the website appeal to a global audience was imperative and that providing access to studios and artists all over the world would be a really strong pull for users. 77% of studios also said that they look through artists portfolios before booking them for guestspots. This confirmed that we had to include artists profiles through the website that provided enough information about the artists for the studios to be able to make informed decisions on wether they would like to book them or not.
Sitemap/Userflow
We created the sitemap after finishing our initial UX research. We decided that the main features of the website were being able to search for guestspots and allowing artists and studios to sign up and create their profiles. Because the time scale of our project was only 3 weeks, we had to focus on one particular area of the site so we chose the route outlined below in red. This would allow an artist to navigate to the homepage and go through the on boarding process to create an account with Tatteo. From here, they would be able to search for available guestspots, view these results and then choose a suitable studio and view their profile page. From here, the final stage would be the artist contacting the studio via a link on the studio profile page.
Mid-fi Prototypes
From the user journey we then moved onto creating our mid-fi prototypes. On the homepage we have a large hero image and a top navigation bar. This introduces the user to the site and captivates them. We then have an area for guestspot features and then some other international features to keep the vibe global.
When an artist searches for available guestspots, the results page will display a map so that the user can easily see where this particular studio is.
UI:
Brand Research/Moodboard
Whilst the UX team were carrying out their initial research, me and Lucy started to explore initial ideas around tattoo culture and brand research. We brainstormed ideas on an inception worksheet and explored moods and the potential visual language of the brand.
From the design inception worksheet we took away a few important nouns:
- URBAN
- FASHION
- NOMADIC
- D.I.Y CULTURE
- STREET ART
- TRAVEL
We felt that these nouns also aligned with the research that we were seeing from the UX team. We realised that in order to captivate the tattoo community, we would have to offer them something more than just a website that provided a service. We really needed to understand what made them tick and how we could engage them on a very personal level. We realised that we had to create a cultural platform where users wouldn’t just come to find guestspots. We needed to create a cultural brand that would invite and inform people to be part of this unique culture. Art, photography and fashion were all cultural aspects that we would include in the site so that people would want to engage on many levels. From this we were able to discover our ‘WHY’:
‘To create a cultural portal of the latest art, music and fashion where tattoo artists and studios can connect and engage.’
Our next step was to explore some existing brands that aligned with our why and our moods.
We looked into some streetwear brands, skate brands and youth culture in general. We felt like these brands had a certain authenticity to them that appealed to people who valued their individuality and creativity. Vivienne Westwood is a haute couture fashion house that sells unique, high end items. However, it wasn’t always the case. She started out taking a lot of influence from the punk movement in the 70’s and based a lot of her initial designs on the sub-cultures of the era. This can still be felt through the brand today and her clothes line still carries this punk heritage. Coal Drops Yard is another interesting brand that we looked into because they are trying to re-create the traditional shopping experience. They have tapped into youth culture and current design trends to create an authentic shopping experience that is new and different but connects with people in a fresh way. They have also weaved the brand into the history of the original victorian building and in doing so have created something very unique that feels considered and authentic.
From here we were able to create our moodboard. It draws a lot of imagery from urban culture and streetwear. It feels quite rough but also refined. The imagery has a D.I.Y feel yet remains relatable.
Visual Identity
From the moodboard we then moved onto creating our style tile. We took the urban streetwear vibe from our moodboard and moulded this into some UI elements and a graphic language that we could refer to when making the pages of the site.
Typography
The typeface that we chose was ‘Roboto’. We picked this particular font because it felt graphic and bold and stood out nicely when placed in boxes. It was also very readable at all sizes. We chose to have only 1 font throughout the site since the design was really bold and we didn’t want too many variations going on.
Colour
We chose to keep the colour scheme monochrome. We really wanted the artists and studio profiles to be centre stage and decided that if we started to introduce our own colour schemes then this could potentially interfere with the images that users might be using throughout the site. Black and white also looked really bold and gave the whole art direction a solid graphic feel.
The Brand
We decided to rename the brand from ‘Tatteo’ to ‘Buzz’. Lucy and I initially started brainstorming new names based around tattoos but we soon realised that all of these options felt too familiar and safe. We thought it would be better to find a short, catchy name that didn’t necessarily have direct connotations to tattooing, yet was easy to remember and would stick in peoples minds. We brainstormed all sorts of random ideas and accidentally stumbled on ‘Buzz’. We felt this name captures the essence of what we were creating and suited the authenticity of the brand. Buzz is also the sound of the tattoo machine, it’s also the feeling you have after you’ve had a tattoo. It also relates to the vibe we want to create around the site as a whole. We want people to come to the site to experience an authentic cultural experience and feel ‘buzzed’ from this. We felt this was quite a risky move but would ultimately make the brand a lot stronger if we could convince the client to go with it.
Textures
We wanted to bring some of the hand draw, D.I.Y feel of the moodboard into our art direction so we decided to experiment with some drawn textures. Lucy drew out many different shapes and lines and we ended up selecting a chosen few of these to compliment the graphic language of our design. We felt that this added another level to our direction that felt right alongside tattoo culture.
Grid
The grid we used was a 12 column grid with a 20px gutter. We chose this layout because we wanted to have the freedom to play with elements on the page and sometimes ‘break the grid’. We wanted to give the page a slightly unordered feel but also to still have a flow and to make graphical sense. A sort of ordered chaos if you will.
Layout
On the homepage we used a hero image to introduce users to the site. They are then able to scroll through the homepage and are introduced to different ‘features’. This is akin to a blog page but the content would all be varied and different in its subject matter. We created different UI elements so the content can be laid out differently between posts to keep the page looking fresh and vibrant.
When an artist searches for a guestspot, they are taken to their studio results page. We designed this page with the results in separate boxes with information and image next to each other and then a map on the right side of the page so the user could clearly and quickly see the location of their results. We also provided them with filtering buttons at the top of the page. This allows the user to quickly see the information that they require and to filter through and manage this information quickly and easily.
On the artists and studios profile pages we created an interesting way of displaying their image galleries. Instead of just being a normal grid layout of images, we decided to play with the grid a little bit and made it into a ‘pile of pictures’. This gave each page a more individual and unique feel.
Responsive
When it came to designing the mobile versions of Buzz, we didn’t have to do too much to the design. The main considerations were resizing fonts and stacking elements so that they would flow nicely down the page. For the gallery UI elements, we decided to go with a horizontal scroll mechanic so that the user would still be able to see each image nicely on the screen.
Hi-fi Prototypes
Conclusions
- There were some scoping issues at the beginning of the project that we had to iron out since the client wasn’t entirely sure which part we should focus on. However, we were able to get our scope clearly defined fairly early in the first week which allowed us to have a good direction to follow.
- There were some issues with the handover of the wireframes from the UX team to us. I think this had something to do with deadlines not being adhered to or taken seriously enough. One idea that I floated in the project retrospective was that there should be a mid-point mini presentation where both teams could present where they are at in the project and how that relates to the original timings. This way we would all be able to stock of the progress of each team and the best way to stick to the timings.
- Overall I feel like the project was a success and we achieved a fair amount in the 3 week time frame that was set. The client was really happy with our final art direction and the brand idea overall and has now been handed over to the developers who are in the final stages of getting the site live. It would be great to work with the client on a 2nd or 3rd sprint to develop the idea even further.
