Bellingham Metal Arts Guild

Bellingham Metal Arts Guild

Website Redesign Case StudyIsabel Barni - Winter 2021

01

Background

Client:

Bellingham Metal Arts Guild (BMAG) is a non-profit organization aiming to provide a space for jewelry and metalworking. They host work-shops and classes to learn different jewelry making skills and also allow members of the guild to purchase studio time to independantly work on personal projects.

Problem:

Their current website is outdated and confus-ing. There are too many options, not enough visual clues to suggest what their purpose is, and the amount of text per page feels over-whelming. They need a site redesign to make their site more usable and to give their organi-zation a modern aesthetic update.

BMAG Site RedesignBackground Research Process Solution Reflection


Current Website:

The home page closely resembles the rest of the pages on the site, which can get very confusing. There is too much text and almost no iden-tity; the colors are bland, and the banner image isn’t obvious enough to make it clear what the site is for. The logo is nowhere to be found, and the full name of the organization is also missing.

02

Research

LAWLESS FORGESimple and clean, the important information is what is listed first. Donations are placed separately, logo is front and center without being distracting. The color scheme is simple but effective and they display their information professionally.

HAZARD FACTORYThe website has a definite identity; you get a vibe for the place im-mediately. They use im-ages that both show the product and excite the viewer. The subheader is descriptive enough to tell the viewer what Hazard Factory is about.

BOULDER SCHOOL OF METALSComment section is interestingly displayed. There are no distrac-tions from the text (other than the image in the background). Information is organized neatly.

BALTIMORE JEWELRY CENTERInteresting original graphics that represent the program that they are selling. A little overly plain/clean for the subject matter, but does appear mature.


Competitive AnalysisI looked into similar sites and determined what did and didn’t work about them. This helped me figure out what to do for my redesign.

ASSEMBLE MAKER-SPACEUnique compared to other competitors. Gem-like background texture and large logo immedi-ately catches attention. Subheader gives brief description. Nav bar is simple but has all of the information that a user would need.

ORENDAGreat banner; simple logo, well spaced out navigation, clean and easily maneuvered. Images used in the site are high quality and arranged nicely. Mis-sion statement shows up quickly to explain what they are trying to accomplish.

SAMANTHA SLATERVery earthy color scheme is nice, but a bit too feminine rather than neutral. Logo has a nice placement, use of geometric shapes is interesting, especially contrasting the sketchy illustration.

LUCY WALKERClean, simple design. Easy on the eyes and easy to navigate thanks to the labels and lack of clutter.


Competitive Analysis

THE STEEL YARDBanner “My Account” emblem is original, which is a nice detail. Good color scheme for the subject matter, site gets into the main pur-pose of the site quickly and easily.

THE HOT SPOTClassy but maintains a very slight masculinity to it. Logo is very representative. Products that they sell feel as if they would be high quality based on the sites’ aesthetic.

STUDIO JSDBecause this site ad-vertises jewelry making instead of welding/metal working, it feels more clean and delicate than some of the other options. Nice navigation aesthetic and heirarchy. Feels very professional.


Competitive Analysis

What top 2 current business goals do you want to achieve with the website?

1. Ease of access to all information and gener-al reorganization2. Create a logical information heirarchy to seamlessly move users through the site.

What top 2 future business goals do you want to achieve with the website?

1. Longer and more positive viewer engagement. Have more people return.2. More workshop/classes booked

What do you think your customers first want to see when they visit the site?

What the organization can offer them and why they want it.

Who are the different user groups that would be using this site? And for what reasons?

Creators: they want to try a new craftGroups: a pary of people trying something new together. Maybe for a part?Coworkers: Team building exercises!Semi-Expereinced: Already know how, but want the studio space.


Questionnaire

List any requirements or must-haves for the new website.

- Better organization- First thing shouldn’t be donations- Fresher color scheme- Dynamic layouts- Condense info into sections- Logo/Title movement- Use of images- A bit less text- Add more excitement- Give them an identity through design

What are the current strengths?

1. Logo has potential for interesting branding2. Their navigation isn’t too large3. The jewelry images can be utilized

What are the challenges?

