DJ's Hope 4 Hearts - The Process

Visit the Website »

Defining Goals and Opportunities

DJ's Hope 4 Hearts wanted to expand their audience and reach more people, add more content to the site while making that content easily accessible, and improve the visual design of the site.

They wanted the new design to have a child-like feel, because children are the people they help the most.

My Goals

  • Create clear information hierarchy
  • Clean up the navigation of the site
  • Create a clean, child-like design
  • Communicate DJ's Hope 4 Hearts mission, efforts, and impacts
Website

My Design

Main Challenges

Navigation: DJ's Hope 4 Hearts wanted to add links to their shop and blog. This alone would've put the number of navigation links up to 12. It is best practice to limit the number of navigation links (under 10). The main challenge in the navigation was to limit the links while keeping the important content easily accessible.

Resources content: DJ's Hope 4 Hearts wishes to add more content about heart diseases to further educate and help families dealing with heart conditions. The main challenge for this involved organizing and connecting this content on the site.

The Original Site

Home

DJ's Hope 4 Hearts' home page originally only included the mission statement and listed the names of a few of their programs.

Website

Original Home Content

Website

Original Navigation

Resources and Nutrition

The resources page included the three heart diseases each on their own tab. The information was listed in paragraph form without images or any other breaks in the text. The nutrition advice for these diseases had its own page; on this page the nutrition advice was listed in bullet points and paragraph text one after the other.

Website

Original Resources Page

Website

Original Nutrition Page

Ideation

In order to improve usability, I brainstormed different ways to better arrange the information hierarchy of the website. This consisted of mainly the navigation and the resources/nutrition pages.

My Process

  • Examine other non-profits' organization
  • Become familiar with DJ's Hope 4 Hearts mission, programs, and content
  • Create low-fidelity wireframes to brainstorm

Home Page

For the home page, my main goal was to better communicate what the non-profit does and how they help families and children dealing with heart diseases. I also wanted to create call to actions to draw the user's attention to donate. In order to do this, I simply added more content about the organization.

I explored different ideas for the navigation, including removing pages, having dropdowns and more, but I decided on the following ideas:

Website

Home Navigation and Page Design Sketch

Website

Additional Home Content

Resources and Nutrition

I decided to merge the resources and nutrition pages, making the main resources page a second navigation page. This helps not only with the usability in the navigation links, but also with the information hierarchy of the site.

At this point I decided that the heart disease pages will include the content on the heart disease as well as a link to the nutrition advice for that heart disease. I also decided to list the other heart diseases at the bottom of the page so the user can easily continue on to more useful content.

Each page under the resources branch would also include breadcrumbs for easy navigation back and for clear communication as to where the user is on the site and how it relates to other content on the site.

Website

Resources Design Sketch

Prototyping

After clarifying the information hierarchy of the site and sketching out the design, I dove into creating high fidelity prototypes to send to DJ's Hope 4 Hearts.

I used Figma to create the designs. I used the illustration of DJ from the logo which was already created by another designer. I took stock photos from Pexels to help break up the text more. I created some icons using Adobe Illustrator to add more child-like elements. I also added a wave background to tie the design together.

Link to Figma Desktop Prototype »

Creating the Website

After approval, I started creating the website using HTML and CSS. To the right is a screenshot of some of the code I created. I also created responsive designs and code at this point to complete the website.

I added animations to the donate heart to add intrigue and attract attention to the option to donate.

Website

Screenshot of Code

Final Design

Here are some screenshots of the design currently.

Visit the Website »

Website

Call to Action Section

Website

Home Page - Description of Some Programs

Website

Donate Page

Website

Nutrition Page with Breadcrumbs