Dallas kosher

CASE STUDY

BACKGROUND

Dallas Kosher (DK) is a nonprofit organization that provides quality kosher supervision and certification for demanding consumers and companies in their region and beyond. With a legacy of over 50 years, DK is the oldest kosher certification agency in the southwest. They began a website redesign last year and need a finished user friendly responsive web design.

MY PROCESS: RESEARCH, SITEMAPS, SKETCHING, WIREFRAMES, INTERACTION DESIGN, PROTOTYPING, UI DESIGN, USABILITY TESTING

TOOLS USED: SKETCH, PHOTOSHOP, INDESIGN, ILLUSTRATOR, INVISION

TIME FRAME: 74 HOURS

01 RESEARCH

This is the stage where we attempt to understand our users at a deeply human level. This means we go beyond logic and rational behavior. To gain empathy, we need to understand the emotional, social and irrational drivers that affect the way our users behave. To gain a better understanding of the nonprofit world, I completed in person interviews, online surveys, and competitive analysis. These methodologies help highlight the current trends and any gaps in the designs.

User Needs

Simple check out process
Great product page
Responsive design
Free shipping and returns
Customer reviews

Paint Points

Website Accounts
Remembering usernames and passwords

Scrolling, custom to each device

RESEARCH METHODOLOGIES

1

SECONDARY

RESEARCH

This method will give us insight into clothing e-commerce websites and human behavior visuals, colors, designs that motivate and attract customers. As well as trends in the market and what has already been discovered.

2

COMPETITIVE

ANALYSIS

Seeing what competitive websites are doing, what works for them, will give us a guide on how to set up a good base for the website.

3

PERSONAL

INTERVIEWS

Help gain empathy on the customers and understand their personal motivations for online vs in-store and online shopping pain points.

Research Findings:

Donating online for most websites is a simple process. Users prefer to enter the minimum information possible and keep to one page.

Especially for a nonprofit, having lots of information about who they are and what they do, and even media of them in action is very valuable to the users. Additional information that is connected to the organization helpful tips, community info, etc, is great for bringing in more site traffic.

In general a well designed site gives the organization better credibility and a better name. Social media is also in important for nonprofits who are looking to reach out.

After conducting my user interviews, I started with an empathy map to synthesize my findings. I used different colored sticky notes for each participant and sorted key insights that stood out to me into five categories: doing, seeing, hearing, pains & gains, thinking & feeling. This really helped identify user needs, pains, and wants. I then went on to create provisional personas and a user persona based on a common DK website user.

STICKY NOTE

PROCESS

EMPATHY

MAP

PERSONA

PROVISIONAL PERSONAS

Local member

Age 35

Goals

- Pay member fee online so don’t have to call the office or send check

- Quick contact info

- Keep up with news and updates

Pains

- Can’t view past e-blasts online

- No social networking links online

- Too many steps to reach contact page

- Webpage is not responsive

PROVISIONAL PERSONAS

Commercial Account

Age 45

Goals

- Learn about kosher and the organization/what they do

- Access necessary forms instead of having them emailed separately

Pains

- Articles aren’t engaging and hard to navigate to. Having important sentences stand out in the website would be helpful

- Interested in kosher stats to understand more

- Can’t download forms online when applying to be kosher

PROVISIONAL PERSONAS

PATRON

Age 60

Goals

- Company transparency so he can see where his money is going

- Easy access to donate large amounts

- Easy to find contact information, usually in touch with specific employees

- He’d like to feel involved in the organization’s successes and updates

Pains

- He has a hard time to remembering to donate each month

- Currently there are no numbers or charts about the organization’s expenses

- One phone number to the secretary when having a list of each employee would be easy to call directly

02 iNFORMATION ARCHITECTURE

Information Architecture (IA) uses the metaphor of architecture because it's meant to help us better organize "places made of information." The work of information architecture requires identifying all types of content within a product, sorting them, and then mapping them out in a way that feels familiar to the user.

DALLAS KOSHER SITEMAP

After figuring out whom I was designing for and delving into the user’s needs, I went to organize the content of the website with a sitemap.

03 iNteraction design

Interaction design is a major component of the user experience. It incorporates information architecture and usability to define how a product will behave. Good interaction design considers a user’s goals, context and understanding of the world in order to present an interface the user easily understands.

USER FLOW

The user flow shows how the user might navigate through the site to accomplish the task of completing a search.

WIREFRAMES

After completing the previous process phases I sketched out low-fidelity wireframes for a few pages. I thought about the user's needs vs. the organization's goals.

MID-FIDELITY WIREFRAMES

After completing the previous process phases I sketched out low-fidelity wireframes for a few pages. I thought about the user's needs vs. the organization's goals.

04 USER INTERFACE design

Now moving to the visual design I was finally able to put all my research and planning into the look of the website.

Dallas Kosher has been around for a long time and they already had their solid navy color in their brand. I incorporated a lighter shade of blue and a contrast color of a hot pink to give the look of their brand a modern turn. Before designing I researched more about current design trends with websites and found that abstract shapes, rounded buttons, and flat icons are among the top.

#00028D

#1377C0

#DA005D

#C3C4D1

ICONS

TYPOGRAPHY

Header 1

Header 2

Body

Link

Avenir Next Demi Bold, 60 pt

Avenir Next Demi Bold, 40 pt

Avenir Next, 20 pt

Avenir Next Demi Bold, 20 pt

BUTTONS

HI-FIDELITY WIREFRAMES

05 Iteration & Implementation

The testing phase is our greatest opportunity to improve our products by studying how people respond and interact with our ideas. Using the feedback we get from our users, we then create the next iteration of our work and repeat the design process again as necessary.

Test Objectives:

- Test overall look and attraction of the Homepage/website

- Ease of navigation, good flow

- Are the “call to action buttons” attracting?

- Test users understanding of where to navigate

CONCLUSION & NEXT STEPS

In my next steps I would take into consideration the comments from my participants in my user tests. I reconsidered the use of a search option after the seeing the information users were geared to and the nature of how they navigated the website. With more time I will incorporate more information the organization wants to add and keep it running up to date.

I would present the organization with the idea of a user account and log in option for members. I gained this perspective after my user testings and seeing what the users were looking for beyond the "business goals." Lastly I would conduct further usability tests to perfect the function of the site.

Why stop here? View my other case studies!