The Mainstreet Art Center is a school of fine art offering classes in drawing and painting for artists of all ages and levels of experience in the suburbs of Chicago. My redesign of the website was inspired by the ease of use of other e-commerce and school websites. I modernized the look and feel of the website to improve the online registration experience.
Role: UX/UI Designer, UX Researcher, Branding Redesign
Client: DesignLab
Duration: 80 Hours
Tools: Figma, Maze
Website Redesign
Mainstreet Art Center
Context
Open since 1994, Mainstreet attracts students from all over the Chicago area, Illinois, and southern Wisconsin and offers quality classes from credited art teachers. Students can register to take classes through the main website. For students of any kind, looking for the right class is a commitment. Also, having a budget to do so and finding the right instructor all contribute to this process.
Problem
The website design is outdated, difficult to navigate, and does not allow for an easy class registration process. One can get lost and frustrated trying to find what they are looking for.
Solution
To help improve the online presence of the Mainstreet Art Center, I will deliver a responsive website where the UI is more modern, easy to navigate, and visually pleasing. Students will feel more enthusiastic about taking art classes and will register for those classes with ease.
Question
How might we increase class registrations with an improved online presence?
My Design Process
Research
There are very few art schools in the northern suburbs of Chicago. The schools range from specializing in youth education to adult art classes. Most specialized art schools are more popular and trendier in Chicago.
Goal
The goal is to understand what users value when registering for an art class so that I can create the ideal user experience.
Questions
-
Why are students interested or not interested in taking an art class?
-
What is preventing the potential student from taking an art class?
-
What is the most important thing students consider when registering for any art class?
Methods
-
Secondary Research
-
Competitive Analysis
-
Provisional Personas
-
User Survey
Initial Research Results
Understanding the Art School Industry
Secondary Research
Redesigning a website for an art school, allowed me to understand different layers:
-
The Mainstreet Art Center is an e-commerce website that sells art classes and workshops through registrations.
-
Art education is a business where the students are investing in an academic program
-
Selling art programs in the education sector is historically heavily neglected by public funding
Competitive Analysis
For this competitive research, I wanted to focus on the website home page and class offerings page on desktop and mobile across 3 direct competitors and 1 indirect competitor. All three websites offer art classes and have a similar website format. All websites are clean, professional, and digestible. The UI has plenty of white space to help the user read the information easily. There is a clear purchase path to register for classes.
.png)
Secondary Research
.png)
Competitive Analysis
User Survey Results
What I learned from adults and parents
After developing provisional personas and conducting my first survey, I found the value of surveying parents with kids who can potentially register their children for art classes.
-
Participants are interested in pursuing and exploring creative hobbies because they enjoy learning new things and seeing the journey of their growth doing a certain activity
-
When it comes to their creative ventures, participants are influenced by their peers and other creators who have done the same thing
-
When it comes to the factors that prevent them from taking classes outside of work hours, all participants express concern over the lack of time in their lives and the expense of the classes
-
3 out of 4 participants expressed that price is the number one thing they consider when registering for an art class. Participants also mention that credentials and friends/family referrals also matter when considering taking a class.
What now?
Using my secondary research, competitive analysis, provisional personas, and user survey results, I was able to understand what potential student or parent of a student prioritizes when deciding to register for an art class.
Affinity Map from User Surveys
Define
Crafting a Persona
Based on my initial research, I initially created one adult persona. After creating another user survey for parents specifically, I decided to create two personas for two types of customers entering the Mainstreet Art Center website.
Sitemap
I created a sitemap to organize information within the app. I used other school websites and even art museum websites to map out the information.
Project Goals
Advocating for the student user
Before moving on to creating user flows, I needed to take a step back to recognize that the UX can be is the success of the business as an art school.
User Goals
-
Increase in enthusiasm about taking a class
-
Ease of registration process
-
Ease of navigation throughout
Business Goals
-
Increase the percentage of class and class registrations
-
Increase traffic on the website on desktop
-
Increase awareness of programs
Technology Goals
-
Allows for accessibility
-
Includes appropriate and high-quality imagery, video, and other media
-
Includes digestible information so as not to overload the page
Identifying Key Usability Issues
Throughout this research stage, I realized that my attention was being thrown into the UI and trying to position the company well enough to sell art classes. After discussions with my mentor, I decided to focus on improving the purchase path. Moving forward, I decided to hone in on the most important task a user can take for this business. The main user points included:
-
a complicated and tedious class registration process
-
a cluttered homepage
-
outdated visual design
-
difficulty navigating the website
Interaction Design
User Flows & Task Flows
Mapping out the User Experience
I first storyboarded the user journey. For the first user scenario, I mapped out the journey of an adult registering for an art class themselves. In this flow, Vickie is interested in taking a drawing and oils class. Before deciding to take a class, she wants to look over the teachers and the kind of work other students have made, as well as the price. Throughout my wireframing process, I went through many iterations of the class purchase process because I was having trouble figuring out the easiest registration flow without complicating the purchase path. I created three versions of the task flows.
User Flow & Task Flow #1
For the second user scenario of a parent, I mapped out the journey of a user browsing through the website before registering their child for a class. In this flow, Nita is interested in registering her child for a drawing class. Before deciding to take a class, she wants to make sure it’s close to her home, is affordable and the teachers have good credibility.
User Flow & Task Flow #2
Sketches
I wanted to organize the information for the home page first. I was inspired by the websites of schools and art museums I had found and placed them on my mood board. I ended up sketching variations of the call-to-action. Sketch #3 aligned with my visions for the home page screen.
Wireframing
I decided to focus my wireframes on the first user scenario and the first two tasks where Vickie registers for a class and Vickie goes through the checkout process. In the end, I decided not to create screens for the second user flow of Nita, because it’s not the top priority. I proceeded to create screens for the main purchase path.
UI Design
Mood Board
I used the original Mainstreet Art Center logo as a base of inspiration because of its rich colors. I found paintings while browsing through the website and picked colors from what was already existing. I wanted to take as much information and visuals from what was already presented to me.
.png)
Logo Design
I wanted the logo to be clean, sophisticated, and professional. I was inspired by the branding of The Art Institute of Chicago and public arts and culture logos. The monogram was designed as shapes that outlined the first letters of the company name. It’s simple yet evokes emotion and refinement with the serif font style.
.png)
Style Tile
Combining all of my inspiration, I created a style tile for the app using images that showed the colors I had in mind and that represented the clean and sophisticated feeling I envisioned the website to have. A rich green became the primary color.
Design System
While I was creating my high-fidelity screens, I was putting together my design system at the same time. This gave me some room to experiment with colors and styles.
Testing & Iteration
Once I completed my screens for the task of selecting a class to purchase, I moved on to user testing. While I was conducting user testing for this one task, I was working on the high-fidelity screens for the checkout task at the same time. I wanted to highlight three main problems that I had focused on while designing my high-fidelity screens.
Test
I conducted the usability test through Maze and gathered insights from 4 students who had completed the initial research survey. My goals were to test the ease of use in navigation, observe the clarity of user flow, gather feedback on the UI, and observe any area of confusion or hesitation.
Results
All users completed the tasks. Overall, the user flow was intuitive and the screens were easy to navigate.
Pain Points
Here are possible pain points I had to consider based on usability testing for the first user task:
-
Underutilization of micro-interactions like auto-scroll and drop downs
-
Redundant buttons and links
Success
-
Flow is clear and easy to follow
-
The page links were clearly defined
-
Classes were organized well
-
The interface is professional-looking
-
Appearance, color scheme, and branding are polished and modern
Questions I asked moving forward
-
What does the class registration process look like?
-
Are we looking to outsource a way to organize registrations?
-
How can I adhere to the company’s original vision for its branding??
-
Should we treat this registration process the same way as universities do with classes or in an e-commerce style?
Conclusion
For this project, I hoped to keep the core and essence of Mainstreet Art Center. Although I decided to redesign the branding, my new ideas were heavily inspired by core aspects of what was already given to me. I kept the elements of the website the same but redesigned the website to improve the overall experience of a user purchasing a class.
Measuring Success
As I take a look back at my project goals, my hope for the redesign is to ultimately increase the number of class registrations by improving the overall user experience. This will benefit the business in the long run. I will measure the success of the redesign by reviewing the following points:
-
Increase the percentage of class and class registrations
-
Increase traffic on the website on desktop
-
Increase awareness of programs
What did I learn from Together?
I learned to look at the design from a business perspective, where I was thinking about how the design can easily impact the success of a business. In this project, I was easily distracted by the visual redesign when there is a bigger UX issue to focus on. Mainstreet Art Center’s current website design is very outdated and old-fashioned. As someone who enjoys aesthetics, my work at the beginning of the project was driven by improving the UI. It was not until I was creating the user flows and task flows that I was able to take a step back and prioritize the main UX issue, which was improving the purchase path. This is the core of the business that I managed to come back to. When pushing for a design project, it’s easy to get caught up in the visuals, when in reality, a lot of the design decisions are driven by how much the business will benefit from it.
My Design Process
End-to-End Mobile Application
Together
An app that aims to improve teen mental health, all in one platform.
Website Redesign
Mainstreet Art Center
A modernized look to improve the online class registration experience.
Adding a Feature
Spotify Mixtapes
A new a feature that brings out the nostalgia of the past
Responsive Web Design
Zeit Travel
Booking a new kind of travel experience