Designing a landing page that speaks to potential visitors — A Case Study on Code Your Dreams
THE CONTEXT
Code Your Dreams is a non-profit organization that works using a take a class, give a class model. They work to provide coding classes to students in under-served communities in Chicago. The organization partners with schools and community centers to hold their programs. Brianne Caplan, the founder also started CoderHeroes as a way to continue to share coding lessons to students online during Covid-19. Code Your Dreams focusses on teaching their students Design Thinking, Agile Methodology, Product Management, Sales & Marketing, Mobile Development with App Inventor, Web Development with Python, Version Control with Git, and UX Research & Design. This is done through an Ideate, Design, Code, and Pitch curriculum strategy in every course.
THE TASK & APPROACH
I was tasked with assessing the Code Your Dreams current landing page, then ideating and designing a new landing page targeted at those whom my research determined were key users browsing the site. My design method never fails so I stuck with it — the classic design thinking method. Research to understand the problem, identify the problem, ideate & design a solution, and finally iterate after receiving feedback throughout the process.
THE RESEARCH
Starting with competitive research, I decided to delve into organizations and companies with similar missions and understanding their information architecture and features of their landing pages. From here, I created a feature comparison to determine the key aspects that these organizations tend to include. These organizations included CodeNow, {she’s}coding, Women Who Code, #YesWeCode, and edX.
I determined from here that a Donate button, Apply button, Values & Mission blurb, and a Sponsors blurb were key features to consider including in my final design. From here, I performed a UI Audit on #YesWeCode and CodeNow. Each displayed call to action buttons to Donate and Apply prominently at the beginning of their site. CodeNow included a Volunteer button as well which #YesWeCode did not include at all. These were key findings that helped me to further understand the potential viewers of my landing page.
From here, I took another look at the Code Your Dreams existing landing page. I noticed that this landing page was not speaking to the students much which was a potential gap in audience reach. There were only 2 donate buttons: one at the top of the page in the header and one at the bottom in the footer. There were no application buttons included anywhere and no buttons for potential volunteers.
Next, it was time to create a clearer picture of who I expected to visit this site. I wanted an understanding of who my target audience was so I could continue to keep them in mind while creating this landing page. I determined three audiences that were potential users for this website: the applicant, the donor, and the volunteer teacher. I had to be sure that the features I was including spoke to these three people. I wanted a to create a clear definition of these users so I fleshed out each persona to demonstrate their goals and frustrations.
THE IDEATION & DESIGN PROCESS
After determining my audience, I started brainstorming. Just exactly how was I going to speak to all of these people at once? One concept stuck with me, the student’s journey and how it sets them up for success. Using this as a framework would allow me to not only speak to the students about just what they would be doing, but also to potential volunteers who are interested in teaching these concepts. This journey could also speak to the donors — they’ll know exactly what their donation is supporting, a student’s education in coding!
SKETCHING
To sketching I went! My plan was to illustrate the path of a student, with a name and some graphic illustrations to bring the story to life. Giving the visitor a face or story to connect to, makes them more likely to become invested in the story and the outcome. This was my hope for all three audiences when viewing the journey: a prospective student will be inspired to be like the example student and apply, a donor will be inspired to support students like the example student and donate money, and the volunteer teacher will be inspired to have a hand in helping teach students like the example student and volunteer to teach. I also hoped to sprinkle the call to actions all over the page so the visitor has no possibility of missing them. Since the existing site only includes “Donate” buttons, I added apply buttons here as well for the prospective students.
WIREFRAMES
Next up, wire-framing. I took this sketch and entered it into Figma to provide some proportion guidelines while I was wire-framing. In this process, I made a couple changes: making the hero image the size of a full page, removing the header from the programs section, and shifting the apply and donate buttons underneath the program section from listed vertically to listed horizontally.
I then added some colors to this wireframe & received feedback before my final iteration. The side-by-side of the wireframe and final concept is shown below.
FINAL CONCEPT
- My logo, if pink would be hard to see on the black navigation — Added a white shadow to the logo to mitigate this issue.
- The donation button is too small — Increased the buffer between “Donate” and the rectangle for more screen space.
- The navigation is takes up a lot of vertical space — Narrowed the navigation bar.
- Include buttons throughout the student journey for more options speaking to other visitors — Added buttons along the path for exploring instructors and volunteering as well as watching more pitches.
- The plain black background is flat, add some dimension — Added blobs behind each student journey stop to add interest.
- Include a header for the programs — Added a header that speaks more to the student rather than a bland header.
- Add links to programs sections for more info on their designated pages— Added “Learn More” buttons beneath the short program blurbs.
- The Apply & Donate buttons are shown many times, tell them why they should! — Added short driving sentences above each button, “Want to learn to code?” above Apply, and “Support Code Your Dreams” above Donate.
If you’re interested in seeing the entire page preview — click here.
FINAL THOUGHTS
From here, I have some recommendations for this client on next steps and intentions.
- When the visitor clicks on the pitch video in the path — this should trigger the video entering full browser screen mode.
- For the journey, the line should appear to draw to the next step in the student journey when the visitor scrolls! This will give a dynamic and engaging appearance that will keep the visitor motivated to scroll through the entire journey.
- Potentially consider adding a section about where donations actually go, with statistics of the percentage of donations going to certain areas (i.e. 20% of donations spent on venue where the program is held) — this will encourage donors as they have visibility into where their money is actually going.
YOU MADE IT! If you’re STILL here — thank you so much for reading! Feel free to reach out with any questions or comments regarding this landing page.
A huge thank you goes out to the Code Your Dreams and Brianne Caplan for this opportunity! If you’re passionate about coding and computer science — check them out, a very worthwhile program to consider donating to if you’re able.
Lily Basile
