Website Redesign Case study
J.Kaelber Professional Site
Roles: Sole UX/UI Designer
Tools: Figma, Maze, Adobe illustrator
Client: Jared Kaelber
Time line: 10 days
Rising Star Jared "Ke3bz" Kaelber approached me in his need for a website redesign with a layout that allows his fun and welcoming personality to shine while also presenting professionally and serving as a hub for his stream, discord, and professional inquiries. Above all else, throughout the double diamond process, we focused on accessibility and research.
His current website is out of date, built in tumblr, has little accessibility, and is not professionally designed or user tested. As his community grows, so to does his need for a professional and playful online hub.
Our main audience are those who stream, watch streams, and companies who are looking to partner with Ke3bz's stream to promote and use their products.
I have built a high-fidelity prototype for a full layout of a website that in the next few months I will be building in webflow. Next I will be taking you through a deep dive into my double diamond process.
Creating a user survey gave me the opportunity to rapidly gain a broad view of the wants and needs from users. It also showed me the relevance of having professional website in the streaming space. This solidified if there was any need for the site for my client.
To gain some key insights and further flesh out user needs I interviewed 3 survey participants who had recently been on a steamer's website. I found some valuable information that later shaped features of the site.
I completed a competitive analysis of Dr Lupo's website as well as TimTheTatman who are two prominent names in the streaming world, giving me insights into current industry standards, as well as what is missing within the industry.
My client originally wanted 4 specific pages for the website, HOME, ABOUT, WATCH, and DISCORD. I decided to do a quick card sort as I felt that discord would be better off as a link in the ABOUT page but I wanted proof before I went to my client. The card sort did show that the site would benefit from a possible layout change however the client did want to get the ball rolling and get the idea on paper.
With the power of research behind me it was time to look into personas. Knowing this new information I was able build out user goals, motivations, and pain points they may encounter.
To prepare for some user stories and flows, I got out my pencil and sketch book to make a story board for Gerard.
After clearing the layout with the client, I made this wireframe clickable and we went into user testing. From this testing I discovered some key insights. I made changes for more user testing.
A link to the full script and responses can be seen here: User Testing Report.
For this 10 day design sprint the final deliverable for my client was a user tested and refined low fidelity prototype.
From the feedback learned from the user testing I made the contact button smaller and less obtrusive for the hero pic. I Also relocated the socials into the footer and the nav bar to the top of the page.
With the nav bar and social changes I also moved the discord link to the about me page.
On the watch page I added the streaming schedule as well as giving the clips a more modern and unique layout.
I created a nice, simple, and clean contact page that had a form for easy contact from users both content consumers, and those looking to connect for professional inquiries.
While it was not part of our initial sprint, my client and I will be moving forward with a fully designed and built website. For that reason I wanted to put a few options together for him to choose from, make 2 versions, and then perform an A/B test.
My client chose the third option, the purple with the top 2 green button choices. All colors used pass all accessibility checks for contrast and colorblindness.
I really enjoyed working on this project, delving into the research, and using my problem solving skills in order to come up with solutions for both my client and the users. I was able to create a unique, aesthetically pleasing, and most importantly accessible design for the new website. I also was able to come up with some effective logo changes that did better in the A/B test and that the client loved!
I would have loved to have more time for research but since this was only a 10 day design sprint I had to prioritize many moving parts. Each project I do I seem to learn even more just how vital UX research is.
