Redesigning the Breakaway Arts's website in order to create an efficient delightful way to increase the enrollment rate for their classes and improve navigation and general usability and explore a new visual design for the look & feel of the brand.

1. “Breakaway Arts”
Website Redesign Project
Client: Breakaway Arts is a hub for creativity & community collaboration by holding classes providing access to
studio space & equipments. Breakaway Arts has café for people to meet and chat.
Project overview: Redesigning the current website in order to create an efficient delightful way to increase the
enrollment rate for their classes and improve navigation and general usability and explore a new visual design for
the look & feel of the brand.
Challenges:
◆ Existing user experience was exceptionally poor.
◆ User’s needs, task and goals as well as best practices, were highly neglected.
Solution:
Assess current UX
◆ Heuristic evaluation of existing site.
◆ Usability analysis from defined use cases.
Make recommendations for improvements to User Experience and Site Information Architecture
What I did:
◆ User interview
◆ Created personas
◆ Heuristic evaluation
◆ Created site maps
◆ Sketches
◆ Created wireframes
◆ Interactive Prototype
◆ Usability Testing

2. User interview
I conducted five user interviews. Which helps me to target the right audiance. Interview provides me a qualitative
method of gathering evidence, data and information about the project that I’m working on.

3. Building Personas
I use a persona to represent a cluster of users who exhibit similar behavioral patterns. After figuring out who the
project audience is I normally build the personas This is similar to shaping a piece of clay. By doing this I'm creating
a clear image of who the user in our audience is. I normally include social and demographic characteristics, needs,
goals, and motivations.
Anna Johnson
Age: 31
Status: Married
Occupation: UX- Designer
Education: Two year college degree
Location: Rosemount
Bio: Anna like to do painting at home. She usually does painting once a week. She is interested
in taking the painting classes because she wants to improve her painting skills. She works in the
day time so she is interested in class Monday to Friday after 5 PM or any weekends.
“ I want to improve my painting skills
without having to spend a lot of
money and I am looking for the
class in small setting”
Goals:
• Improve Painting Skills
• Connect with peers with similar interest
•Find a studio with painting class
Frustation:
• Difficult to find the evening or weekend classes
• Art classes are expensive
•Difficult to find the small groups of classes.
Shawn Turek
Age: 38
Status: Married
Occupation: Freelance Artist
Education: Graduate
Location: Edina, MN
Goals:
•Advane his mosaic art skills
•Connect with peers with similar interest
•Find a studio with advance mosaic classes
Frustation:
• Difficult to find the advance mosaic classes
• Mosaic classes are very pricey
•Difficult to find small groups of students
“ I like to advance my current mosaic
art skills so I can start teaching classes
myself. I also like to connect with like
minded people.”
Bio: Shawn just recently moved to Minnesota. He is a freelance artist, who has a background in
Mosaic art, currently wants to improve his skills. So he could be giving mosaic art lessons to
others. He wants a studio with a friendly enviornment where he can connect with peers with
similar interest.

4. Heuristic evaluation
Heuristic evaluation is a form of usability inspection, where I evaluate whether each element of a user interface
follows a list of established usability heuristics.
Jakob Nielsen’s 10 Usability Heuristics
The following heuristics, developed by Jakob Nielsen’s, were used for this evolution.
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

5. Home Page
Finding 1: Site’s purpose is unclear
Description: When landing on the home page, it
is not immediately clear what the site is about. The
home page should explain who they are and what
they do – this information is “hidden” at the very
bottom of the page.
Heuristic: Visibility of system status
Suggestion: Move the information about “who
they are” and “what they do” at the top of the page.

6. Finding 2: Images don’t indicate that they are clickable
Description: It is not obvious that images are clickable. Images look static.
Heuristic: Visibility of system status
Suggestion: Visually indicate that images are clickable. For example, “Learn More link or Learn More button on
images”. Add some kind of interaction to images on hover – transparency, enlarging the images etc.
Finding 3: Out of 6, only five images are clickable
Description: All images look same there is not differentiation between the clickable or non-clickable images.
Heuristic: Consistency and standards
Suggestion: To avoid the confusion for user, visually differentiate the clickable images from the non-clickable once

7. Finding 5: 2 out of 6 images do not fall under Upcoming Events category
Description: In the upcoming events section, two images do not belong to the upcoming events.
Heuristic: Consistency and standards status
Suggestion: In upcoming section all the images should give information about the upcoming event.
Other Recommendation for “Home” page:
• All the upcoming events’ images should be of the same size.
• Breakaway Studio section on the Home page should move under “About Us” Page. It is not important to
have this information in home page.

