UI:

Brand Research/Moodboard

Whilst the 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.

Design inception worksheet

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 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.

Brand exploration

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 . 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.

Moodboard

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.

Style tile

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 ‘’. 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 ‘’. We felt this name captures the essence of what we were creating and suited the authenticity of the brand. 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.

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.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here