Back to top arrow button

Rebranding a musician into a writer through design

Web Design

Project Details

Project Goals:

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.

  • Figma
  • Figjam
  • Google Sheets
  • Wix
  • Lead UX and Web Design
  • Solo Project with Client
  • 1 month
  • May 2022


Planning diagram for the phases of the design process in creating the client's webiste.

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.


Competitive audit gaps.
Competitive audit opportunities.

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.

User Interviews

Pain Points


User Journey

Information Architecture

Information architecture diagram for writing/music portfolio website

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 for the desktop website home page.
Sketches for the desktop website blog page.
Sketches for the desktop website music page.

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

Lofi wireframe for the desktop website home page.
Lofi wireframe for the desktop website blog page.
Lofi wireframe for the desktop website music page.

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.

Hifi Prototype

Usability Testing



The previous website needed new information architecture to incorporate the blog element the client desired, as well as a full visual redesign. The client's music, tour dates, music videos, music gallery, etc. was featured and there was not a clear information architecture structure. The website also had some issues with accessibility and text size, as well as consistent branding.

Client website before redesign.

Hifi Prototype version 2



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.

Client desktop home page banner after redesign.
Client feature blog on desktop website home page after redesign.
Tour dates and videos on the desktop website home page after redesign.
Mobile home page screen after redesign.

Demo Video

Project Images

Desktop website blog page after redesign.
Desktop website music page after redesign.
Desktop website contact page after redesign.

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.

Takeaways & Next Steps

  1. This was my first project working in Wix, but it was pretty simple and intuitive
  2. The client decided that Wix did not support the blog capabilities they were looking for.
  3. This was also my first solo web design project, as I usually took clients through digital agencies I've worked at. I learned a lot about solo time management.
  4. I also learned a lot about pricing web design on my own.
  5. I learned a lot about creating responsive design that was AA accessible on all platforms.

Other Projects