Phase 3:
PROTOTYPE + TEST
Low-fidelity Wireframes
Wireframing is an important tool for laying out the structure and functionality of a digital product — and it is especially useful to start wireframing before crafting the content and visual design. With Sari’s user journey in mind and the sitemap as my guide, I began sketching the landing page and subpages by hand to experiment with ideas before getting caught up with details.
Responsive Wireframes
The next series of designs were created digitally, using Sketch, and showcased additional elements, including headings, text, and titles. My research and design discoveries informed the structure and preliminary content of these Mid Fidelity Wireframes. To create a Responsive Design, I modified the layout of a landing page design to display on desktop, tablet, and mobile screens.
Mid Fidelity Wireframes & Prototype
It is beneficial to identify problems with a design early on, and the best way to do this is to get feedback from users. I achieved this by creating an interactive prototype, using Invision, to simulate common user flows. By testing the site in mid fidelity form - with limited functionality and grayscale - the user was more likely to focus on the organization, layout, and navigation rather than stylistic elements of the website.
Usability Testing
Performing Usability Testing at this stage allowed me to observe real time interactions with the design and witness the users’ reactions firsthand. Feedback from user testing would expose the most important revisions to focus on in my next iteration. In summary my objectives were to:
Identify features that are confusing or frustrating to the user
Test how easily the user can navigate the site
Test how easily the user can complete the selected task
Gather feedback on how pleasing the user finds the layout and visual design
Method - Moderated, Think Aloud
Participants were given different scenarios and tasks to perform and express out loud what the experience was like along the way. I observed their actions remotely via Zoom videoconferencing. By sharing their screens, I was able to view their behaviors in real time.
Usability testing participants consisted of:
4 participants: 3 females, 1 male, ages 39-55
4 out 5 were art teachers, artists and/or designers
3 were very familiar with Barnsdall Arts as teachers (2) and long-time student (1)
Affinity Map
An Affinity Map helps you sort through and group qualitative data by theme. Using this technique made it easier for me to analyze and extract insights and revisions that I would prioritize in my next iteration, which are outlined below.
User Recommendations
Pattern 1: Scrolling
“I want what I want above the fold!"
“It needs arrows to let me know to scroll down.”
Pattern: Users do not scroll down the down intuitively
Insight: It must be clear to users to scroll down the page for more information.
Recommendation: Include a signifier arrow to indicate and direct users to scroll down the page.
Pattern 2: Navigation
“Are Family and Community tabs the same thing?”
“I thought family workshops would be under Events.”
Pattern: 3 out of 4 users went to the wrong tab to find desired information at least once.
Insight: Navigation must be made clear to allow users to find what they’re looking for with ease.
Recommendation: Rename navigation categories to be less ambiguous such as differentiating between family workshops and community programs/events
Pattern 3: Call to Action
“I want buttons at the top to take me where I want to go.”
“I thought I’d get to a sign up page when I clicked the button.”
Pattern: Users found some of the labeling and the placement of links and buttons confusing.
Insight: Users want to know they’ll find what they’re looking for when they “click.”
Recommendation: Revise the placement of buttons and links in the identified problem spots.
Priority Revisions
I implemented the recommendations across the site, which are illustrated in the before and after shots of the landing page below.
Branding
Barnsdall specified that they wanted to keep their current logo, so it was up to me to come up with a branding strategy and style that would compliment this existing element. Fortunately the client was receptive to suggestions based on the user insights I had gathered through my research. I translated these insights into brand attributes that I felt encompassed Barnsdall’s personality and culture:
Welcoming
Collaboration
Creativity
Connection
Happiness
To ensure Barnsdall’s brand attributes were captured throughout the website’s visual design, I applied principles of color theory and typeface to generate a color palette and typography that would complement the logo. All of these visual design elements were combined to create a style tile and UI kit, which includes UI features such as buttons and layout. This is an important asset for the organization to have on hand because it lays out all of the key components in one place so that anyone who touches the design in the future will have guidelines to follow.
UI Kit
Final Product
Now that I had determined the visual design of the user interface, I created a set of high fidelity wireframes and an updated interactive prototype. The result was a website that exuded the organization’s brand attributes and incorporated the feedback from the user research and testing to create a more professional-looking, organized, and user-centered website that reflects the educational excellence Barnsdall Arts provides to the community.
Hi Fidelity Wireframes
(sample)
Reflection & Next Steps
It rapidly became clear that although the impetus for this project was a school assignment, the Barnsdall Arts staff was ready and eager for the new website design to become a reality. To have such an invested client was very exciting, but I was concerned about the possibility that if they got too involved it might slow down my deliverables and influence my design methodology. I was able to balance my aggressive school timeline and simultaneously manage their expectations through clear, consistent communication, which garnered their trust in the process.
To keep the clients engaged, I presented my research findings, which they found illuminating, but I let them know that I would have to complete my process and deliver a prototype before eliciting their feedback. I waited until I created the final hi fidelity prototype, informed by usability testing, to make a client presentation.
Even though I would’ve liked to help with their content strategy and edit their text (too much copy!), it was outside of my scope for this project.
My next steps would be:
Gather final copy from the organization’s staff to replace the placeholder language
Garner approval on the design from the organization’s Board and get the go-ahead to design the additional pages
Design the additional pages, including responsive screens to make the design “developer-ready”
Hand off the design to a web designer, providing ongoing support as needed