1. There’s a lot of different information to both organize and make easily accessible2. They want to emphasize donations but can’t seem desperate3. Capturing the proper classy-yet-rugged aes-thetic of a jewelry workshop.


Questionnaire

What are the current opportunities?

1. There are many artists who could be inter-ested (if the aesthetic is right)2. Some of the images of products on the site are interesting.3. The logo isn’t horrible. It can be used as a design element/tool.

What values do you want people to attribute to the representation of your brand?

- Creativity- Quality- Perseverance- Education

List 4-6 personality traits for this brand.

- Rugged- Modern- Tough- Reliable- Warm


Questionnaire

What are the current threats?

1. Covid has hit them hard2. While there are artists in Bellingham, jewel-ry making is pretty niche3. There are other, more popular crafting workshops in Bellingham already.


Current Wireframe

I sketched out how two pages of the current site are laid out. The wire-frame on the left is the home page and the wireframe on the right is the page of listed courses.

I also bulleted out the navigation as it currently is.


Usability Testing

Site load time

Type sizing/spacing

Logo placement

Digestability

Clear task paths

Navigation location

Navigation clarity

Heading clarity

Page title clarity

Style consistency

Overall site clarity

Any site errors

Navigation consistency

Several of my peers tested the original site by attempting to complete assigned tasks. Afterwards, they rated the following aspects from 1-3:


Usability Test Findings:

My peers, when testing the original site, had a large amount of trouble completing their des-ignated tasks (which mainly consisted of find-ing the name of the organization and booking courses). They got extremely confused trying to understand the difference between the Complete Course Catalog (all classes they’ve held in history, whether or not they’re avail-able now) and the currently offered courses. Many tried to sign up for courses that didn’t exist anymore, or wouldn’t be offered for many months. They also commented on the ugliness of the existing tables and information layout.

Main Fixes:

1. Information heirarchy2. Differentiate between current and past course offers3. Identity system is bland and unappealing

03

Process


Business Goals:

- Establish what their purpose is- Relate with their audience- Catch peoples attention- Sell more memberships/courses- Create a relevant brand/aesthetic- Stand out from its competitors- Promote company image- Communicate with and inform viewers.- Allow customers to buy things easily

Brand Goals:

- Create a sense of belonging among users- Make the user trust the brand/products that are provided- Clearly state what the products and services are- To be easily recognizable as that specific company

User Goals:

- Sign up quickly and easily- Know exactly what I’m getting out of a membership- Easily maneuver through the website- Feel proud for being associated with the company- Find information easily- Know who to contact with questions- See what groups are available to join that are associated with the company


Strategy Statement:

The current site for Bellingham Metal Arts Guild is bland, outdated, and confusing to ma-neuver. If the site were able to attract and then keep the attention of its userbase, they would have more user engagement. This would translate to a larger amount of membership registrations and course purchases from a variety of Bellingham residents. The majority of the userbase includes adult women ranging from ages 30 to 60 who are searching out a new hobby and artform that is profitable, styl-ish, and surrounded by a positive community.

Rhett DavisComputer Science Graduate

“Creating things is soothing to me. It’s when I can forget about my worries and really be myself.”

Bellingham, WA

Goals:

Behavior:

Skills:

Relationships:

Dislikes:

To meet new people, hone his skills to an impressive level, and to find an outlet for his creative expression.

Currently in the beginning phases of his career. He has always been creative but has never tried creating in a group setting. He enjoys playing video games in his spare time, along with drawing. He owns a laptop, an iPad, an iPhone, and a desktop computer.

Science, creative thinking, math, programming

Single, but has a small group of friends that he mainly talks with online.

Social media, partying, cooking


PersonasI made three hypothetical users for the new site. I based what they are like off of who currently follows BMAG on Facebook, along with demographics research.

Ashley OwensStay-At-Home Mom

“I just want something that’s for me; not parent teacher meetings or soccer practice chauffering.”

Bellingham, WA

Goals:

Behavior:

Skills:

Relationships:

Dislikes:

Find a new hobby, have a creative outlet, meeting new people, finding a place to decompress from family life, and to potentially make some side money.