8. • Pottery video on Home page should be removed since the pottery class no longer offer by the studio.
• Our Service title is not descriptive enough and is misleading. Gift Basket and the Artsy Party belong under to
studio. Exercise your creativity belong under classes.

9. Café Page
Finding 1: No indication of what page the user is currently on in the navigation.
Description: Navigation bar don’t indicate that currently, the user is on Café page.
Heuristic: Visibility of system status
Suggestion: In the navigation it should visual indicate what page is currently active, either use a box, underline the
page or make text bolder or bigger
Finding 2: Font is not consistent
Description: In menu section, heading “Hot Panini Sandwich” is in Italic and Bold. Other three headings are Regu-
lar and Bold
Heuristic: Consistency and standards status
Suggestion: Make all the heading same unless there is a reason to differentiate.

10. Finding 3: Form title “Café Gallery” is not descriptive
Description: Title “Café Gallery” is not descriptive enough. This section is for the users, who want to showcase
their work in “Breakaway’s Café”
Heuristic: Visibility of system status
Suggestion: Instead of “Café Gallery” change the title to “Showcase your work in our café” or “Showcase your
work in café”.
Finding 4: No indication of what fields are required
Description: Email address is the required information for the user. In form field, there is no asterisks mark for
email.
Heuristic: Error Prevention
Suggestion: Add the asterisks to the email label.

11. Finding 5: Form alignment
Description: Field labels are center align, which make harder for the user to quickly scan the form.
Heuristic: Consistency and standards status
Suggestion: To help users fill out the form as quick as possible, left- align the labels. The most common user
eye-scanning pattern are left to right “F-Pattern”.
Finding 5 Bug
Description: No attachment option is available in the form

12. Other Recommendation for “Cafe” page:
• “Breakaway” word is too repetitive. Change it to “Our café” or just “Café”.
• Look for more appealing visual design for Menu.
• The text of “Café Gallery” section is confusing (rewrite to make it more understandable).

13. • Create “Showcase your work” button for users, who want to showcase their work and add to the footer un-
derneath the subscription button.
Studio
Finding 1: No indication of what page the user is currently on in the navigation.
Description: Navigation bar don’t indicate that currently, the user is on Café page.
Heuristic: Visibility of system status
Suggestion: In the navigation it should visual indicate what page is currently active, either use a box, underline the
page or make text bolder or bigger.
Finding 2: No class schedule
Description: In classes section, there is no information about the class beside class title and instructor name.
Heuristic: Visibility of system status
Suggestion: Class schedule should be current and updated every month and should be visible and available to the
user.

14. Finding 4: Studio title doesn’t indicate that the classes can be found on the page
Description: Title of the page in the navigation is not descriptive enough and doesn’t imply that classes can be
found in that page.
Heuristic: Visibility of system status
Suggestion: The word “classes” should be accessible and easy to find since that is the word that user will
immediately look for. Place the word classes in the navigation.
Other Recommendation for “Studio ” page:
• Remove the “Café Gallery” section from studio page. This information already exists in café page.
• Breakaway is too repetitive. Change the heading “Breakaway Studio” in “Studio and Classes”

15. Events
Finding 1: No indication of what page the user is currently on in the navigation.
Description: Navigation bar don’t indicate that currently, the user is on Café page.
Heuristic: Visibility of system status
Suggestion: In the navigation it should visual indicate what page is currently active, either use a box, underline the
page or make text bolder or bigger.
Finding 2: Images don’t provide enough contexts about the event.
Description: Images don’t provide enough contexts about the event. No way for the user to find out more
information about the event.
Heuristic: Visibility of System status
Suggestion: Either include more information about the events in the images themselves or include learn more
buttons or links under the images. Or it could be a button that is the part of the images.

16. Finding 3: The dates of the events serve as headings for the events
Description: Having the dates of the events as heading is not the most useful and descriptive way to display the
events.
Heuristic: Visibility of System status
Suggestion: Replace the heading of the event with events title.
Finding 3: Not enough information about the event
Description: There is not enough information about the events and there is no way to find more information about
the events (no links, no button etc.)
Heuristic: Visibility of System status
Suggestion: Either include more information about the events in the images themselves or include learn more
buttons or links under the images. Or it could be a button that is the part of the images.
Other Recommendation for “Events” page:
• Include more information about the events, add links or buttons.

