Alex Moschopoulos | Portfolio

Introduction

D-Jam.com is a personal project for when I was an active club and rave DJ. After sixteen years in the Chicago scene, I retired from active gigging, but kept the site as a personal project for building up skills in design and development. With many sections of the old site falling into neglect, I wanted to refresh D-Jam.com utilizing good UX principles with a compelling design.

Research and Discovery

At the time, the website was broken down into sections based on what was seen as “standard” for DJs seeking to build a following, but my analytics numbers spoke otherwise. After doing a competitive analysis and digging deep into my analytics data, I had found these insights:

Most DJs were simplifying their websites, moving much of their fan communications and even DJ mixes to social media.

Most users who came to my home page bounced, meaning they never went anywhere within the site.

The blog and photography sections saw little to no traffic at all.

I took these insights and used them to craft a questions I needed to ask, and reached out to twenty people likely to use the site (fans, DJs, and promoters). I asked them UX focused questions on finding certain items of content, and looking at what they would expect on arrival, and what they actually do.

It was very fruitful, as these insights came from the chats:

The names I used for the site sections, like Passion, Thoughts, and Imagery were confusing, and users were not even clicking on them.

Coloring and using different imagery on the sections confused the users, and the dark background with light text made things hard to read.

Users preferred to go to social media for my photos, and had little interest in my blog articles, as they came to my site mainly for the DJ mixes.

Moving to Wireframe

Armed with the new insights, I sat down and created wireframes of a home page, listing page, and a content page. I removed the blog and photo sections, and renamed all the major sections more literally. I used a card layout for the site, and kept the content more condensed in many areas.

I then went back to four of the ten people I spoke to before and showed them the wireframes, performing a usability test with many based on many of the issues those users encountered with the old site. Things went very well with only a few minor tweaks coming out of the sessions.

Final Design

For the final design, I created a simple color scheme for a more unified brand. Rather than attempt to fill the site with a myriad of colors and textures, I let the cover art of the DJ mixes build the variety while the site itself stays uniform.

Feedback was great. The users I spoke to before with the wireframes found the polished home page exciting and easy to navigate. The use of small sub-headings above main headlines did much to build clarity. None of the users had any issue discerning one item from the next.

Results and Takeaways

The redesign was a success, as I saw my bounce rate drop by half.

The biggest lesson learned in this exercise is a design that might be visually exciting isn’t always the most usable. One should always think of how the end user will experience the layout as opposed to if you visually excited them.

UX Research is paramount. I can’t imagine how I would have achieved these results without it, and I can’t fathom ever redesigning a website without researching and collaborating with end users.

When deciding what content to put into a website, think of what the main purpose a user has in coming to your site, and even if they would prefer to consume certain types of your content in other areas, like social media.