Mainstreet Art Center
Revamped website with a modern, elevating the online registration process and enhancing overall usability.
My role: UI/UX Designer, UX Researcher, Branding Design
🤔 What is the problem?
The existing website design, outdated and challenging to navigate, presents a substantial barrier to an easy class registration process. Users often find themselves lost and frustrated in their search for specific information, demonstrating a critical need for an intuitive, user-friendly interface.
🤝 The Solution
My solution was to deliver a new and improved 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.
Before
After
🏁 Where it all began
Mainstreet Art Center has been open since 1994, attracting students from different regions, including Chicago, Illinois, and southern Wisconsin. They offer quality classes with accredited art teachers, and students can easily register for classes on their website. Upon first seeing this website, I was eager to redesign the UI. However, I soon discovered that the school needed more than a cosmetic improvement to make sure they were seeing better business.
Finding the right class can be a commitment, considering personal preferences, budget, and instructor choice. To simplify this process, I'll improve the website's user experience, making class exploration and registration a breeze for all students.
In brainstorming possible solutions, I asked myself this question:
How might we improve their online presence to increase class registrations?
🧐 Conducting 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.
The goal was to understand what users value when registering for an art class so that I can create the ideal user experience.
And so I throughout my research, I asked the following 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?
RESEARCH FINDINGS
💻 Secondary Research
While redesigning the website for this school, I gained insights into various aspects:
-
The website functions as an e-commerce platform, offering art classes and workshops through registrations.
-
Art education operates as a business, with students investing in academic programs.
-
In the education sector, the sale of art programs has historically received little attention and support from public funding.
.png)
RESEARCH FINDINGS
🏇 Competitive Analysis
During the competitive research phase, I concentrated on the desktop and mobile versions of the website's home page and class offerings page for three direct competitors and one indirect competitor. All of these websites provide art classes and follow a similar format, characterized by a clean, professional, and user-friendly design. The user interface is spacious, with ample white space that aids in easy information reading. Additionally, each website presents a clear and straightforward path for users to register for classes.
.png)
RESEARCH FINDINGS
👩🏻🎓 User Surveys: Adult students and parents
After creating initial persona profiles and conducting my initial survey, I realized the importance of reaching out to parents who are considering enrolling their children in art classes.
Here's what I discovered:
Participants displayed a strong interest in exploring creative hobbies. They were motivated by their desire to learn and witnessed personal growth through engaging in creative activities.
Insight 1
Peer influence and interactions with other creators who shared similar interests often served as a source of inspiration for the participants.
Insight 2
When it came to barriers to taking art classes, all participants expressed concerns about time constraints and the cost associated with these classes.
Insight 3
Pricing emerged as the primary consideration for 3 out of 4 userswhen deciding to enroll in an art class. Credentials and recs from friends or family also held significant weight in their decision-making process.
Insight 4
🧐 After research, what now?
By analyzing secondary research, conducting a competitive analysis, creating provisional personas, and collecting user survey data, I gained insights into the key factors that potential art students or parents consider when deciding to register for an art class. I have concluded that there is a need for improvement in the overall user experience, that includes the appearance of the website itself.
🗺️ Creating the sitemap
To organize the information within the app effectively, I created a sitemap. To do this, I referred to various school websites and art museum websites for inspiration and guidance in mapping out the app's content structure.
TAKING A STEP BACK
🎯 Identifying Projects Goals
Before I could continue onto create my user flows, I took a step back to recognize how I can build and measure success while considering the stakeholders and institutions (governments and schools) involved in delivery.
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
🙋🏻♀️ Mapping it out: User & Task Flows
I started by creating a storyboard for the user journey. In one scenario, I focused on an adult, Vickie, who wants to register for a drawing and oils class. Before committing, she wishes to review teacher information, student work examples, and the class price. During the wireframing process, I faced challenges in finding the simplest registration flow without making the purchase path confusing. As a result, I developed three different versions of the task flows. Here are the finals ones.
In the second user scenario, I focused on a parent's journey as they browse through the website to register their child for a class. In this flow, Nita is interested in enrolling her child in a drawing class. Before making a decision, she wants to ensure that the class is located nearby, fits her budget, and has teachers with good credibility.
✍️ Sketches
To begin, I focused on organizing the information for the home page. I drew inspiration from various school and art museum websites that I found and gathered them on my mood board. During the process, I sketched different variations of the call-to-action, and eventually, Sketch #3 best matched my vision for the home page screen.
🏗️ Wireframing
I chose to concentrate on the first user scenario and the first two tasks, which involve Vickie registering for a class and going through the checkout process. As the second user flow with Nita is not the top priority at the moment, I decided not to create screens for it. Instead, I proceeded to create screens for the main purchase path.
🎨 Creating the UI Design
I drew inspiration from the original Mainstreet Art Center logo, primarily because of its vibrant color palette. While exploring the website, I noticed various paintings and artworks and extracted colors from these existing visuals. My approach was to leverage the information and visual cues already provided to me.
.png)
My goal was to create a logo that exuded cleanliness, sophistication, and professionalism. I drew inspiration from established brands like The Art Institute of Chicago and public arts and culture logos. The monogram I designed used shapes that outlined the initial letters of the company name. It's a simple yet emotionally resonant design, enhanced by the use of a serif font style, which conveys refinement.
.png)
I merged all of my inspirations to craft a style tile for the app. I utilized images that showcased the colors I had in mind, aiming to capture the clean and sophisticated ambiance I envisioned for the website. The primary color I settled on was a lush green hue. 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
I conducted the a usability test through Maze and gathered insights from 4 users. My goals were to test the ease of use in navigation, observe the clarity of user flow, gather feedback on the UI and to observe any area of confusion or hesitation. I did not test the checkout process as I believed it was already an intuitive process for users who have experience purchasing something.
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.
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
🎉 Successes
-
Flow is straightforward and easy to follow
-
The page links were clearly defined
-
Classes were separated and organized clearly
-
The interface is professional-looking
-
Appearance, color scheme, and branding are very 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 without changing too much?
-
Should we treat this registration process the same way as universities do with classes or in an e-commerce style?
In the end, this came to fruition👇🏻
🛬 Conclusion
In this project, my objective was to preserve the fundamental essence of Mainstreet Art Center. While I opted for a rebranding effort, I drew substantial inspiration from the core elements already present. I maintained the website's essential elements but embarked on a redesign to enhance the overall user experience, particularly in the context of purchasing a class.
📐 Measuring Success
Reflecting on my project goals, the primary aim of the redesign is to boost the number of class registrations by enhancing the overall user experience. This, in turn, will have long-term benefits for the business. I will gauge the success of the redesign by assessing the following metrics:
-
A rise in the percentage of class registrations.
-
An increase in website traffic on desktop devices.
-
Heightened awareness of the available programs.
👩🏻🏫 What did I learn from this project?
I've learned to view design from a more business-oriented perspective, recognizing how design can significantly impact a business's success. During this project, I initially found myself drawn towards the visual redesign, as Mainstreet Art Center's existing website design appeared outdated and traditional. As someone who appreciates aesthetics, my initial focus was on enhancing the user interface (UI).
However, as I delved deeper into creating user flows and task flows, I gained a broader perspective. It became evident that the core UX issue to address was improving the purchase path, which is fundamental to the business. This shift allowed me to refocus on the primary UX challenge.
This project taught me that, while aesthetics are important, many design decisions are driven by the business's potential benefits. It's easy to become enamored with visuals, but it's crucial to remember that the true value of design lies in how it serves the business and its users.