PORTFOLIO WEBSITE.

 Responsive Web Design.

Working With Real Client.

Project Overview

Project Background

The client is a musician and composer working in the niche of film score writing. She needs a responsive portfolio website where she could share her audio and video works with potential clients in order to raise their interest in hiring her.

Challenge

·         Keeping in touch with the client throughout the project and discussing every decision with her.

·         Balancing between the client’s preferences and expectations, UX research findings and design principles.

·         Designing a responsive website that would work for desktop and mobile screens of various sizes.

Role

UX Designer (UX Research, Interaction Design, Product Design, Usability Testing).

Tools

Figma.

Time Allocated

74 hours.

Project Phases

1 - Research

 UX RESEARCH PLAN | COMPETITIVE RESEARCH | CLIENT INTERVIEW | USER INTERVIEWS | RESEARCH DEBRIEF | USER PERSONAS

Research Plan

I started with a UX research plan, in which I included competitive analysis, a client interview and user interviews in order to be able to approach the project from all possible angles.

Secondary Research - Competitive Research

First, I ran a competitive benchmark study on a number of portfolio websites belonging to both rising and established composers and, using my best and most objective judgement, created a summary of the pros and cons of their design and content.

Primary Research - Client Interview & User Interviews

Next, I wrote a list of questions to ask the client. It was based on what I had learned about composer portfolios from my previous step as well as some additional project specific questions to help me learn about the client’s goals, needs and expectations. Then I interviewed the client and documented my findings.

During the interview, I also learned from my client who our possible users could be, so that I knew whom to interview for my user interview stage.

After that, I shifted my focus to the opposite end – the user. I prepared a user interview script and interviewed a couple of film and music production professionals that could be our potential users – a music producer and a film director. Both provided me with valuable insights, which I documented for further use.

UX Research Debrief

To summarize my findings and conclusions from the abovementioned steps, I wrote a UX research debrief.

My findings showed that it was important for our to-be-designed website to have:

• clear structure, easy to find pages and contact info accessibility;

• inclusion of only directly related information;

• fewer links leading to other websites;

• featuring video samples as opposed to just audio samples (because music samples with no video to them were not sufficient to judge if a composer could write music that would follow the action on screen).

If you’re interested in taking a closer look at the debrief, please hit the button below.

User Persona

Based on my user interviews as well as the information I obtained from the client about her target customers, I created a user persona who was supposed to represent in my eyes one of the potential user types - a film director - whose pains, needs and expectations when searching for a composer for a project I needed to take into account while designing the product.

2 & 3 - Information Architecture & Interaction Design

LOW-FIDELITY WIREFRAMES | SITE MAP & USER FLOW | UI PRODUCT REQUIREMENTS | RESPONSIVE MID-FIDELITY WIREFRAMES & PROTOTYPE

Low-Fidelity Wireframes

As I was done with my research, I had a video-call with the client and we discussed my UX research findings and to-be-designed site's structure.

While we were discussing, I quickly sketched the future website’s pages so that the client could have a say if any of my ideas didn’t work for her. We came up with a few desktop sketches leaving the mobile version for later. We decided to include such pages as:

• Home (containing a brief introduction with the composer and her selected works);

• About (the composer’s Bio);

• Works (her works divided in 3 subsections - Video Projects, Autonomous Compositions and Songwriting);

• Contact.

You can find a sample of my sketches below.

Site Map & User Flow

Since it was a very simply structured website, the site map turned out super compact and I didn’t find important sharing it here.

After the site map, I also mapped out a user flow based on the main purpose of a composer's portfolio website - taking the user from learning about the composer and their works to deciding to contact the composer.

UI Product Requirements

Based on my sketches, sitemap and user flow, I drafted a UI Product Requirements list to have a solid set of guidelines for designing my Figma mid-fidelity wireframes.

Responsive Mid-Fidelity Wireframes & Prototype

This step took the longest as it included multiple discussions with the client about my design decisions. I had to change some things according to the client’s taste and preferences while having to tactfully defend some others and leave them unchanged as changing them could interfere with user satisfaction and/or go against certain design principles.

I made sure all the elements were responsive to screen size changes and then designed as well mobile version wireframes.

After that, I created desktop and mobile Figma prototypes to test for possible flaws before moving on to full color.

You can find a few samples of my early mid-fidelity wireframes below.

I included additional CTAs on Homepage to encourage the user to visit other sections of the website and learn more about the composer and her different categories of works.

4 & 5 - UI Design & Iteration and Implementation

FIRST USABILITY TESTING | LOGO WORDMARK | UI KIT | RESPONSIVE HIGH-FIDELITY WIREFRAMES & PROTOTYPE | SECOND USABILITY TESTING

First Usability Testing

I wrote a list of user tasks and ran an early usability testing to make sure the website’s structure made sense to the user. The testing was successful: 100% task completion, positive feedback from the participants.

There was a suggestion from one participant to add icons to navigation options, which was declined by the client.

If you want to see the debrief of the testing results, please hit the button below.

Logo Wordmark

The client wanted to have a wordmark instead of a regular logo. Over a video call, we chose a few fonts together, and then she picked the one she liked the most. Then we discussed her expectations in more detail. I created a few samples, she pointed out what she wasn't content with, and so I adjusted it to her taste – and voila! – there we had our logo wordmark. We chose the colors together as well.

UI Kit

Keeping in touch with my client about every change and every detail, I created a UI kit to base my future high-fidelity design on. The client also provided me with the imagery.

If you’re curious to sneak a peek of how it turned out, don’t shy away - just hit the button below!

Responsive High-Fidelity Wireframes & Prototype

We had frequent discussions with the client during my work on the high-fidelity pages, and I also shared the link for the Figma files with her so that she could leave comments there as well. And so, at the end she was really content with the result and I didn’t have to redo anything.

Take a look at some of the hi-fi pages below or, to get a better feel of the final product, hit a respective button to see one of the Figma prototypes:

Second Usability Testing

The only thing left was to run a final usability testing. I used the same script, but added a bit more detail to it. The testing was successful and didn’t reveal any areas confusing to the user. With the client’s approval, I considered the project completed and ready for hand off.

CONCLUSION

The most important thing I learned from this project was how complicated working with a real client could be: you have to balance between your UX research findings along with the design principles and what the client wants and envisions.

Conclusion? Tactfulness and empathy are key to working with client. And keeping in touch. Always. About every change and decision.