UTAU Website Redesign

UTAU [oo-tahw] is a singing voice synthesis software created for Windows. It has the function of assembling singing voices based on a sampled voice library, and in addition to the voice libraries (sets of original voice files) that come with it, you can also create your own.

Role

UX/UI Designer

Time

Sept. 2024-Mar. 2025 (6 months)

Tools

Figma

Problem

The original website was made in the late 2000s lacking a UI design and it was only a narrow column with text. There were no images, icons, color scheme, or typography. It lacked flow as it was unclear on what links take you to where and some pages were not linked anywhere. It was plain HTML website.

Research

Target audience: 

  • People interested in having vocals for a song with flexibility in customization

  • Musicians who want to try a free vocal synthesizer (that’s not really intuitive or beginner friendly)

  • Users who are on the lookout for updates

  • A beginner with no experience.

  • On a budget


Data and Findings:

  • For the case study, I gave a card sort exercise with four categories being my four pages and eight cards with key terms related to the pages to three close friends that are from the vocal synthesizer community. The results from the three changed my perspective from how I envisioned this redesign and it made me realize how vague my words were for the categories and key terms, and how they could mean something else. The three participants all had different reasonings for their sorting because of various factors like being used to the original website’s format, Defoko being the default voicebank of the engine, downloads could mean the download links of everything, Past Versions or Others could be a log of all the versions, and more. Since I couldn’t figure out how to do blank cards on Optimal Workshop, I had the participants tell me what they would add which are a newcomers guide, a masterlist and guide to voicebank recording types, a locale switch guide to make the engine functional, a suffix and prefix masterlist, voicebank recommendations for all skill levels, and vocal effect suffixes guide. As a user, I completely agree with these as these would be beneficial to all users and newcomers since some of these are important to know or do when using or before installing UTAU. None of the key terms or categories have been reported useless. With these results, it has helped me understand what to do to revise and add to the sitemap to make navigation easier to understand and better inform both newcomers, beginners, and advanced users.

Goals

  • Split up the contents from the two only pages into different pages and sections to reduce the content per page making the website less overwhelming

  • Add some design and color to make the website less boring

  • Make it more transparent that there are other pages on the website

  • Create a more user friendly interface to make it easier to navigate and provide information to users.

Design Process

When creating the branding of the website, I wanted to keep it close to the colors used on UTAU's software logo and the colors of the notes in the software. I wanted to have consistency with colors in the software that users are familiar with so the website won't have a separate identity from the software.

For the color of the redesign, I wanted to go with something similar to the color palette used on the software’s interface, logo, and mascot or the default voicebank. The primary color I went for was a purple-like color since that was the theme color of the software since the logo color is purple and the mascot’s primary color is purple. For the secondary and tertiary colors, I went for light pink and light blue since both are used for different parts of the software interface like track lines, note colors unhighlighted and highlighted, pitch bend lines, and more. The rest of the colors like black and white were used as neutrals.

For the typography, I wanted to use something that represents technology, something futuristic, and is kind of stiff and bold so I chose Anta as the primary and Nova Round as the secondary. When laying out the interface, I wanted to create a simple interface that is easy and pleasing to look at and easy to navigate around. On the desktop view, I had the format be the text on one half of the screen and an image on the other half, and if no image is used, then have the text centered especially for the download the latest version section of the homepage. On the mobile view, I had it so everything is centered due to the size of the screen squishing everything to be more narrow than desktop. I rearranged it so the images would be placed above or below the paragraph texts depending on the importance of the information.

Results

  • Responsive for all three device sizes

  • Improved user flow

  • Color palette, typography, and clear branding

  • Multiple relevant pages instead of one

Takeaways

I am happy with the progress that I have made throughout the quarter despite the challenges of working on a blank canvas. I am glad that I got to have the creativity to work with something that I am very familiar with and put my years of experience and knowledge in UTAU towards a better and improved interface and website for easier navigation and learning for returning users and newcomers of the software.