CODE YOUR DREAMS
THE CONTEXT
Code Your Dreams is a non-profit organization that uses 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. 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 who my research determined were key users browsing the site. I researched to understand the problem, identified the problem, ideated & designed a solution, and finally iterated after receiving feedback throughout the process.
RESEARCH
COMPETITIVE RESEARCH
I delved into organizations and companies with similar missions to understand 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.
The Donate button, Apply button, Values & Mission blurb, and a Sponsors blurb were key features to consider including in my final design as these were the most used throughout competitor websites.
Then I performed a UI Audit on #YesWeCode and CodeNow. Some key findings are listed below:
​
-
Call to action buttons to Donate and Apply prominently displayed at the beginning of both sites.
-
CodeNow included a Volunteer button as well which #YesWeCode did not include at all.
These findings helped me further understand the potential viewers of my landing page.
How does this relate to Code Your Dreams?
I took another look at the Code Your Dreams existing landing page and came away with some big finds.
​
-
Landing page does not speak directly to the students - a potential gap in audience reach
-
Only 2 donate buttons: one at the top of the page in the header and one at the bottom in the footer
-
No application buttons included anywhere
-
No buttons for potential volunteers
PERSONAS
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 to detail a clear definition of these users so I created each persona and included their goals and frustrations.
IDEATION & DESIGN
After determining my audience, I was faced with a looming question - 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 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 who will know exactly what their donation is supporting—a student’s education in coding!
SKETCHES
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 reader 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
-
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 ability to miss them. Since the existing site only includes “Donate” buttons, I added apply buttons here as well for prospective students.
WIREFRAMES
I took this sketch and began entering 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 oriented vertically to oriented horizontally.
​
I then added some colors to this wireframe & received feedback before the high fidelity iteration.
MOOD BOARD & STYLE GUIDE
Before I started moving into my high fidelity prototype, I created a mood board and style guide to capture the aesthetic and visual design elements I was going to use such as the typeface, color palette and button styles.
​
I went with the original typeface from the existing Code Your Dreams page and stuck with a similar color palette as well.
HIGH FIDELITY & FEEDBACK
After receiving feedback from 18 users on this wireframe that incorporates the basic elements of the visual look and feel - I made adjustments in response to these insights to create a cleaner, more understandable interface.
The navigation takes up a lot of vertical space.
​
Narrowed the navigation bar.
The plain black background is flat, add some dimension.
​
Added blobs behind each student journey stop to
add interest.
If logo is pink, it'll be hard to see on the black navigation.
​
Added a white shadow to the logo to mitigate this issue.
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.
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.
"Donate" button is too small.
​
Increased the buffer between “Donate” and the rectangle for more screen space.
Include a header for
the programs
​
Added a header that speaks more to the student rather than a bland header.
After another round of feedback from 4 users - I landed on my final design.
NEXT STEPS
Looking to the future - I have a couple recommendations for next steps.
​
-
Consider reincorporating the partners but including their importance to the business mission to increase understanding of their purpose.
-
Consider including a carousel with previous student project demos to give a bit more of a taste for what the students are creating.
​
Code Your Dreams has such an amazing mission - if you are willing & able, please consider getting involved or donating here.
​
Thank you so much to Code Your Dreams for this opportunity!
HIGHLIGHTS
-
Tools: Feature Comparison, Competitive Analysis, Personas, Sketches, Wireframes, Mood Board, Style Guide, User Tests, Figma (lo-fi & hi-fi clickable prototypes)
-
Synopsis: Executed the re-design process for a new landing page aimed at convincing potential visitors to take action for client Code Your Dreams utilizing the entire design thinking process.
-
Timeline: 1 week sprint
-
Role & Team: Acted as the UX Researcher and UI Designer & worked alone.
White journey descriptions look under-designed
​
Added color to the narrative of each journey stop. While I debated incorporating blobs for these as well - the more structured nature calls attention to reading the information here
Path takes up a lot of vertical space - consider using a carousel for the journey.
​
Forwent the carousel as the user could likely skip buttons relevant to them without a second thought but reduced some space between each path step.
Body text is left aligned, consider left aligned the "learn more" buttons.​
​
Left aligned "Learn More" button as it directly correlates with the body text that is left aligned.
Blue is too light and looks washed out
​
Used the same blue that's also used in the journey to tie the page together
Blue of journey line blends in
​
Used the accent pink color to continue reader engagement through scrolling down the page and draw their attention to the presence of journey steps
Code For Community looks centered because of the title length - center the title for ​Unlock Potential for consistency.
​
Centered "Unlock Potential" Header
You may also like...
