Rebranding a musician into a writer through design

A web redesign for an independent musician who wanted to rebrand as a blogger and writer while still maintaining some focus on their music offerings. The goal was to redesign the website to feature the author's blog with their music standing more secondary. Previously, the website had been designed to feature music with the focus on the client's music, media kit, tour dates, and other ways for their audience to interact and keep up with their performances. The client wanted to rebrand to shift the focus to their writing and have a blog with a template that auto-populates blog entries in Wix.

Tools:

• Figma
• Figjam
• Google Sheets
• Wix

Role:

• Lead UX and Web Design

Team:

• Solo Project with Client

Duration:

• 1 month
• May 2022

Planning

I broke down the scope of the project into the phases of the design process, starting with planning the project and defining goals. Then followed by research and analysis, designing information architecture, sketches, wireframes, a prototype. Finally, it would conclude with a design critique and iteration of final details. The project was to take place over the course of a month so a week would be dedicated to each phase.

Research

I conducted a competitive audit for the client of other author/musician/combination artists who created their websites in similar builders. I found that there were not many other creatives with the same type brand as the client, and I could not find any writing/musician combo portfolios. I examined both writing and music portfolios to see common practices and gather information on their weak points. I found that there was an opportunity to focus on clear information architecture and clear navigation, so that the target viewers can understand that they are seeing a showcase of a wide variety of skills.

Information Architecture

I created an information architecture diagram in FigJam and assigned clear organization to the different areas of the portfolio. It was a priority to achieve clear navigation for user who are looking through the client's skillset. I wanted to put the individual as the highest focus, followed by the writing portfolio, with music following, and contact as a call-to-action to put viewers in connection with the client.

Sketches

I created sketches for the home page and basic navigation. I focused on the blog as a priority on the home page, but also wanted to include music videos and players as a secondary focus as the client had on their original home page. After the client approved basic layout, I created sketches for the blog and music pages. I experimented with different ways of displaying the auto-populating blogs, music player, tour dates, video, and gallery on their respective pages.

Lofi Wireframes

I constructed low fidelity wireframes of the home page, blog section, and music page. I placed Home, About, Blog, Music, and Contact in order of priority in navigation. On the home page I decided to place featured blog posts on the left so that users will see it first, and I maintained the music player and video above the fold.

Lofi Prototype

I created a low fidelity prototype of the desktop website in Figma. I constructed pages for individual Blog pages, About, and Contact pages as well, to fully test out navigation. This phase was followed by a client test and critique, where the current design was approved to move forward in the process.

View Prototype

Project Images

New website with clear information architecture and navigation has been established, hover states have been added to interactive components, and I prioritized the Featured Blog and automatically populating blog entries on the home page. The new home page and navigation clearly establishes the blog as an element of higher importance while still keeping music highlighted with a music player, tour dates, and videos below the fold. I also checked responsiveness by optimizing the design for tablet and mobile.

Finished product images of the blog, music, and contact pages. The blog page has auto populating posts through Wix that also allows you to search and filter articles. The music page underwent updated design to the new template and maintained the features it had previously. The contact page invites viewers to contact the client for collaboration and potential projects. I also achieved AA accessibility on all copy across the responsive design.

Accessibility Considerations

• Large touch targets for buttons.
• Mobile optimization for responsive design.
• Organized to be viewable from screen reader.
• AA WCAG Contrast