In this article, I go over how I redesigned a landing page for a nonprofit aiming to teach coding to youths. Code Your Dreams, a 501(c)(3) organization based in Chicago, Illinois, and the client of this redesign.
Five days, Monday- Friday.
Figma, Adobe Photoshop, Pen, Paper
Research, Sketching, Wireframing, Testing, Feedback & Iteration
Context: Research and competitive analysis
First off, I must say, I am on the Figma bandwagon. It is a great tool, far from perfect, but thank you for the plugins, thank you for the community, and thank you most for blobs, all the blobs. As mentioned above, I had one workweek to redesign a landing page for a Chicago based nonprofit.
The goal was simple, learn as much as possible about the small company as I could in about 24 hours. Being in Denver and unaware of most nonprofit donation websites and their landing pages, I had to do my digging. With guidance from some socially aware people I talked to, I started to competitively analyze a few US nonprofits and other websites that utilized donation specific calls to action. To be precise- austinparks.org, aspca.org, foodbankrockies.org, and capitalareafoodbank.org. Besides looking at these sites, I also looked through Unsplash for inspiration and pictures that I decided not to use in my final landing page.
I researched Code Your Dreams, Coder Hero’s (partner), and their shared founder. Looking at their public social media content, Instagram’s, LinkedIn’s, and just about everything I could is how I could design my early design decision. Volunteer Button and Donate Button, two key features which I concluded Coder You dreams needed as far as improvements go. Looking deep into and after inspecting the original landing page of Code Your Dreams, I noticed most things had been done in Python.
It turns out the founder is a coder, crazy right. Also, she really is doing some fantastic things; besides looking to expand outside the Chicago area, she wants to offer a very much needed service. According to some of her YouTube interview and some other public information listed on her Instagram and LinkedIn, she had helped over 250+ students, has successfully identified over 100+ problems, 80+ application build to date, over 50 communities identified, and a student instructor ration of 15:1.
One thing I learned and am compelled to share from I must also share the partner site Coder Heros: “White people are represented at a higher rate in the tech sector’s executives category than the rest of the private sector, at 83% — more than 15% higher than their representation in the professional’s category, which includes jobs like computer programming. Only four percent of those in software developing, application, and systems jobs are African-American, and just five percent are Hispanic or Latino.” — Code Your Dreams Founder, Brianne Capian.
Their goal is simple, and as a Hispanic UX designer, I felt inclined to give some help as best as possible. But finding donating and funding nonprofits has never been more challenging, especially now with Covid-19, and everything is remote.
Method and approach: Sketching
As always, initial sketching can be quick and dirty; here are a few examples of a few things I wanted to include in my wireframe. I eventually cut out most stuff video links and the blog stories, which they do not even have. More so than anything, this was my template, which I used for my actual Figma wireframe. Things I did incorporate here while on paper, which eventually included my final design, were features such as a footer, partners section, donation & volunteer call to action buttons, information about events, teaching curriculum, and bio.
Goals: Wireframing in Figma
With little time and little room for error, I quickly began wireframing in Figma. Having this been my first time using the UX/UI software, I was impressed. The plugins in Figma are insanely helpful and really helped me speed up my workflow. Coming from using Axure in my last project, Figma was a massive breath of fresh air, and I was able to work quickly and test a few ideas. My initial wireframe was only in black and white, but I could get early feedback from a few peers and iterate.
Testing & Feedback
After receiving feedback on my early version for the landing page, I quickly learned the importance of color for this client and backtracked while I had a little time. Here I look at creating a style guide; here, I looked at the website and tried to match similar fonts for my rendition. I also look through much of her content to create my desired color palette and scheme. Imagery and pictures were also taken here and edited with photoshop, and most of the content I took was converted into [.png] for easy use later.
Iteration and Changes
Fortunately for me, I was able to get a tremendous amount of feedback on my first version of my colored landing page. Many suggestions and input were given to me; here is where I took a massive pivot and started to have a little more fun as a visual designer. My first versions were far too boxy, and the content was tough to read. The partner’s group and a few others took up wasted space and drew attention away from the critical calls to donate and volunteer.
These are only a few examples of the changes I made, but one thing I took into consideration was the hero section. I realized the hero section was rather dull and uninviting. Since the original hypothetical persona and target audience I intended for this landing page was both a student and a parent, I wanted the page to be both amusing but still informative. The language I wanted to convey was practical and not exclusive and informative.
Let’s say Friday came quick. Design sprints like this are unpredictable. Having this been my second, I learned so much yet again, especially from the value of feedback and iteration. After applying mostly all the given feedback I received, my landing page became something rather unexpected. It gained some real personality, and this was all achieved through blobs and some more Figma plugins. I decided to play with space and use blobs to sort most of the information on the page. Using color and a backdrop, I attempted to add a more inviting yet playful but informative look. Things I also decided that needed to be added included numbers, facts, quotes, events, a more intuitive navbar, and a footer.
1. Volunteer for Code Your Dreams! Seriously, with things being remote these days, I am really considering it. Something like this could be developed into a functional site. I’d love to be there and help out, so we will see. As a reminder, though, they do have donation and volunteer services, so check out their site. It truly is a unique nonprofit, and you can find their place here codeyourdreams.com
2. Redesign the redesigned landing page into good breaking points. Since I only created a landing page for a desktop, other sales and sizes would need to be made before development. The main goal of using the blobs was the creating space in which once the page is condensed down in size; the elements should easily format down from size or up if needed when using other screen or device sizes.
3. A-B testing and client discussion also be necessary before further continuation.
Thank you for reading -Michael Lahargoue
Code Your Dreams: codeyourdreams.org
Coder Heroes: coderheroes.com
Stock Images: unsplash.com