Bermuda Heart Foundation

The Bermuda Heart Foundation is a nonprofit organization that is dedicated to supporting heart health and reducing heart-related illnesses in Bermuda. My colleagues and I traveled to Bermuda for seven days to work with the Bermuda Heart Foundation. Within the team, I held the position as the lead user experience and user interface designer as well as an assistant to the web developer. Having this role I conducted multiple usability tests, sketched layouts for the website’s redesign, created working prototypes for the client to view and engage with, and coded the foundational structure of the website. To view the Bermuda Heart Foundation’s newly constructed website please press the button below.

Tools Used: Adobe XD, Brackets.io, WordPress

Sketches: The client essentially wanted to house three websites within one since the Bermuda Heart Foundation is an umbrella organization to many others. This appeared to be challenging for me due to the fact that the previous version of the site included an extreme amount of content. This led to my first task which included sketching a site map for the new structure of the website. (Site Map, About​, CORE, JUMP2BFIT, Home, Health)

Site map and sketch
Site map and sketch

The site map that shows how the Bermuda Heart Foundation's website would be reorganized. Along with the sketch for the about page.

Sketches
Sketches

The sketches for the CORE and JUMP2BFIT pages.

Sketches
Sketches

The sketches for the homepage and health page.

Site map and sketch
Site map and sketch

The site map that shows how the Bermuda Heart Foundation's website would be reorganized. Along with the sketch for the about page.

1/3
Prototyped Webpages

The above images display the individual webpages that I designed within Adobe XD. This is what was presented to the client before moving forward with the coding process. I incorporated different colored navigation that corresponds to the major programs housed by the foundation, CORE, and Jump2BFit. These colors would be consistent throughout the webpage so that users would know the difference between the organization/programs and the page each relates to. The client also specified that the website needed to “eye-catching” upon entering. The web developer and I also decided that a continuous video showcasing each program’s attributes would be a good way to interest the audience.

Click to view usability test and coding artifacts
Usability Test
Usability Test

The usability test that was given before the redesign of the website.

Go to link
Usability Test 2
Usability Test 2

The usability test that was given after the website's redesign.

Go to link
Coding Example
Coding Example

The code that consisted of the general layout for the web pages.

Go to link
1/1