Code for Greensboro's website on a MacBook.

Code for Greensboro’s Website (2020)

Designed by Jordan Robinson and I

Client: Code for Greensboro
Date: August 20, 2020

What I Did

  • Collaborated with Jordan Robinson to design the website
  • Prototyped the website
  • Coded a card for the developers to use
  • Tools Used: Figma, HTML, SCSS, Bulma

The Need: To Promote Greensboro’s Code for America Brigade

While I attended graduate school in Elon, North Carolina, I joined Code for Greensboro to gain more practical experience.

Code for Greensboro, akin to all Code for America brigades, is a civic tech organization where web developers and designers across Guilford County help local governments solve local problems.

Code for Greensboro would be nothing without its volunteers and uses their website teach possible members about what they do and who they are. The organization felt the previous site was dated and slow, so it needed a redesign to catch the contemporary eye.

The Redesign

The design that Jordan and I devised uses the principles of flat and material design to keep loading times down while emphasizing the brigade’s brand colors throughout. It is meant to serve as a minimum viable product for the brigade to expand on in the future as we grow.

The Process

We made multiple prototypes in Figma after making and assessing a few wireframes.

Our prototypes were made with features that could be implemented in versions made after the minimum viable product’s launch.

We designed many of our elements to look similar to how they would when coded with Bulma, a CSS framework akin to Bootstrap.

I also coded a reusable card element with Bulma for the developers to use during one of our final meetings for the project. This is the only coding either of us did for the project because the development team handled the rest.

 

See the Pen Code for GSO Cards by Ethan McElvaney (@ewmcelvaney) on CodePen.

The Result

We managed to attract a few new members to our team in 2020 in spite of a global pandemic.

Leave a Reply

Your email address will not be published.