17. About Us
Finding 1: No indication of what page the user is currently on in the navigation.
Description: Navigation bar don’t indicate that currently, the user is on Café page.
Heuristic: Visibility of system status
Suggestion: In the navigation it should visual indicate what page is currently active, either use a box, underline the
page or make text bolder or bigger.
Finding 2: No Contact information in Membership section
Description: As they mention “call, email or stop in today to become a Founding Member!” But they don’t have
any contact information in that section.
Heuristic: Visibility of system status
Suggestion: Include that contact information.

18. Finding 4: Bug
Description: “Join Now” Button doesn’t work.
Finding 4: No information about the community partners
Description: It is not clear to the users who the community partners are. Partners name are hard to read and no
additional information about the partners included. There is no way to the user to learn more about the individual
partners.
Heuristic: Visibility of System Status
Suggestion: Make it more clear about who the partners are and include more information about them.

19. Other Recommendation for “About us” page:
• Change the Membership section heading “ Breakaway…Membership!” in something which make connection
with the user like “Want be become a member?”
• Heading of the page should match with the navigation title.

20. Contact Us
Finding 1: No indication of what page the user is currently on in the navigation.
Description: Navigation bar don’t indicate that currently, the user is on Café page.
Heuristic: Visibility of system status
Suggestion: In the navigation it should visual indicate what page is currently active, either use a box, underline the
page or make text bolder or bigger.
Finding 2: Form alignment
Description: Field labels are center align, which make harder for the user to quickly scan the form.
Heuristic: Consistency and standards status
Suggestion: To help users fill out the form as quick as possible, left- align the labels. The most common user
eye-scanning pattern is left to right “F-Pattern”.

21. Other Recommendation for “Contact us” page:
• Replace the main heading “Breakaway Arts” with “Let’s Get Together!” – the title is more inviting and
catchier.
• Keep in mind that users are all different. Also they have different preferences for getting in touch with you.
Some people might prefer to call, while others would rather connect with you via social media. Make sure your
contact sections offers different channels for your visitors to contact you.

22. Site map
Once I’ve completed the personas. I create the sitemap. A site map describes the different content pieces on the
site and the relationship between them. It is an important step of the user centered process as it ensure content is in
places users would expect to find it.

23. Wireframes (Low-Fidelity)
I use low- fidelity wireframes in order to have an early validation of the product saving time and making sure I’m not
producing wasteful design work. I can easily and efficiently make changes while including users feedback based on
their reactions.

24. Wireframes/Prototype
Wire framing is all about corralling ideas into a cohesive flow of pages with a clear, well-executed focus it creates
clarity of purpose, a streamlined set of features, and a focused, compelling way to communicate with users.

27. Usability Study
Purpose of usability testing is to check the usability of the design. To determine if a design is intuitive to users, I ask
users to complete various tasks and observe their interaction. Once the prototypes are tested to ensure usability,
iterate design based on the findings of usability.
Breakaway Arts (BAA) Usability Study Report
Overview
Redesigning the current Breakaway Arts website in order to create an efficient delightful way to increase the enroll-
ment rate for their classes and improve navigation and general usability.
Study Goals
• Evaluate the understanding of navigation items
• Evaluate the understanding of the site and its purpose
• Evaluate the understanding of the Cafe page
• Evaluate ease of class registration process
• Evaluate findability of classes
• Evaluate the understanding of the Community Partners section on the About Us page
• Evaluate the understanding of the Events page
• Evaluate the findability of BAA Membership sign-up
• Evaluate ease of membership sign-up process
Methodology
This usability testing was Qualitative, rather than Quantitative.
During the 35-minute sessions, participants were able to interact with the prototype to complete tasks and answered
questions.
Participants: A total of 6 participants took part in this study. All are interested in art classes. Some of them took art
class in past.

28. Study Goals & Main Takeaways

29. Recommendations:
Home page:
• Provide more information about what BAA is and what they do.
• Explain what BAA café is more clearly and how it is a part of BAA.
• Explain what classes BAA offers.
Café:
• Show some current promotional deals, which will keep the users more engaged.
Classes & Workshop
• Instead of “Classes & Workshops” use “Classes”. Because BAA doesn’t differentiate classes from workshops,
only classes being offered.
• Include the information for who the class is for in the Learn More section. Tell the user that this class is for
kids, adults or seniors
• User should have a choice to select more than one class before checkout. It saves the user’s time and avoids
the frustration.
• Once the user checks out, the confirmation message should have the information about their class - time
and date.
Events
• Provide clear information about where the events are held.
• Provide more information about the event, specifically admission.
About Us
• Make it more clear that BAA studio and cafe are part of one entity.
BAA Membership
• Placed the BAA membership button at the top of the page on each page. So it is visible to the user.

30. Annotated Wireframes