Forest Dream Studio

Redesign a responsive website for a performing arts school to make it more informative and trustworthy.

Forest Dream Studio is a performing arts school based in Irvine, California. Since the business is growing fast, the original site was not scalable to support updates.

As the sole designer, I led the redesign of the website, collaboration, and implementation.

My Role
Project Management
User Research
UX Design
Branding
UI Design
Prototyping
Usability Test
Implementation
Duration
2 months
(part-time freelance)
Tools
Figma
Adobe Photoshop
Team
Business owner
Business general manager
Business content writer

Discover & Define

Kick-off meeting

Before starting the project, it’s very important to gather as much information as possible to learn about the business and understand the goals of the project, so I led an online meeting with the owner and the general manager of the school. This helped me to get an overview of the project, plan the design process, and estimate the schedule and scope. Here are the major things I learned about the project:

Website redesign goals:
1. Attract more potential students (customer inquiries or submitted class applications)
2. Update and reorganize the information about the school
3. Elevate the UI received by the audience

Target audiences:
Forest Dream Studio is currently devoted to discovering and raising young adults and child stars by providing early performing arts education. Since parents of potential students are the major audience the website is targeting, I decided to mainly focus on their pains and needs for the website.

Identify problems on the original website

To start the research, I created a screening survey and asked the client send it out to the family group to learn the general experience of using the website and find appropriate candidates for interviews.

Unfortunately, I didn’t receive any responses from the parents, so I came up with a Plan B - recruiting people from online communities who had experiences with similar websites, and get some feedback on the original website. I was able to interview 2 people from the communities, and also do an internal interview at Forest Dream. Even though the interviewees didn’t fully match with the target audience, I still got valuable findings that were appropriate to be used for this website:

Needs from potential customers:
1. Learn if the school provides the services they want - detailed introduction of the classes & events.
2. Since the classes take quite a lot of money, they want to know if the school is legitimate and credible - social media presence and engagement in the community, school’s location and history, and teachers’ introductions.

Pain points of the original site:
1. There was no introduction about the school on the homepage and the header didn’t suggest what the website was for.

2. It was hard to learn about what subjects do they teach and match the advantages with the classes.

3. All the instructors' bios were in one place and it was hard to tell who teaches what subject.

The challenge

Ideation and information organization

With the research findings, I listed 2 problem statements to guide further ideation:
• How might we help visitors learn everything they want to know in a structured and understandable way?
• How might we enhance the Forest Dream brand through the website and show its credibility?

To find the solution, I started to brainstorm about the information the parents would like to see based on the original site and updates from the kick-off meeting. Then I had a meeting to show the clients about the brainstorming result, discuss what features to have and confirm what information they can provide.

(The pink circled ideas were included in the final website)

After that, I reorganized the information architecture by referencing the card sorting result and competitors' websites, then made a new sitemap so that users can get to the info they want to know quickly.

Sketch & Design

Let the ideas spark

While I was making the sitemap, I started to collect inspirations on my mood board. The sitemap was a brief guide to start designing low-fi wireframes, but first I wanted to make sure what information should be included on the homepage since it would be the first page the visitors see. So I sketched out 4 drafts of possible homepages and check the mood board at the same time.

After communicating with my clients about my design decisions, I then consolidated the sketches into a final version so that the design was comprehensive, concise, and could be scaled when there were new updates.

Collaborating with the content writer

When I started to sketch the webpages, I realized I did not have enough information about the classes, and I did not know how their class levels work, so I asked for a meeting with clients to learn about the educational service the school provided.

At that time they did not have any copy of the information. After learning about the details, I was able to sketch out the class main page and the single class page. I made annotations about what copy I needed on my sketches and sent them to their content writer.

I kept in communication with the content writer for any questions she might have. Eventually the content writer sent me the syllabus of the classes and newly written information, as well as the copy I needed to design the Instructors page. With the copy I made low-fidelity wireframes on Figma to explore the possible layouts of each page, then created hi-fidelity wireframes for clients to review.

Testing & Iteration

Make sure the experience is easy and seamless

Even though my clients were satisfied with my hi-fi wireframes, I still thought I should test with users and see if the website was truly helpful for them. I did 2 rounds of usability tests on the high-fidelity prototype with 8 potential users and asked for their feedback, with iteration after each round of testing. Here are the major iterations:

Iteration 1: Learn about instructors with the least effort

In my first version of design, I wanted to help users access information in fewer clicks, so I listed all the instructors’ bio on the same page and categorized them by subjects. But I didn’t notice that one instructor may teach more than one subject, and the bio for the same person shouldn’t repeat every time in different categories. So I came up 2 solutions to this problem:
Solution 1 : List every instructor’s bio follow an alphabetical sequence, then add the subjects each person teaches under their names.
Solution 2: Show Instructors as cards and categorized them by subjects, since each card doesn’t take much space, instructors who teach one subject can be shown in another subject area.

After the second round of testing, most users preferred solution 2. Even if it requires extra clicks, but it takes less effort than reading through each bio and find the subject the user wants.

Iteration 2: Add clear and effective CTAs

While watching users test with the prototype I noticed that they rarely clicked on the main page for all the Classes because of the drop-down menu to each subject, and they didn’t see the “How to Enroll” section to learn about the admission process. While they were reading each subject page, they would scroll down to learn about the class instead of clicking on Apply. After I added the section to each class page, users found it much easier to understand the process and click "Apply".

Other iterations:
• Made the levels on the homepage more self-explained
• Added class starting time
• Added a section to show social media updates on the Homepage
• Enhanced the hierarchy of CTAs and content

Implementation

Forest Dream has been using Wix to host their original website. As the studio was still in the middle of their website contract with Wix, my client and I decided it was best to stay with their current website platform and continue to build off from there.

This website-building platform restricted me as a designer since I was only able to redesign the website under Wix’s website editor.

Forest Dream Studio published site

Looking further

Outcome and Next Steps

The final site was published on Wix in September 2020 with another major content update. Within 3 months of site relaunch, the customer inquiries increased by 167%, total unique visitors by 105% and total site sessions by 45%. The studio business is continually growing so I may help them with future updates.

(Virtual selfie with clients celebrating the new site! 📸)

Reflections

This project helped me to establish a framework for doing freelance projects in the future. I learned a lot about how to communicate with stakeholders as a product designer, not just a web designer.  A lot of the times the clients do not know what is design thinking, and that requires me to explain and advocate for the user-center approach. I learned that when you have a plan of what to do and tell clients how they can help, it is easier for them to agree with you.

The biggest challenge of this project was to find users of the original website to do user interviews. If I could do this project again, I would try harder to find ways to connect with students’ parents to get more accurate findings, or maybe join their online classes and find students there.

Another thing I learned was to check the website’s responsiveness carefully before launching it. After I created the desktop website on Wix, I assumed the mobile version was automatically generated, but later found that it was very messy while reviewing it with clients.

Next case study
Party Room for YouTube Music