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.
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.
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.
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.
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.
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.
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.
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.
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.
