ROLE: UX designer, Web designer, Webflow developer
CLIENT: Josh Wink
DURATION: October 2021 - December 2021
About:
For 25 years, DJ and electronic artist Josh Wink has been at the forefront of American electronic music, specifically the House and Techno scene. He is a Philadelphia born and raised DJ, and runs the seminal Ovum Recordings. He is legendary within the Acid House music community and American rave culture, and is best known for his hit song, Higher State of Consciousness.
Design challenge:
What is the goal for this project?
Josh Wink needed a new website that was both modern and responsive and I was hired to refresh the website for 2022.
WHAT IS THE PROBLEM MY DESIGN ADDRESSED?
His prior website was outdated and lacked clear calls to actions. Through a UX lens, I created a fresh redesign and then built the new website with Webflow. The project consisted of researching, designing, and prototyping to properly create his site.
In short, I researched both the previous website and DJ competitors, and identified what a Josh Wink fan wanted to see on a website. Understanding the pain points allowed me to properly focus on the correct information architecture and website functionality, ultimately creating a brand new tour dates section, and hero section with updated photography.
Research goals:
As someone who spent 10 years as an electronic music DJ, specializing in House and Techno music, I understood the aesthetic of an electronic artist. Additionally I made an effort to reach out to former colleagues and listen to their ideas of what would be ideal on a “DJ website”. Through this information I was able to identify pain-points, and see where we could improve upon them.
When looking at Josh’s older website, I immediately noticed there were no clear call-to-actions. It also didn’t have much content. In terms of what we could keep, there were only a few important pieces such as the logo and some pictures.
Finally, after doing a competitive audit on three contemporary House and Techno DJs I decided it was crucial to highlight three things: social media, touring, and a booking button.
Question areas:
When reaching out to DJ colleagues/fans, I asked them 3 questions to better understand the users I’m designing for and their needs. Doing so provided a deeper understanding of context for the design-thinking on Josh Wink’s new website. By empathizing with his community, there would be a clearer understanding of what problems needed to be solved. Having answers to the below questions also allowed me to focus on key interactions that would delight the end user based on qualitative data:
User persona:
After analyzing the user responses, I identified his fans as typically over the age of 30, with interests in underground house and techno music, and a respect for the genre of Acid House. Research also revealed that a section on label history would be ideal.
I created one user persona to best represent this collection of responses: Paul, a 37 year old software engineer who enjoys Techno and Acid House. He likes to go out and dance to his favorite DJ’s such as Josh Wink, Carl Cox, and Special Request.
Competitive audit:
I wanted to find out what specific artists were doing on their websites. I enjoyed the simplicity of both the Matthias Tanzmann and Nicole Moudaber websites. But there were still areas we could improve upon for Josh's website.
.png)
.png)
Full competitive audit report:
AUDIT GOAL
Find out what direct & indirect competition are doing correctly, and what we can improve regarding website functionality, UI and UX.
Who are your key competitors?
Nicole Moudaber, Matthias Tanzmann, and Carl Cox. These DJs are in a sense direct competitors to Josh, as they offer similar music and play for similar audiences. However as international DJs by nature travel the globe for work, there aren’t direct competitors in the traditional sense. I still felt it was important to include a competitive audit into the overall project research.
How do competitors position themselves in the market?
Nicole Moudaber seems to be the go to for a newer, and more “big room” style of Techno. Whereas Matthias Tanzmann is more big room Tech House based. I think they’re both positioning themselves in the market as the experts in their respective field.
How do competitors talk about themselves?
When you go to their sites, social media icons are prominent. One can also get a feel for the techno visuals, ie black and white colors, which is very electronic music trendy. The Tanzmann website also displays simple calls to actions throughout the website such as “stream my music.”
Competitors’ strengths?
1. When you go to their sites, social media icons are prominent. One can also get a feel for the techno visuals, ie black and white colors, which is very electronic music trendy. The Tanzmann website also displays simple calls to actions throughout the website such as “stream my music.” The footer is also a key component of the experience as there is comprehensive booking information and emails listed.
2. Menu icon for Desktop instead of full navbar. Typically speaking one would save the “hamburger menu” for the tablet and mobile versions but it seemed to add a sense of “minimalism” and “techno” on Desktop, and I thought it worked well on the competitors’ sites.
Competitors’ weaknesses?
1. Tour dates location: when you go to their sites, there isn’t a clear “tour dates” section or widget that shows the user where the DJ is playing. In a way you have to click on an additional button to find out.
2. On the Nicole Moudaber site, as cool as the “hero video loop” is, there isn’t much more content after that. Therefore, I wanted to make Josh Wink’s a bit more content-heavy. For example, adding a page dedicated to the history of his Ovum Recordings record label.
Opportunities:
There are a couple of things to improve upon what the 3 competitors were doing:
Information architecture:
A UX designer’s core job is to develop a positive relationship with the user and help them accomplish the tasks. By focusing on a simple and effective layout, with clean information architecture, which solves the problem identified earlier, Josh Wink’s new website will be functional and visually pleasing. With the user research in hand, I created a structure that served as a roadmap for the low fidelity stage.
Paper wireframes:
It is important to come up with many ideas for website design solutions. Taking the time to draft iterations were critical to cementing the proper feel of his new website.
Paper wireframes are the best way to achieve rapid iterations as they’re inexpensive and encourage honest client feedback.
Digital wireframes:
As the initial design phase continued, I ensured only the most functional elements that dealt with user pain points made it to the digital wireframes- this was based on our research and client feedback.
On the hero I prioritized the social icons, and per Josh’s request, added a hamburger menu for the rest of his website sections. By making the hero section a large and extreme cropped image of Josh Wink, it added visual weight to his new website.
In the end, we actually made two buttons for the “About” section: Watch Me DJ and Stream Music.
Palette and typeface:
After the wireframes were complete, I sat down with the client and listened to their feedback to implement any changes before the design stage. I then took this feedback and created the overall user interface of the website including: hero section, about section, tour dates section, and footer.
Color and type choices were meant to feel like Techno music: Black and white, and hints of yellow and a light brown-grey were added for Josh Wink. For the two typefaces I chose “Radwave” and “Inter” as they’re both a clean sans-serif ; “Radwave” for its boldness and “Inter” because it is professional but has a futuristic vibe. Since Josh Wink is known for his Acid House music with tracks such as “Higher State of Consciousness”, I took the eye dropper tool and sampled a specific yellow from the famous “Acid smiley face.”
Prototypes:
Working inside Adobe XD, I provided Josh Wink with a prototype link to showcase the basic functionality of his high fidelity design. I updated the About section buttons at this stage as well. I made sure to have the official Josh Wink Spotify as the link attached to the “Stream Music” button. This was key as Spotify is still the best way for artists to stream their music and reach larger audiences. I also made sure the user flow made sense and that anyone would be able to easily navigate his new website.
View the Josh Wink high fidelity prototype
Key mockups:
Responsive design:
Once the client signed off on the mockups, I went to build the website on Webflow. As a Webflow developer, I love the ability to offer end-to-end solutions for clients. I then made joshwink.com responsive across all devices:
Accessibility considerations:
As someone who is color blind, and has accessibility issues with certain color shades, I know the importance of focusing on website accessibility. I made sure to add all Alt-text to images and follow the Webflow contrast checker and guidelines, to make sure everything was easily readable.
Impact:
HOW DID I IMPROVE THE USERS EXPERIENCE WITH THE NEW DESIGN?
The older website maintained an outdated look and feel, as well as being ambiguous on what the user was actually supposed to be doing. We fixed both the UI and UX on his new website:
KPI:
For Josh Wink, the two performance indicators we established were measuring if booking requests/contact emails would go up, and making sure the website remained #1 for an organic Google search of “Josh Wink.”
What I learned:
As a freelancer I need to make sure the client is happy. By focusing on a simple and effective layout which solved the problem identified earlier, Josh Wink’s new website became functionally and visually pleasing.
Furthermore, by reducing pain points and ambiguous site navigation, and creating a responsive website, the client was more than satisfied with the end result.
What I would do differently:
Since the client was very satisfied with the result, I likely wouldn't change much on the project goals/execution.
However, in terms of project management and deadlines, I didn’t really stick to a set schedule nor communicate to the client my need to stay on track. The schedule would’ve held myself and the client accountable in case as we fell off the schedule a few times. It can be easy to neglect this important piece of productivity, that should otherwise be obvious, so I'll be more mindful of this moving forward on all web and mobile projects.