Responsive Website
Design of a mosaic art studio website to gain details about the studio and the ability to register for classes.
Flying Colors Mosaics is a mosaic art studio in Massachusetts. The studio has a rudimentary website which is outdated and broken. It needed a complete overhaul and redesign of the site. I created a new website showcasing the studio and the artwork with a comprehensive system for class registration. I simplified the logo color and used colors consistent with the preferences of the artist.
The owner needs a website that can introduce her studio, show what classes and events are offered and offer online registration for classes. She would also like to be able to show the artwork that is for sale. She liked the original design of her logo, but didn’t like the colors. The website needs to be able to be functional on both computer and mobile.
Role
Research, design, testing
Research
Research
Competitive Analysis
I looked at seven studio websites including the original Flying Colors Mosaics site in order to evaluate what sections they had on their sites and where the information was found. Most of the sites had mailing list signups, and separate pages for about the studio and artist and for contact information. Half had class registrations, testimonials and information about previous projects.
Interviews
In order to learn what people were looking for when they are looking at a website and considering registering for classes, I interviewed five people who had taken art classes through an independent studio. Class descriptions and having class times that work with their schedules were the most cited factors, and the work created by the teacher and the cost of the class were the second most cited. I created an affinity map to organize the information.
Card Sort
I created a card sort, based on the possible pages or links I might use, to help determine where on the website users would expect to find information or interactions like registration.
Persona
Based on the information gleaned from interviews, I created a persona to think about when creating the site.
Roadmapping
Site Map
From the card sort I created a site map.
Task Flow
In order to help guide the design, I created an initial task flow for how someone might register for a class.
Branding
Mood Board
I created a mood board based on initial interview, discussion and feedback from the owner. Only minimal changes were needed from my initial board.
Logo
The owner was originally not sure if she would like a new logo or to keep the original. A few different possibilities were given but ultimately we kept the original design but simplified the color and font and removed the studio name from the logo itself.
 |  |
Wireframes
Lo-Fi Wireframes
 | I created some different ideas for layout possibilities of the homepage. |
 | I ultimately settled on this version because after discussion and evaluation, it seemed cleaner and easier to use. |
I created some basic page ideas for the classes in two formats, list and calendar.
I created some registration pages with the consideration that minors would be taking classes as well, which would require a guardian to input their own information along with the child's, and a payment page.
 |  |  |
Hi-Fi Wireframes
I created hi-fidelity versions of the main pages of the site: the homepage, class pages in list and calendar format, registration and payment.
I later modified the layout for phone versions. I decided not to have a calendar view on mobile. It did not seem greatly used with testing and for initial release, did not seem necessary.
Usability Testing
I did moderated prototype testing with six people and created an affinity map and summary for needed modifications.
Revisions
Original
Modified
Added submit bar for signup info.
Increased size of testimonials.
Increased size of text link to switch views.
Reversed opening text with links so that links are close to filters.
Added email confirmation text to confirmation modal.
Prototype
Reflections
I worked on this project until just before I felt I needed user testing, and then put it aside for some weeks to work on another project. When I returned, I looked at the mood board and realized I needed to modify some of the components and colors. I had used harder corners as an homage to broken shards of mosaics, but the mood board reminded me that the owner generally likes a softer, rounder look. I also revamped the color scheme from primarily black and white to softer colors to better match the mood board.
This project has impressed upon me the value in having and returning to some of the early steps in the process to reground myself in what is needed. It also affirms the idea of stepping away and working on something else even just relatively briefly, to be able to come back with fresh eyes.