Art Bus NOLA
Project
Redesign Art Bus NOLA website to provide an improved user experience describing the services and booking options for parties and events.
Problem
The current website is poorly designed and not a responsive design. It does not provide adequate information about Art Bus options. This creates extra time and work the owner having to answer questions in multiple phone calls, negatively effecting potential income.
Solution
Create a new responsive design solution to use at any time on any device. This will allow users access to Art Bus NOLA information easily and efficiently.
My Role
UX/UI Designer
Tools
Figma
Google Sheets
Word
WebAIM.org
Pen and paper
Google Fonts
Redesign Project
Existing Art Bus NOLA website is only available on one platform. It is not intuitive or supplies enough information. Art Bus NOLA needs a responsive design to meet user needs on the go with different platforms.
Phone number being the most prominent item on header encouraged users to Call for any information or booking.
The titles in header do not give the user the choice to find out about each event.
The Homescreen has too much visual clutter to be pleasing to the eye. It makes the site hard to read.
The Main screen used the large titles which made the user want to click on the word to learn more. These were not links.
Only secondary actions are listed in the header so user will select the category they are interested in and get all the information there.
Phone number is Not listed as a primary CTA in the header.
The main screen has cards for each topic of interest and they are clickable to get more information.
User Personas
Our users will be parents booking that special party experience for their child. Or an individual looking to create an event or add a fun, creative option to their existing event.
Carol
Job Title and Experience
Wife, mother, College graduate, and second grade school teacher.
She has two children
(5 and 7 yrs old) and lives in a neighborhood of young families.
She is busy carpooling her kids to extracurricular activities. She doesn't have a lot of down time so she wants quick and easy solutions.
Enjoys reading and relaxing when she has the time.
Goals
-
Carol wants to provide her daughter with a unique birthday party experience.
-
Carol wants to find a possible in-school field trip for her class.
-
Carol is interested in new ideas for possible fundraisers for her school.
-
Carol wants to achieve these goals quickly and efficiently since she is busy.
Tasks
-
Being a mom and a school teacher is time consuming, so Carol needs tools that are efficient.
-
Sites that provide all the information she needs without having to reach out for more information are her preferred choice.
-
Sites that make scheduling and booking options easy are necessary.
-
She must be extremely organized to keep track of all of her commitments
-
She uses technology to sync and coordinate her life.
Frustrations
-
Websites that are not user friendly and do not provide the needed information easily.
-
Not being able to access websites using any device she has handy.
Technology
-
She uses technology throughout all aspects of her work life and personal life.
-
She is looking for tools that are efficient, intuitive, and easy to use.
-
She is proficient many programs and uses them often.
"I want my daughter to have a great party experience creating memories. I need a tool that quickly lets me know it meets my needs."
John
Goals
-
John enjoys being part of the community.
-
John volunteers in events that the community has to improve environment for his kids.
-
John is looking for donations or businesses that would like to contribute to the community events.
Frustrations
-
Websites that are not user friendly and do not provide the needed information easily.
-
Not being able to access websites using his phone since he is always on the go.
Job Title and Experience
Husband, dad, and Electricitian
He has three children
(2, 7 and 8 yrs old) and lives in a neighborhood of young families.
He is busy running his electrical business and carpooling his kids to activities. He needs to use intuitive and efficient tools.
Enjoys exercising and playing with his kids.
Tasks
-
Running a business.
-
Sites that provide all the information he needs without having to reach out for more information.
-
Sites that make scheduling and booking options easy.
Technology
-
John has to be on top of the latest technology trends because of his business.
-
John looks for tools that are efficient, intuitive, and easy to use.
-
He uses programs to maintain his business daily.
"I work hard so I can provide for my family and help create great experiences for them."
User Flows
A quick entry to the site was deemed necessary so the log in process was eliminated. Most users will book once maybe twice on the site therefore not requiring accounts. So user flow is for the majority of site visitors looking to book a birthday party.
User Stories
-
Carol, mom of 6-year-old Ava, wants to book her daughter an Art Bus birthday party.
-
Thomas organizes the local semi-annual food truck event and is seeking entertainment ideas for young children who attend with their parents.
-
Cynthia is the principal at a local school that is having their annual fair(fundraiser). She is looking for new ideas/activities to bring to the fair.
Original User Flows
Revised User Flows
Wireframes
Wireframes begin with simple hand drawn sketches, that then progressed to mid-fidelity and then high-fidelity. Continued iteration occurred as I user tested with parents along the way, discovering issues with UX and UI design.
Mood Boards
"We LOVE Art Bus NOLA!"
This moodboard reflects kids, parties and art which is over 90% of the business. Since this is the majority of the business and the appeal needing to be for children, the colors are bright and the fonts are playful. As a parent I feel they will be looking for something that demonstrates the fun children will have with the Art Bus.
This moodboard reflects more aspects of what the Art Bus is able to do. The emphasis isn‘t just on birthday parties. The color scheme would be a darker different approach. The font would also lend itself to more crisp clean lines because of the colors.
"I Love Art"
Style Guide
The Art Bus website did not have a style guide to alter or follow. A brand color scheme and icons need to be made and consistently used throughout the new design. The color palette was chosen to reflect a bright, happy, party feeling.
Mobile Mockups
The Art Bus did not have a responsive design. There are no mobile mockups to compare for improved design. Each screen is dedicated to one purpose to improve user interaction and be intuitive. Starting with a mobile design first, makes sense because most people are on their mobile devices multiple times a day. Users will take a few minutes to look up something on their phones quickly. Therefore, Art Bus should have a web responsive design to be accessed on any platform at any time.
.png)
Iterations
Iterations done after user testing found the blue info buttons not an obvious link. They were changed to blue text to be a hyperlink instead.
Before
After
The party screens started with information circles for users to click and open up a sheet showing a picture of activity.
However, after some user testing it was discovered that No one clicked to find out more information. They did not see it as clickable and more information.
So blue hyperlinks were created since most users know this to mean it will take you to another place.
Before
After
Animation
Animations were added to give a dimension to design. The balloons were perfect for the party feel I was trying to achieve. Having the animation on the confirmation page creates a feeling of the task being completed.
Mockups for Multiple Breakpoints
Once high-fidelity mobile design was complete, I moved on to the larger breakpoints. I started with the 4 column grid on mobile then went to an 8 column on the tablet and a 12 column on the desktop/laptopwith 32pt margins and 20 pt gutter.
Prototype
Most Challenging
-
Starting from scratch to create a responsive design with nothing to compare or directly improve has been challenging.
-
Needing more user testing as the product evolves will continue to make it it more user friendly and intuitive.
-
Thinking in terms of breakpoints provides a new level of awareness to design then just a mobile app.
Next Steps
-
I need to continue research of sites that are used for booking as it is essential to improve the experience in my design.
-
I need to make sure to ask for user testing from potential clients to ensure a user-centered approach and continue iterating those improvements.
-
Continue to educate and study other sites and be aware of strategies used when dealing with a responsive design.
.png)