DFFC
Case Study

Category

DIGITAL DESIGN & WEBSITE MANAGEMENT

Customer

Delaware Fatherhood and Family Coalition

Date

SEPTEMBER 2016 - Present

Location

WILMINGTON, DELAWARE

Summary

Problem

Delaware Fatherhood and Family Coalition is a Statewide Fatherhood Organization supported by the Division of Prevention and Behavioral Health Services with the State of Delaware. The organization’s website issues started when the Business Catalyst Platform was retired, and we had to switch to the Treepl CMS platform; the platform didn’t meet all the options needed by the organization. The blog and other elements weren’t easy to update or display correctly.

Solution

We wanted to design a solution that allowed a non-website person to update the blog and event sections without an intense training session. We wanted to create a fresh look at the website, more streamlined navigation, and the ability to expand sections of the website.
DFF photo gallery layout

Sketches

We all sketched with different ideas and then sat together to discuss which sketch feature would be shown on our final prototype. Then, we put every selected sketch on the table and started building our website’s sitemap (information architecture).

Brainstorm & Ideation

The stakeholders and I looked at the issues with the old website and the things that worked well before laying out the hi-fi prototype and the sitemap for the website. First, we looked at the navigation and felt it was correctly laid out. Still, one supervisor said that old photos and videos should be included in a different section, so that suggestion was considered. Next, we looked at the blog section along with the single elements needed in the post, and once we had that agreed upon, we moved to the hi-fi prototype.
Persona - John Black

User Research and Create Persona

The persona defined is based on our interview and survey findings:

  • Easy sign-up for events using cell phone.
  • Find information about training and fatherhood.
  • Read blog articles about fatherhood when on cell phones.
  • Make blog section pleasing visually on cell phones.

Sitemap (Information Architecture)

After we created the sitemap, we use the paper prototype do the user-testing with 8 participants.

The original sitemap has 6 main functions: signup, set reminder, daily log, trends (activity), reward and Q&A

However, after we did the user testing, we feel daily log is very important and we should the add more features on that. Moreover, some features like signup, and trends (activities) are very complicate, thus we also simplified them a little bit when we create the low-fi wireframe.

dffc sitemap

Hi-fi Prototype

After making sketches with different ideas, we discussed which sketch features to feature in our final prototype. Then, I put every selected sketch on the table and started building our website’s sitemap (information architecture). Then, I laid out the mobile and desktop versions of the Hi-Fi Prototype for the stakeholders to review the site before starting the website.
VIEW PROTOTYPE

Final Reflection

I did not stop the project After the department heads and the website approved the design. I continued to work on the interface design, including contextual design, interactive design, and new section implementation.


One thing I learned during this process was the importance of designing mobile-first and having desktop design tackled second, with more than 50% of users using mobile devices. This was attempted by reviewing the website sites over the past year.

VIEW WEBSITE

NEXT PROJECT

Logos & Branding.

Next Project
border border
Skip to content