OVERVIEW
About the project
I redesigned a local art studio's website with the help a web developer and a content specialist. Artful Mayhem primarily focuses on providing art classes to kids in the area. This was a school project, but we were able to work directly with the owner of the art studio to bring her vision to life.
The problem
Finding and enrolling in an art class was a complicated and overwhelming process. The content wasn't organized with the user's journey in mind.
The goal
Most users came to the site to find a class for their child, so my main goal was helping the users find and enroll in the best class for their child.
Responsibilities
Interviews, competitive analysis, and visual design
Tools
Adobe XD
Original website
The website lacked visual interest and did not provide people visiting the site with a good idea of what the business offered.
PRIMARY RESEARCH
Interviews
The content strategist and I conducted user interviews to get a better understanding of the problem. We interviewed 4 people who fit into our target audience.
From these conversations, we discovered that parents want to see that activities for their kids are fun, but they also wanted to see some level of professionalism. A clean and clear website signifies that their money was well spent and their kids would be safe.
We also found that because parents are so busy, they want quick experiences and want to be able to do everything online on their time without having to make any phone calls.
Personas
Based on the interviews, we set up 2 personas. I referred to them throughout the entire design process.
The personas helped me organize the website by highlighting the most important info to the parents coming to the site and making a clear call to action to help them complete their goal quickly.
BRAND GUIDELINES
Crafting a holistic look and feel
After listening to the studio owner's vision for the website and conducting a competitive analysis, I created a brand guidelines to inform my decisions about the UI. I wanted to show the fun and playfulness of the studio while also maintaining a clean design, knowing adults are the real users.
WIREFRAMES
Laying the foundation
At the beginning of the design process, I created wireframes for testing purposes. We showed the sketches to four parents of young kids and asked for their feedback. We discovered that they wanted to see a little bit of everything the studio provides on the homepage.
MOCKUPS
Goal 1: Attract new customers
The landing page makes the biggest impression on visitors. Our redesign focused on creating a vibrant and clean homepage that communicated the client's brand and gave the user a clear call to action to guide them through the site.
Goal 2: Improve Navigation
Our users, parents and guardians of young children, primarily come to this site to enroll their child in an art class. Originally, the website had the classes organized by date. But after some interviews with potential users, we found that dates are important, but not as important as finding a class for their child's age. We decided to sectionalize the class listings page so that the user could first identify class offerings appropriate for the age of their child.
Goal 3: Responsive Design
The original website did not resize responsively. On a phone screen, users had to zoom in to read text. Touch points were not large enough when the page was viewed at 100%, leading users to wrong pages or causing accidental clicks. Making sure the website would resize to the user's resolution was critically to building a usable website. I intentionally designed the mobile version first, which allowed me to design for any restrictions caused by designing for a small area of space.
