A responsive redesign of an existing website

I was given this great opportunity to work with Forest Lake Area Good Samaritans (FLAGS) by recommendation of a board member of this organization. I began working with them and got to work at setting up an initial meeting with the president and co-founder of FLAGS. 

At our initial meeting, we went over their existing website and how much they were in need of it being redesigned. I asked what their needs were for their website so I would have an idea of what was most important to include in the redesign. I loved their enthusiasm of wanting to include so many features to their website. I did the best I could to include all of the features they were looking for while still creating a simple clean design for their new webpage.

At my meeting with the FLAG members, I learned the backstory of their initial website. Their original website was a joint effort put in by a few of the board members. They had such a passion for what they do in their community, they went as far to attempt to create this webpage to help their cause. But unfortunately, it seemed to be deterring their potential new users looking to help in the community. 

In order to help FLAGS with their redesign, I had to look into their original pages to see what they had and what was needed based on what I learned in our initial meeting. 

Based on the meeting and original pages, the following pages were the pages that needed to be redesigned:

Here are a few of their old pages from their website prior to my redesign:

Now it was time to get started on sketching out the new pages for the FLAGS website. I needed to sketch something that would encompass their mission to help others and build a better community. Using snippets of information from their previous design, I was able to create a start of a hero section and landing page for this redesign.

With the hero section figured out, I started working on the wireframes. Working my way down through the homepage, I thought of what would be essential information for a user who would be browsing this site. Having a mission statement in the hero section seemed like the best place to draw users in and scroll through. Next adding an excerpt of the FLAGS About Us section seemed like the best next logical solution. Then I would add a section that would feature all of the CTAs the FLAGS were looking to accomplish on their website.

Working all the way through creating the homepage, gave me a start and guide to finish the other screens. Using the inspirations I had found from other non-profits and other designs, I finally came to the below wireframe for the homepage. 

Feeling confident about the homepage, I started working on the critical pages that the organization wanted on their website. The top three CTAs they had were to showcase the services they provide, as well as provide a place for people to ask for help. They also wanted to be able to recruit other volunteers that shared their passion for helping their community, as well as receive donations to help fund their work to serve their community. 

With the priority pages completed, I worked on the nice-to-have pages. The About Us page to help users in the community understand FLAGS's mission and meet their board members. As well as their Events Page and their shop page. 

At this point, the FLAGS board was very excited with the progress so far and they were looking forward to the final product. All that was left to do was add color and fill in the photo slots. 

Picking the color scheme was not difficult at all, as the client was fairly dead set on the color palette of red, white, and black, so I did my best to incorporate that into their website. As for their logo, they seemed fairly established in their community already and I thought it would be too much to try to rebrand their website. So I used the following photos as inspiration since it is something they used alot in promoting themselves and had made for events. 

Using FLAGS's inspiration and shirt design, I simplified and created their logo for their webpage.

With the color palette and logo completed, I could then create the final screens for the website. I had originally made the homepage Hero Section like the below image, with the image bleeding into the menu. But after some review with my career mentor, he gave me some pointers to make it clearer for the user and less busy looking. 

Next, all that was left to do was complete the other pages. Here are all the final pages of the Forest Lake Area Good Samaritans redesigned website. 

I learned a lot from this experience. Redesigning a website with solidified needs and color palette was a challenge. But I was able to create a website that should make users feel welcome and ready to join the cause. I was happy to give Forest Lake Area Good Samaritans a product that they would be happy with for years to come.