Code Your Dreams, a 501(c)(3) organization based in Chicago, Illinois, and the client of this project needed insights on potential ways to redesign their new website and current landing page.
My Role:
Independent UX & UI Designer
Project Goal:
The goal of this project is to redesign the landing page for Code Your Dreams, with the aim of increasing metrics such as donations and awareness. As an independent UX/UI Designer, my role is to provide the client with researched and tested solutions. The design process will include various stages, including research, sketching, wireframing, prototyping, feedback, and iteration. To achieve this, I will use skills and tools such as UI audit, competitive analysis, sketching, digitizing wireframes, style guide, and Figma. The entire design process will take place over a 5-day design sprint.
Landing page on mockup laptop
Case Study: Repurposing a landing page in 5 days
On Monday, I conducted thorough research and competitive analysis of nonprofit donation websites, including austinparks.org, aspca.org, foodbankrockies.org, and capitalareafoodbank.org. Additionally, I researched Code Your Dreams, Coder Hero’s (partner), and their shared founder through public social media content, Instagram, LinkedIn, and other sources. My analysis concluded that Code Your Dreams needed improvements, specifically a Volunteer Button and Donate Button feature.
On Tuesday, I began sketching out initial ideas for the wireframe. I created a template that included features such as a footer, partners section, donation & volunteer call-to-action buttons, information about events, teaching curriculum, and bio. After refining my sketches, I moved on to wireframing in Figma on Wednesday. Figma's plugins helped me speed up my workflow, and I was able to receive early feedback from peers and iterate.
Image taken from clients other website
After receiving feedback, I learned the importance of color for the client and backtracked to create a style guide on Wednesday. I matched similar fonts and created a color palette and scheme using content from the website, which I edited with Photoshop for easy use later. Overall, my goal was to provide the client with research and tested biased solutions to redesign her landing page in just 5 days and increase metrics such as support from donations and awareness. As an independent UX/UI Designer, I utilized my skills and tools, including a UI Audit, Competitive Analysis, Sketching, Digitizing Wireframes, Style Guide, and Figma.
Designing With Figma
By Thursday, I had gathered a lot of valuable feedback on my initial colored landing page, which allowed me to make significant changes to my design. I received suggestions on various aspects of the page, such as the layout, content, and color palette, which helped me pivot and become more creative as a visual designer.
I realized that my first few landing page versions were too rigid and difficult to read. Some elements, such as the partner's section, need to be taking up more space and distract from the primary calls to action. I took this feedback to heart and made changes that allowed me to infuse more personality and playfulness into my design.
Original Concept: Sketch of landing page
Iteration:
On Friday, I created the final concept of the landing page, which surprised even me. Using blobs and other Figma plugins, I experimented with space, chunking most of the information and using color backdrops to make the page more inviting, playful, and informative.
I added new elements to the page, such as numbers, facts, quotes, events, an intuitive nav bar, and a footer. My changes transformed the page from a standard landing page into something more unique and visually appealing.
Landing page version 1–4
Final Design and Next Steps:
Looking ahead, there are several next steps I need to take. Firstly, I plan to volunteer for Code Your Dreams, as I am intrigued by the nonprofit's mission and would love to be involved in its development. Additionally, I need to redesign the new landing page to ensure it has good breaking points, as I currently only created a desktop version.
Finally, I plan to conduct A/B testing and have further discussions with the client to ensure that the design is effective and meets their needs. Through iterative changes and careful attention to feedback, I am confident that the final design will succeed.
Final Idea For Landing Page
