So, what do they do?
Clean Energy Social is a fully custom database of professionals, companies, and jobs in the clean energy industry--all bound together in a neat and tidy web app package. Individuals are empowered to explore career opportunities and meet other professionals.
Meanwhile, companies can share their mission and values, post jobs, and meet qualified candidates. The entire system was hand-built for Clean Energy’s exact specifications, resulting in a lightning-fast and human-focused product.
Powering the Future in Clean Energy Networking
Clean Energy fills a growing market demand for professional networking in the clean energy industry. Their old website, Clean Energy Job List, was holding them back, and they needed a team to break the lines. Together, we turned what could have been a mundane update into a major upgrade.
Clean Energy has everything we desire in a partner. Their business is unique, their expectations are high, and they have an intense drive to satisfy a proven market demand. Between their cutting-edge ideas and our deep technical prowess, it was a match made in heaven.
Clean Energy Needed…
Custom Web Design
The Clean Energy experience needed to be one-of-a-kind with fully-custom pages, navigation, and graphics. Built on React.js and Node.js
Web App Development
Clean Energy needed a new modular platform that scaled with them to replace their old WordPress site.
AWS Data Migration
Clean Energy needed a new modular platform that scaled with them to replace their old WordPress site.
The Challenge
The original Clean Energy Job List had been built on an extremely rigid WordPress template that limited their growth potential. Tweaks were tricky and A/B testing was nearly impossible.
To keep serving their audience of green energy professionals, Clean Energy needed a complete overhaul and rebuild. This task presented us with a few exciting challenges.
Optimized Components
Everything from the navigation to featured companies needed to be optimized for the user journey.
Data Migration
This new site needed to seamlessly replace the old one without displacing any users. That calls for some secure data migration.
Modularity
To keep the user experience fresh and exciting, we needed to build the web app to handle new features and rapidly growing scale.
Research
Clean Energy Job List verified a huge demand for a green job listing site, but we still did our due diligence to verify the market.
Clean Energy had already verified that a job list would be successful, but we wanted to make sure that an upgraded web app would suit the user better than a WordPress site. After interviews, surveys, and user tests, we made a few notable discoveries.
Discovery 1
Featured Items
Social proof is extremely valuable for this audience. Popular and featured listings are a must.
Discovery 2
Brand Profiles
Professionals want to see big brands, and big brands want to be seen which makes premium search results effective.
Discovery 3
Responsiveness
Many users accessed the site on both mobile and desktop browsers, meaning the new site had to be responsive.
Specification Sheet
Upon completing our research, we presented our findings to the Clean Energy team and began drafting our spec sheet.
We kicked off with a thorough two-hour spec sheet meeting to pin down all the details, then cross-referenced our teams. At each point, the rule of “measure twice and cut once” was our guide.
Goals and Objectives
Clean Energy had a few very important concrete goals. They wanted the new website to be measurably more robust, modifiable, and scalable. That way, they could continue to run tests, collect data, and grow their website into a more fine-tuned and user-friendly product.
Our Modular Solution
We knew that WordPress alone wouldn’t give Clean Energy the customizable and scalable platform they needed, so after deliberating the details with our project managers and developers for hours, we came up with a brilliant schematic for a fully-custom entirely-modular web application.
Project Planning
We had built a concrete plan and were ready to roll. Before continuing, we gave Clean Energy detailed line-item estimates so they could continue the project in-the-know.
Then, we created a visual timeline to go along with these time and cost estimates. The final result was a detailed, 33-page spec sheet with every detail we could possibly think of planned out.
Design
With the spec sheet as their guide, the design team got to work. They conducted research, created lots of prototypes, and carefully refined all the custom designs until the final product looked truly breathtaking.
User Flows
As usual, we started by creating user flows from our research. Since we had examined user behavior enough to understand how they tick, we could assemble the flowcharts that would evolve into our process flows.
By building flowcharts from user behavior, our team didn’t need to guess what screens they needed to build.
Instead, we could build, test, and iterate pages much more effectively.
From the user flows, our UX designers assembled screen views. These served as basic overviews of what pages needed to be designed and how they were grouped together.
Screen views were especially important for the company registration process. Since the process had so many steps, it helped us organize them in a simpler, more intuitive way with lots of reference points.
All of the user flows and screen views went into the spec sheet. That way, Clean Energy could make suggestions and sign off on them before we got to work. Once this initial planning was done, we moved to wireframes.
Wireframes
After Clean Energy signed off on the screen views in the spec sheet, we turned those screens from little white squares into specific low-fidelity wireframes. That way, we could send in simple samples for approval, and if Clean Energy wanted to make any changes, we could make them early on without wasting too much time.
These lo-fi wireframes were especially important for our agile design process. Not unlike our development team, our designers worked in two-week sprints, giving us ample opportunity to get valuable feedback from Clean Energy.
These considerations were all taken into account when building the high-fidelity wireframes. These versions were much more detailed and included custom graphics, images, and designs.
To maximize communication with Clean Energy, we crafted the high-fidelity designs and published to Marvel giving Clean Energy access to commenting features. Their communication exceeded our most positive expectations, and their openness allowed us to develop a much stronger final product.
Visual Design & Prototyping
We made final adjustments to the visual design, and once Clean Energy signed off on them, we wrapped up our design sprint and moved on to prototyping. In this phase, we strung together the screens with functional transitions. Once this sprint drew to a close, we sent them a prototype so they could get a better feel of the product.
Together, we explored how this prototype could be improved for the user experience. They gave us invaluable insights from their unique professional experience, and we shared our technical research. Together, we made final refinements before signing off on the design and handing it over to the development team.
Development
Once our design team handed over the fully-custom designs, our development team started building the app from the ground up. To maximize communication and efficiency, we used a traditional agile development process. After each sprint, we shared our progress with Clean Energy to keep them in the loop and up to date.
Front-end Development
The front-end development team kicked off the dev process by turning the beautiful designs into HTML and CSS. This phase closely followed our standard development procedures. React was absolutely killer in this phase. Together with Node.js as a javascript runtime environment and the rest of the backend tech stack, React significantly sped up development from a technical standpoint.
Front-end development was also efficient because of our process. We worked in two-week sprints and updated Clean Energy frequently, allowing us to build a product that more closely fit their specific needs.
As we went, our project managers continued to experiment with new ways to make our processes even better. In fact, by the end of the design conversion phase, we had significantly improved our agile development process.
Back-end development
Building the actual web application was challenging, yet exciting. We’ve built many similar web apps before, but since Clean Energy’s platform had been holding them back, we went the extra mile to make the app itself robust, scaleable, and modular.
The team examined the screen count and went to work developing the app. We used the MERN stack: a speedy, popular, and powerful framework built from open-source components.
It uses MongoDB as a NoSQL database, Express as a backend framework, React for the UI, and Node.js for running JavaScript. These components empowered our developers to construct a powerful backend very quickly. Although most of the app was developed in React Native, we also used Firebase for notifications.
AWS Back-end
Clean Energy needed a modular, scalable platform, and nothing screams “scalable” quite like AWS. We had already custom designed the system architecture during the spec sheet phase, but now it was time to start building it.
The entire backend was built inside a secure, private AWS cloud. Managing database instances would be expensive, so we used Amazon Aurora Serverless with RDS to handle the more infrequent data loads.
It was an incredibly simple, scalable, and cost-effective solution for running this web app in the cloud. For files we needed to retrieve faster, we used S3. That way, we could take full advantage of its many CDNs across the country, delivering better performance for Clean Energy users across the country.
Then, Amazon’s API Gateway enabled the app to quickly access files while keeping them secure and private. To connect the entire package, we used AppSync. AppSync empowered our dev team to create a flexible API for managing all the API endpoints from the Clean Energy Social website. It enabled us to more easily manage and combine data automatically to build a better site.
Key Features
Clean energy social strives to propel the clean energy industry with finely-tuned features that unite both companies and professionals. After thorough research and detailed conversations with out parter, we devised the following features.
Search Companies, Professionals, and Jobs
Arguably the most important feature was the search function. Users almost unanimously agreed that a search bar for finding companies, professionals, and obs was absolutely critical. In direct response to their desires, we built a multi-faceted user-friendly search bar for companies, professionals, and jobs with lots of filters.
Process
The company, professional, and job search functions were primarily built as a basic SQL query based on names, keywords, and type. We also included dropdowns for industry company size, and location (using the Google Places API). The search results display based on popularity and recency, with paid companies ranking first.
Why it Works
The search feature enabled users to find the companies or jobs that they needed with ease.
The UX was designed directly based on user behavior, and the coding itself was sublime.
Database entries hardly seemed user friendly, thus, it was equally important to build profiles for companies, professionals, and available jobs. These profiles would need to be customizable. That way, professionals could showcase their strengths, companies could tell their story, and hiring managers could share lots of job details with potential candidates.
Process
The profiles were strongly shaped by the design phase. While writing the spec sheet, our designers showed Clean Energy some examples from competitors, and Clean Energy shared what they liked and disliked.
We combined these brand insights and our own UX research to create well-structured profiles that convert.
Why it Works
The profile pages turned out so well because we built them directly from user research.
By turning flows into pages, we crafted profiles that convert.
Launch
As the launch deadline loomed over the horizon, we doubled down with some of the most intense quality assurance on any web app so far. Almost every single Fyresite employee created a profile, explored the site, and tried to break it--and some employees got very creative.
In some ways, the app was much more resilient than we expected, and in other ways, it needed some improvement. We patched bugs religiously, until Clean Energy Social was as air-tight as it could be by launch. Then, we finalized the changes, polished the app, and published.
Feedback
Leading up to launch, we made sure that our team was transparent about everything. At no point did we sugar coat our progress. We kept Clean Energy informed about every detail of QA, review, and launch--good and bad.
Clean Energy was transparent, too. They kept us in the loop about what looked good and what needed improvement, which allowed us to act accordingly and launch a better product. Because of our shared flexibility and transparency, the launch made everyone happy--especially the users.
Growth
Creating the best possible Clean Energy Social product is an ongoing process that continues to this day. Using insights from mix panel analytics installed prior to launch, our team can quickly analyze which features are being used the most. User behavior gives us benchmarks for improving the products continuing agile growth and development.
The future of Clean Energy Social is bright. Just a week after launch, almost 2,000 professional profiles have been created, and over 20,000 people have signed up for the weekly job list. A new marketing initiative is launching, and our team is preparing to develop built-in messaging features to fully round out the connection capabilities of this brilliant professional network.
Building, launching, and growing a new product can be scary and confusing, but with enough preparation and transparency, the process will be absolutely seamless. By prioritizing a 5-star customer experience every time, our goal is to shine a guiding light through your digital darkness to lead you to a living, breathing, thriving product.
