JORDAN MATTHEWS - DSGN 360

1 BACKGROUND SOLUTION PROCESS OUTCOME

Website Redesign & Case Study

2 3 4

The Client

1 BACKGROUND

The Problem

Founded in 1979, Bean’s Cafe is a homeless shelter located in the heart of Anchorage, Alaska. Their primary services provide meals and refuge for those in need. Bean’s Cafe is a non-profit volunteer-based organization founded on the belief that the ever-present threat of hunger can be mitigated one meal at a time, for the sake of those of all ages and backgrounds.

Bean’s Cafe is run on the continuous support of volunteers. The organization’s current website must project a clear and concise visual for those wishing to sign up and interact with the soup kitchen on their own terms. The current Bean’s Cafe website is too busy, clogged with information that is not immediately useful to the majority of users. The intent of this redesign is to adjust the dark color scheme to something light, reduce information clutter, and craft a clear navigation for the user to interact with the site with ease.

CURRENT WEBSITE

Business Goals

• Increase money donations

• Increase the number of consistent volunteers

• Increase website visitation

• Heighten awareness of the homeless population and those in need

Brand Goals

• Present a more professional organization to the public

• Create a visually engaging brand

• Adjust the color scheme to become visually appealing

• Lighten up the entire website in color and content organization

User Goals

• Discover ways and means to volunteer and help with ease

• Discover way and means to seek help from said website with ease

• Access locations and hours of operations clearly

• Find contact information quickly

Strategy Statement

Bean’s Cafe needs to redefine their organization as a concrete community-based soup kitchen. The organization is run on a foundation of a consistent stream of volunteer work. Due to this, new volunteers are a necessity to sustain Bean’s Cafe’s continued existence in the community. The website must communicate this effectively by clearly stating methods of volunteer sign-ups and interactions. Equally as important, Bean’s Cafe must define itself as being accessible to those in need. Individuals and families seeking assistance should easily identify the soup kitchen as a safe place of refuge and assistance. To achieve this, the website redesign will craft a clean and clear navigation, consistent footer with contact information, and a well-defined brand identity throughout.

Brand Ideology

Bean’s Cafe is an organization built upon the hands of the community, for the community. Its roots lie within the ideology that everyone is greeted with open arms.

2 SOLUTION

3 PROCESS

Usability Testing: Current Website

The following data resembles the initial usability tests conducted. These tests help gather a further understanding in which the organization’s current website can be altered to make it a more effective site.

Key

User 1 User 2 User 3

Site load time is reasonable

Type size/spacing is easy to read

Logo is prominently placed

Homepage is digestible in 5 seconds

Main navigation is easily identifiable

Navigation is clear and concise

Major headings are clear and descriptive

URLs and page titles are explanatory

Styles and colors are consistent

Overall website was easy to understand

Website was error free on all viewports

Rating: 1 2 3

Bellingham Food Bank

• Clean logo, relates to the organization

• Scrolling image banner modernizes the website design and adds to the site’s apparent credibility

Issaquah Food & Clothing Bank

• Website exudes “freshness”

• Very first nav button leads to available resources - immediate action

• Non-threatening color scheme

Feeding America

• Clear navigation

• Immediate “How to Donate” info and button link

• Consistent colors and web-responsive

Food Recovery Network

• Cool video that exists on the very first page you see

• No clutter in this design; there’s more breathing room at the top of the page when compared to the other websites

St. Joe’s Soup Kitchen

• Aesthetically nice to look at but almost to a fault; reminiscent of a gourmet cafe

• Design is super clean and easy to read through, although the overall web- responsiveness is lacking

Lynwood Food Bank

• A substantial scrolling image reel at the top of the site

• I like the subtle colors along with a bolder image here - watch out for the readability of text over image though!

Competitor Research

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

1. Immediate understanding of what type of organization

this client is

2. Clear access to donation link from those who wish to

help and donate money

What top 2 future business goals do you want to achieve with your new website? (long-term)

1. Continuous usage of the site by volunteers

2. Creation of a working calendar signup sheet/form

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

Volunteers will be using this site to see how they can help out in

the soup kitchen. They will be looking for sign-up sheets and times,

donation pages, and requirements. Those in need will be using the site

to see hours, requirements, and information about locations.

List any requirements or must-have’s for the new website:

1. Clean and clear navigation throughout

2. The organization’s identity needs to be obvious (the

title “Bean’s Cafe” could be seen as a normal cafe if

not clearly stated otherwise)

3. New color palette (current colors are too heavy)

4. Donation link is the highlight of the homepage

5. Hours and locations clearly exists in the footer

Three brand values:

1. Inclusivity

2. Hospitality

3. Credibility

Personality traits for this brand:

1. Warm

2. Inviting

3. Pleasant

4. Uplifting

What are the current strengths?

1. Includes a compelling “vision and mission” blurb about what the

soup kitchen does to help

2. Has working Instagram, Facebook, and Twitter links in their nav

3. The nav bar includes everything that target audiences will be

searching for

What are the current challenges?

1. There’s a lot of information to break down into a cleaner and

less cluttered design

2. The name of the organization doesn’t directly relate to its

identity (you can’t change the name for the client)

3. How to remove some of the nav bar items / condense

What are the current threats?

1. Rebranding has the potential to confuse the viewers (their

familiarity with Beans Cafe could be threatened)

