swift serenity

During my internship with a full-service creative advertising agency, I designed websites for a couple of a client’s side projects and collaborations. This design is for a series of visualisation tracks.

This website was created for one of a client’s side projects, which is a series of visualisation tracks that are designed to help listeners develop their skills with various sports. The client composes the music, and his friend does the spoken word.

As an older client with a passion for music, his priorities were to simply have online spaces that allow him to share his music with others. When I was assigned this task, I hadn’t met the client or heard directly what he was looking for. The only insight I had was through one of the visualisation tracks that was designed to help people be the best ten pin bowlers they can be. This project was both challenging and a lot of fun, as it was ambiguous and I had a lot of creative control.

#InternAtAFullServiceCreativeAdvertisingAgency

The process began by jotting down some initial ideas, such as words that came to mind when I thought about the concept, and then I did some research with the goal of establishing how other similar companies were approaching their web design.

It was established that the majority of visualisation/hypnotherapy websites used a blue colour scheme, so the decision was made to go against the grain.

Secondly, I worked on predicting who the client’s target audience would be. This was a difficult part of the process, as I only had one visualisation track to base my assumptions on. Although, it was incredibly helpful as it helped to guide the abundance of ideas, thus giving them something to latch onto.

Drawing from my university studies, the next rational step was to make a moodboard, so I collected a variety of images that I felt captured the essence of the product and its audience.

Using Adobe Color, I created colour palettes by referencing the colours used in some of the images featured above.

At this point, time was spent doing additional research and gathering inspiration. The goal of this part of the process was to find specific elements that could add meaning to the visual design of the website. For example, I searched for symbolism, textures and various icons that could help inform the design’s direction.

I brainstormed some names for the sub-brand, as the team was uncertain if the client wanted to keep the original name he had provided. By doing up some designs with multiple options, I hoped one would catch his eye. I experimented with different fonts that seemed to capture what the website would be about. After obtaining other opinions, the favourite was selected (as seen in the rectangle).

After designing a basic layout for the website’s homepage, it hadn’t yet effectively captured the essence of the subject matter, so I returned to look for more inspiration. Intrigued by the soft flowing nature of hypnotherapy and visualisation tracks, I decided to experiment with some audio waveforms. The purple ones are screenshots of the client’s hypnotherapy track.

The below images show the changes made between the first and second iterations, after having obtained feedback from my colleagues and exploring audio waveforms.

At this stage, I felt as though the design was on a much better track! So, I began considering the other pages of the website. Not knowing what the client was after, I established the below information architecture to organise my thoughts and decipher what the next step could be.

At this point, I continued to develop each of the pages. The soft curve was changed to a more angular shape to suit the subject matter (perfecting skills). Additional small changes were made throughout the process. The client was pleased with the results.

The video below shows how the website functions in terms of interactivity and the drop down navigation design. The website was designed using Adobe XD and the below prototype was created by using the software’s interactive prototyping features.

If you would like to interact with the prototype and see how it works for yourself, feel free to click the below button.

The most difficult issue I encountered when developing this project was with regards to dealing with the brief’s ambiguity. As it was the first substantial task I was assigned whilst doing my internship, I really wanted to do it well. However, it is difficult to do something well when you’re not sure what the goal is. This was an important lesson for me, as at university, having a criteria sheet can be comforting for someone who wants to achieve a high grade, although that isn’t how it works in the industry.

This project gave me confidence to make decisions and simply work towards making progress, rather than trying to produce something that’s perfect. I used the situation as an opportunity to practice iterative design thinking and processes. I observed the information that had been given to me, I exercised critical thinking, and I made informed decisions that propelled me through the process. As I focused on producing things, I was able to ask colleagues for their opinions and guidance so I could improve.

As I couldn’t ask the client or the creative director lots of questions like I would have liked to do to soothe my detail-oriented mind, I instead embraced the newness of having an open brief and began to understand the questions existed for me to answer as I believed they should.

Secondly, whilst working on this project, I was afforded freedom of autonomy which exercised my employment skill of self-management. Aligning with my value of integrity, these working situations allowed me to function more flexibly and thus, productively.

This project introduced me to Adobe XD, and I’m ever so grateful for that! I think it’s a great program; very versatile and intuitive. Having worked with Sketch during my university studies, it was a blessing finding out about XD. It’s a fantastic, simple way to showcase interactive prototypes. Since this project has finished up, I hope to continue making little things using this software.

If you’re interested in seeing the other website in this series, the below button can take you there.