Chesapeake Bay Foundation
Webpage and Mobile App
Purpose: This goal of this project was to design a homepage and mobile app for a charity using Sketch. I chose to design my project for the Chesapeake Bay Foundation. As a Marylander, this charity has always been an important aspect of my life and I have always been passionate about donating my money and volunteering time to Saving the Bay.
Step One: Mood Board
My website's mood board consists of a variety of earth toned colors and colors that reflect the bright blue used in the Save the Bay campaign. I wanted to include a lot of photos on the website's homepage as well, to reflect the natural beauty that the bay exudes.
Step Two: Wireframes
Like any other design project, I started the actual design process with wireframes. The most challenging part about creating the wireframes for the homepage was deciding what the most important aspects for the charity were. I wanted to include those aspects in multiple places on the homepage. I decided that promoting volunteer and donation opportunities were most important to the foundation, which is why they are featured several times on the home page.
For the mobile app, I decided to make it function as a field trip "management" tool. It has the option for visitors to either proceed as students, teachers or visitors. I built out a prototype for the student mode, including different games, activities and tasks that students could expect to utilize while visiting different CBF locations.
Step Three: Final Design
The final designs came out pretty similar to my wireframes and mood board (with a few minor changes). The website features more photographs while the app has a more cartoon aesthetic. This was done intentionally since users of the app will already be surrounded by the Chesapeake Bay's natural beauty as they are visiting the locations. Therefore, they will not be interested in looking at landscape photos on the app.