2. Is there someone within the volunteer group that is able to

maintain the website?

Brainstorming

Website Questionnaire Brand Questionnaire

Scot Analysis

Lily YoungLocal Anchorage resident

Lily has been volunteering at the soup kitchen since she was 19 years old. She lives with her family just outside of Anchorage. Lily has a passion for helping others; she has made memorable friendships within the soup kitchen community. Her daily routine consists of going to work at the dentist office until 5pm, then volunteering afterwards in the evening.

Age: 31

Occupation: Dental Hygienist

Residence: Anchorage, Alaska

Relationships: Lives with husband and two children

Lily hopes to assist in rallying in more volunteers at Bean’s Cafe. She has called Anchorage home for her entire life and wants to continuously promote a caring environment in her hometown.

• Dentistry

• Avid knitter

• Proficient with a mac and iPad

Bio Stats

Tech + SkillsGoals

User Personas

Will ShipwayMember of Alaska’s Homeless Community

Will is a local Anchorage resident who frequents Bean’s Cafe as a means of living. Will is homeless and often seeks help at the soup kitchen and socialize among other homeless individuals and volunteers.Will’s daily routine involves walking his dog near the city parks and playing his guitar for money from passerby’s.

Age: 67

Occupation: N/A

Residence: Anchorage, Alaska

Relationships: Lives with his partner Erick and their

dog Rusty

Will wishes to raise enough money to begin to build a home for his small family. He is thankful for all the help that the soup kitchen has done for him, but he wishes to one day give back in the same way as a volunteer for those in need.

• Guitar

• Proficient Fisherman

• Handy with building and construction

• Familiar with desktop computers

Bio Stats

Tech + SkillsGoals

User Personas

Paul KumarTraveling Student

Paul is visiting Anchorage for 3 months as he studies to be an ecologist. He loves to travel and visit new places. He has traveled to over 6 countries in his lifetime and is hoping to triple that number eventually.

Age: 23

Occupation: Student

Residence: Raleigh, North Carolina

Relationships: Lives with 3 other roommates back at

school in NC

During his stay in Alaska, Paul wishes to volunteer at local non-profits. He doesn’t have much time to spare in between his field studies for school, so he is looking for some odd hours.

• Familiar with PC, Mac, iPad, and various tablets

• Talented tennis player

• Pro at trivia

Bio Stats

Tech + SkillsGoals

User Personas

Moodboard

Home

About

Footer

Donate

Volunteer

Get Help

Contact

• Hours

• Contact Us

• Locations

• History

• Mission

Navigatio

n

• E-mails

• Addresses

Original Website Redesign

Site Map

Wireframes

Thought Process

With these first redesigns, the intention was to create a color-block website system for the user to scroll through with ease. Ultimately, this design did not do enough to make a significant improvement on the original site.

Initial Peer Response

Pros:

1. Photography is relatable to the site2. Some of the colors work well, the green was the favorite3. There is a good amount of text on the homepage of the site

Cons:

1. Too much empty space up by the nav2. The colors do not work effectively together, especially when they are a major part of the design3. The volunteer button looks like out- dated User Interface4. The alignment of the color boxes is overall off

First Iterations

Usability Testing: Redesign

Page Titles on pages are clear

Major headings within pages are clear and descriptive

Links and Buttons are consistent and clear

Styles and colorsare reflective of brand/client

Overall typography

Overall Layout

Appropriate content on each page

Responsive Translation between desktop and mobile

Overall website was easy to understand

Rating: 1 2 3

Notes:After collecting this data, the weakest link seems to be the translation between the desktop and mobile design. To remedy this, I chose to go forward with creating full-page spreads for the mobile version, similar to the desktop version.

4 OUTCOME

Final DesignI decided to break up the structure of the website by using wave design elements. By utilizing these elements in place of the color-blocking technique, the design

The navigation bar is stationary and remains at the top of the site at all times. By clicking each nav link, the page initiaets an auto-scroll to arrive at the destination.

Final Design: Homepage

DesktopThe homepage features each element of the navigation bar.

The user has the option to scroll manually or click on “About,

Volunteer, Get Help, Donate, or Contact”. This will allow the

user to automatically scroll to that destination. Each panel

spans 100% of the webpage.

MobileThe nav bar for the

mobile versions houses a

hamburger menu - clicking

on this icon will reveal a

full-page menu including all

of the navigation links.

Final Design: Secondary Pages

PrototypePlease click the following link to view the prototype:

https://xd.adobe.com/view/461350c5-69e2-45d4-b285-5dcd1243cc73-1340/?fullscreen

Reflection

Challenges

Future Goals

Towards the middle of this redesign process, I found myself a bit stuck on the overall concept of my initial iterations. This put a damper on my progress in coming up with something that I could see as being a solid redesign of the site. Paying close attention to the feedback ultimately helped me arrive at a new design.

The simplicity of the redesign for this site was something that I felt needed to be the top priority in the result. However, the site has a lot of room for adding some more complex elements, like working calendars and sign-up sheets. There is room for making the site even more user-friendly in that respect.

Take-Aways

I learned the value in not settling for a design you may have thought was going to work out successfully in the end. Feedback from active users is also vital in a website redesign project such as this one. Harboring a variety of different perspectives can result in crafting a new design that is stronger.

Thank you!