Assess the overall UX of Brooklyn Brainery's existing website and provide recommendations and suggestions for new information architecture, navigation, and overall brand.
I worked as a UX Researcher, UI Designer, illustrator, and brand designer.
The Brooklyn Brainery is a community-focused business that offers affordable, approachable classes to adults in-person and online. Due to the pandemic, their online offerings are rapidly increasing. However, the information architecture of their website struggles on many levels. Through research and testing I discovered many aspects that could be adjusted to improve the user experience and business performance.
To begin the assessment process, I took a look at the existing website of Brooklyn Brainery. The website is packed with information, however the way it's presented is underwhelming. For such a friendly brand that encourages users to try new things, it has a relatively neutral visual design. The lack of clarity and abundance of links on the front page (which is actually their blog) is also confusing and feels cluttered.
My intuition told me that the website needed some work, but this was only a hypothesis. I needed to reach out to members of their target audience (adults looking to learn new skills and hobbies) to see what they thought about Brainery's website design.
These two quotes were very telling and helped to confirm my intuition. In addition to these individuals, I compiled the following metrics from the ten participants I spoke to.
To gain scope of the marketplace, I compared Brooklyn Brainery's website to its competitors. I assessed the visual design, navigation, content, and interaction of Coursera, Skillshare, Craft Jam, Course Horse, and The Art Studio NYC. This mix of successful global companies and direct local competition allowed me to determine Brainery's position in the e-learning marketplace.
When compared to Coursehorse and Skillshare, two of Brooklyn Brainery's biggest competitors, Brooklyn Brainery's weaknesses in Clarity, Finability, Credibility, and overall delight became very apparent. However, Brainery's uniquely hyper-communicative could be leveraged as a strength.
The heuristics Brainery struggled with most could be improved by a restructuring of the information architecture, visual design, and integration of search functionality. However, these weaknesses were still assumptions. Further testing needed to be conducted to confirm my analysis.
A closed card study and an open card study were conducted with five participants respectively. The closed study had pre-prepared categories and the open study allowed participants to create categories themselves.
By having participants sort pages in the existing navigation of Brooklyn Brainery, I was able to gain insight one where they'd expect to find certain information.
The graph above shows the results of the closed card sort. The percentages indicate how often the cards were sorted into the corresponding groups. Leveraging these established groups informed the construction of more intuitive information architecture for the proposed navigation of the website.
Tree testing presents the participant with a sample navigation menu which they navigate to fulfil assigned tasks. Observing their pathways to task completion helped assess the information hierarchy of the current website.
The graphs above show that some users struggled with the second and third task. In addition to this hard data, we asked the participants thoughts and opinions of the tasks they were given.
Overall, users had a hard time navigating through the website, often hitting dead ends and clicking at random. Users regularly expressed confusion and frustration while taking the test, occasionally leading them choose answers they weren’t confident in.
This confirms that the current navigation offered on Brooklyn Brainery is highly unintuitive and difficult for users to navigate.
We asked our participants to use the navigation provided to complete the following tasks:
Task #1: Book a class
Task #2: Find the location
Task #3: Cancel the booking
The creation of a user flow allows us to visualize the path taken by a prototypical user on a website or app to complete a task. The following user flow illustrates a user booking a class through Brooklyn Brainery.
Most notably, the complete lack of search filtration or groupings of classes asks the user to commit significant time to finding a class. There's also no indication of fully booked classes, and no ability to look for classes on particular days leading to a frustrating, tedious process.
Brookyln Brainery's existing website
To get an overview of the existing site, I created a site map of Brooklyn Brainery's website
The highlighted red areas of the site map above are some of the key weaknesses of Brooklyn Brainery's current website.
1. Classes - The lack of search functionality when looking for a class is a source of frustration for many users and hinders the heuristic of controllability.
Solution: Seperate types of classes into categories, allow users to search by date, and add other search functionalities
2. Private Classes - The footer is self-described as "terribly important links". These links were not only largely disregarded by users of the website, when asked to locate the pages, several were completely unable to find them.
Solution: Incorporate 'terribly important links' more fully into the navigation of the site through a restructuring of the information architecture
3. Books - While this area of the website had an abundance of resources, it feels out of place and confusing.
Solution: Nest 'Books' within a larger category of learning materials (and group it with other resources scattered throughout the website) to give it more credibility.
4. Floating links - Links to several pages seem to have no clear homes. They float around different pages and are neither noticeable nor effective.
Solution: Restructure the information architecture to more fully incorporate these pages.
Leveraging the data from my research to construct recommendations, I redesigned the information architecture as illustrated in this revised site map.
The classes page is particularly problematic in the existing website. With no clear seperation of categories of classes. There was also no way to search based on date nor anyway to view upcoming classes.
The classes page is now divided into two secondary navigation options (Learn and Teach). The revised option categorizes classes by three distinct types - Arts and Crafts, Food and Drink, Career and Life. These can be clearly found on particular dates with the aid of accompanying calendars. Users can also browse through all classes or use the search function to find particular classes.
Leveraging the data from my research to construct recommendations, I incorporated the new branding and applied the revised information architecture to a new navigation scheme.
The existing home page is actually Brooklyn Brainery's blog. While this is informative, the lack of introduction was confusing for first time users of the site.
The primary navigation is now located to the right and left of the central rebranded logo. The blog has been relocated to its own page of the website, allowing users to have a succinct introduction to the Brainery, browse featured classes, and be inspired through a carousel of motivational quotes about learning.
To increase the heuristic of delight, a rebranding of Brooklyn Brainery was a priority. Our initial usability participants found the existing branding dull and inconsistent. Rebranding the website with a punch of color and graphic illustrations would be suitable for Brooklyn Brainery's friendly, approachable voice.
The existing booking page has a CTA to book the class (the blue image that says "just click to sign up!") that was easily overlooked by usability participants.
Some of the most crucial information of Brooklyn Brainery's website is available on this page, but it lacks clear organization.
The revised version of the booking page follows a more traditional ecommerce format. It also allows users to select the date of the course (users aren't readily able to see their options in the existing site).
Introducing secondary navigation (available when the user hovers or clicks on 'about us') allows them to easily navigate this section of the website.