As she’s chosen to be a stay-at-home mother, her daily life is very structured. Every Thursday, she takes her kids to soccer practice. She takes care of getting them to school on time and in general helps manage the family. She hasn’t been able to have many nights just for herself lately. She owns an iPhone and a laptop.

Emotional intelligence, organization, crafting, cooking

Ashley has been married for about eight years and has two kids. One is seven, the other is five. She is casually aquainted with her childrens’ friends parents.

Black coffee, children television shows, chore days


Personas

Tracy JohnsonRecent Empty-Nester

“A sense of belonging is important, so when I find myself not knowing what to do, I search out that sense of belonging.”

Bellingham, WA

Goals:

Behavior:

Skills:

Relationships:

Dislikes:

Spend time productively, find a new skill, join a decent community, meet new people, have something to look forward to, add structure to life, and make side money.

Tracy’s children have begun moving out to college and to start their adult lives. She isn’t sure exactly what to do with all of the extra time that came with this; most of what she does now is catch up on television shows and has worked on baking more. She’s beginning to feel a bit cooped up. She owns a laptop and an iPhone.

Baking, communication, friendliness, art

Tracy is a divorced mother of three, all of which have re-cently moved out. She is friendly with her neighbors and has one best friend that she’s had for twenty years.

Small dogs, new music, tight clothes


Personas


Home Page

Membership Courses Calendar About Contact

Join Us

Studio Use

My Account

Currently Offered

Past Courses

Gallery

Mission

Board of DirectorsInstructors

Newsletter

Terms and Policies

Email Form

New Navigation SystemI simplified down the navigation system to something that is a bit more comprehensive and easy to use.

Moodboard 1:Delicate and Organic


Moodboard 2:Dark and Professional


Wireframe Sketches

I took the different moodboards, along with some inspiration sites, and made a variety of layouts for the potential final home page. They play with ban-ner images and different information, along with a variety of different logo placements.


Wireframe Sketches

I then did the same sketching process, but for an Offered Courses page in-stead of a home page.



Concept 1Next, I tried out three different aesthetic directions. This first one is leaning heavily into a dark and artistic vibe.

Concept 2The second direction is much more chic and delicate.


Concept 3The third is the lightest and most minimalist of them all.


04

Process


Final Design

Ultimately, I decided to go with the first concept. I simplified the information that was presented on the home page so that the most important information and tasks were clear and one of the first things that you see.

The final aesthetic is very clean, minimal, and warm.


Final Home Page

Rather than finding an image, I decided to find icons that represent what you can make with their classes. On the banner, I included a button that leads to booking classes and to the donations page. From the brief self description, I linked their newsletter.


Final Secondary Page

For the secondary page, I chose to de-sign the Current Courses page. This is where all of the classes that users can enroll in are found.

I put similar classes together and made sure that the first one offered is the beginners course. In order to learn detailed information, you click a button to go to the tertiary page.

Final Tertiary Page

Finally, for the tertiary page, I de-signed the detailed information page for the Beginner’s Jewelry course.

There’s detailed information to the right of the main image, and a de-scription that falls below. Finally, there are the two class times for that course that you can choose to sign up for.



New Design Usability Testing

Site load time

Type sizing/spacing

Logo placement

Digestability

Clear task paths

Navigation location

Navigation clarity

Heading clarity

Page title clarity

Style consistency

Overall site clarity

Any site errors

Navigation consistency

Now that I have redesigned the site, I got another group of peers to review the website. Many of the problems have been solved!

04

Reflection


Reflection:

Overall, I feel that the site turned out cleanly and professionally. The information is effectively condensed and simplified, and the client has a much stronger brand identity. One of my biggest challenges was balancing an interesting and engaging design with cleanliness and professionalism. It was also interesting learning a new program like Figma, as I had never used it before. If I were to go through the pro-cess again (or if I had more time), I would make a prototype that has animated buttons that glow yellow as you hover over them.

I also struggled with making sure the proper information was first on the page rather than last. There are so many different variables in this specific site, so I had trouble prioritizing them. In the end, I do feel that I figured most of these issues out and am happy with the final product.

Prototype Link: https://invis.io/K2103NMXDV8R#/443917327_Home

Bellingham Metal Arts Guild

Documents

Transcript of Bellingham Metal Arts Guild