This project is a completely new website for FroGang Foundation, where we built it from scratch. We provided FroGang with a distinguishable branding so that they are able to use this for future projects or initiatives. We also paved the way for a fast and smooth communication channel for new FroGang members to reach out to.
The problems we tackled included increasing site traffic, establishing prominent branding, building FroGang’s credibility through testimonials, providing a professional yet welcoming site for new members, showcasing live events, and opening a platform to sell merchandise. We dedicated our research period to get to know the story behind FroGang and how it currently functions. We also looked into how other similar nonprofits tackled their online presence and branding. FroGang started without a set brand kit, leading to the website and the content being very sparse and vague. The colors were also inconsistent.
Our results are already telling; we received an inquiry a week after our new branding from a new potential lead. We plan to measure our results through Google Analytics to keep track of site traffic. We also want to see the use of the branding expand throughout the organization.
From these problems, our team created a few specific solutions. First, we designed a website from scratch on Wix. We first went with what our clients suggested, which was “90s-themed patterns,” and while our team was hesitant, we gave it a try. However, thanks to user testing, we shifted gears to focus on hair and thus inspired our neutrals theme. Then, we set out to rework the content to describe FroGang’s initiatives better. We added in-depth explanations to each initiative and added more content, such as testimonials. All of these help FroGang welcome new members, as they will know more about the site. Another feature was the Events page which caters to the many events that FroGang as an organization hosts. This way, members can check the website instead of asking Kelli and Candace. Lastly, we added a shop page to represent better the merchandise they sell.
At the start of the project, our client lacked a cohesive brand kit and had inconsistent design throughout the website. Consequently, our first goal was to decide on a brand kit that aligned with our client’s business mission. Our client’s initial desire was to create a retro-themed website with bright colors and a kid-like feel. Implementing this was one of the most difficult aspects of our design process since we were tasked with incorporating a theme geared towards children into a professional, up-scale website. Additionally, we were tasked with reiterating the theme every week after receiving feedback from our client on how the design didn’t align with her vision yet. Eventually, our team settled on a design theme that incorporated both our client’s desires and our team’s design expertise, however after receiving adverse feedback during user testing the entire plan was scrapped with the client allowing us full creative control over the final design overhaul. Taking Kelli’s business mission into consideration we concluded on a theme that displays a beautiful range of brown skin tones while also incorporating graphics that display the natural hair textures of the black community.
As a team, we chose the Wix platform based on both competitors’ self-reported data and online reviews. The Business Unlimited plan covered all of Kelli’s explicitly stated requirements: she wanted to sell merchandise and organize events through the new site. The actual iteration of the site was more a labor of grand pendulum swings rather than fine-tuning. Prior to settling upon the theme you see today, each prior rendition could not be more unlike the previous. This was largely due to a breakdown in communication between our client and the team. Nevertheless, we did eventually find a mutually appreciated color scheme. As far as development is concerned, changing the color scheme required a level of attention to detail that could border on tedium, but was no herculean effort. The greatest lift was changing the layout of all elements once the ‘feel’ of the website had also changed – ensuring that the flow of information reflected the current layout. Luckily, our team has a wide array of skill sets, expertise in design being foremost in prevalence. Remaining agile, our team was able to pivot from one design concept to the next. This, however, had wide-ranging, cascading effects on other areas of the site construction. A small edit on one page might entirely scramble the mobile view or explode the footer beyond reasonable dimensions. It was certainly a learning process, leaving content unfinished or less-than-desirable in presentation, to ensure the hierarchy of edits wouldn’t erase previous efforts. Again, no part of this is insurmountable, but could at times feel sisyphean. Considerably more complex tasks, like wresting the domain name from the previous provider, setting up data streams for monthly analytic reports, building client training materials, ADA and SEO considerations, and implementations seemed to take less effort.
Receiving and implementing feedback played a fundamental role throughout our design process. Our team presented new deliverables to our client throughout every phase of the project in weekly meetings where we would review the status of our work and receive Kelli’s input on how well our current iteration fit with her desired brand image. After completing multiple design overhauls one of our priorities during user testing was receiving feedback on the UI of the website. The input we received from our user testers emphasized the challenge our team was facing in reconciling the kid-friendly atmosphere that Kelli wanted to embody in FroGang’s website and the professional look that she wanted to be implemented. Following our discussion of the user testing feedback with Kelli, our team decided to complete one final overhaul of the website’s design during which we were allowed full creative freedom. This process of dynamic feedback and reiterations proved monumental in settling on our final design which enabled us to effectively present FroGang’s mission, but with the elevated level of professionalism that Kelli desired.
The team built out a highly structured, internally linked Google document, replete with screenshots, gifs, and detailed moment-by-moment instructions on how to complete the necessary tasks inherently required within the domain of website maintenance. While this process started out really quite basic, from simply logging in to the site and navigating the Wix Dashboard, or adding and modifying text, we began to realize that FroGang had members with technical acumen. Candace was already really quite familiar with no-code solutions. Kelli, in contrast, is not as technologically fluent. Though we did include training segments more aligned with Kelli’s needs, we were assured and confident with Candace’s capabilities. This gave us the latitude to focus on much more detailed, complex website necessities, like editing out-of-the-box solutions Wix provides for things like a site’s FAQ, Events/calendar, managing site merchandise, visitor correspondence, and much more. The document is structured so that the skills compound, the previous often feeding intuitively into the next. And if the client should encounter a skill they don’t quite recall, the left-hand side of the document acts as a breadcrumb navigation panel, so revisiting tasks is really quite simple. Each week, we would ask the client to engage in a particular task, demonstrating the effectiveness of our verbal instructions, and based upon the difficulty the client faced with said task, a new section would be added to the training document. Also, if the client seemed, to us, to struggle with any category of concept, again, a section would be detailed. We have also committed to continuing this development, treating this training document as a living document, growing as our client’s needs grow, or changing to suit her current needs.