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

2

3

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.

PROVISIONAL PERSONAS

Pains

- Can’t view past e-blasts online

- No social networking links online

- Too many steps to reach contact page

- Webpage is not responsive

Age 35

Local member

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

PROVISIONAL PERSONAS

Prov. Personas Copy 4.png

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 

Age 45

Commercial Account

Goals

- Learn about kosher and the organization/what they do

- Access necessary forms instead of having them emailed separately 

PROVISIONAL PERSONAS

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

Age 60

PATRON

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

PROVISIONAL PERSONAS

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!

  • Facebook
  • LinkedIn
  • Instagram

© 2020 by Sivan Kluger. All Rights Reserved.