Drawing the eye to an inspiring cause: Code Your Dreams and the power of visual design
Context
I had reached a new chapter in my immersive experience as a budding UX professional. The art of visual design had been brought to the foreground of my exploration, and I was given the opportunity to apply all that I had learned in a challenging new way.
I was tasked with creating a landing webpage for Code Your Dreams, a Chicago-based non-profit whose core initiatives lied in educating underserved youth groups in the world of computer science. This organization has established a platform in empowering a diverse generation of students to enter tech careers, and a landing page had the potential to serve as an integral touch point for augmenting outside involvement in these programs.
While I immediately knew that I wanted to make something pleasing to the eye, I also knew that the perception of aesthetics was incredibly subjective.
It was important that I spent the next four days not only utilizing design principles surrounding what should be included on the interface surface, but also continuing to consider the human-centered approach to supporting my decisions with a specific why.
Preliminary Research
UI Audit
It was clear that my timeline was going to pass by very quickly, but before I could fully dive into my design process, I had to do my best to understand my frame of reference. I studied Code Your Dream’s current interface, taking note of ways in which I could best build off what was already out there.
While landing pages can certainly focus on illustrating a specific product or service, I was viewing mine as an introduction to the key components of the organization as a whole. It then made sense to consequently narrow my focus to the working homepage.
Key Notes + Trends:
- Repetition of saturated pink and blue color palette
- ‘Sky’ motif employed, repetition of clouds
- Poppins (Sans-serif) font used throughout
- Youthful, energetic, positive overall feel
Competitive Analysis
While making recommendations about removing or adding content wasn’t really within the scope of this project, it definitely helped to draw comparisons to the online presence of other similar groups, non-profits focusing on technology outreach. (Girls Who Code, CodeNow, Kids Teach Tech, amongst others).
Key Notes + Trends:
- Prominent hero image at top of interface
- Clear call-to-action buttons, emphasis on donations
- Strategic ‘pops’ of color to aid directionality
- Unassuming sans-serif font styles
- Featured photography of active participants
- Very similar overall layout between sites
Goals
During the last segment of my initial planning stage, I sought to hone in on the distinct user perspective I was targeting with this project.
While time constraints prevented me from conducting extensive research to reach this determination, I had a decision to make.
What were the core goals my design could potentially help to achieve?
I found the most valuable resource to answering this question to be watching interviews and testimonials by those most familiar with the organization’s landscape. This is when I truly became inspired!
As Code Your Dreams heads into the future, here are a few highlighted ambitions that stood out to me:
- Increase visibility of all programs
- Ensure steady stream of donations
- Encourage spread of exposure via personal corroborations
- Grow corporate partnerships
- Collaborate with more tech companies, sharing relevant resources
- Promote CoderHeros, a new concept developed in reaction to COVID-19 funding challenges
So, where does my landing page come in?
I now could now picture my intended audience and establish the driving initiatives behind my own design:
Create something…
…that gestures to identified areas of need, leaving the most room for potential benefit with continued views.
…aesthetically pleasing that is also informative, easy to scan, and comprehend.
…that captures the lively nature exhibited by young students, while also building trust in the legitimacy of the curriculum they are taught.
Early Design Iterations
I began by putting a pen to paper and really thinking about the page from a zoomed out perspective. I wanted to make sure each section would be able to stand alone, and also be able to be integrated within a cohesive overall flow as a user scrolled from top to bottom.
I first sketched out basic page ratios, distinguishing key components such as: image placeholders, call-to-action-buttons, icons, and differentiation of text fields. After drawing each page individually at this level of detail, I merged them into one wireframe.
Using that wireframe as a reference, I digitized my wireframe using Figma. This was a great way to lay down the framework for iterating my designs from this point forward.
Visual Style + Content
This was the point in my story where I had to contemplate how I was going to implement visual design components to bring my mid-fidelity wireframe to life!
My exploration thus far had led me to come up with some rough ideas of how I wanted to represent the Code Your Dreams brand visually:
- Carrying over blue + pink contrast, while giving it a slightly more modern aesthetic
- Utilizing color to emphasize desired user flows and actions
- Accentuating the ‘dream’ motif of the original homepage with visuals that communicated the ‘power of imagination’ played up in the organization’s structure and values
- Juxtaposing the format traditionally exhibited by non-profit educational materials with an organic fluidity, telling a unified story
Concept Brainstorm
I really wanted to start to see how some of these concepts would look and come across to our targeted user. I compiled a collection of images that inspired me and organized them into a mood board.
What category of feelings do these artworks evoke upon viewing?
Does this response align with the aims of our client’s objectives?
Color Palette
I knew that having a powerful hero image was crucial is developing a successful landing page, and this ultimate discovery was what made my working color palette solidify.
Typography
After choosing such a bold illustration to kick things off on my page, and knowing that I wanted to repeat saturated color usage throughout, I decided upon Montserrat as my principle font.
I appreciated its clean aesthetic that didn’t ever seem to overwhelm the overall composition, even when there was a fair amount of text.
Iteration Checkpoint
My job was still far from over, but I had incorporated selected facets of high-level content and curated pages to exemplify overarching themes.
The included pages were as followed:
- Hero image with introductory text, featuring a large call-to-action button encouraging donations, and quick access to social media platforms
- Brief descriptions of key stages of Code Your Dreams teachings, illustrated by individual icons
- Larger section differentiating the organization’s two core modes of regular programming
- Detailed inspiring benefits of Code Your Dreams, complete with statistics
- Larger section introducing CoderHeros (comic-inspired backdrop)
- Group of current partners, along with personalized affirmation from a former collaborator
- Text input field where a given user has the ability to sign-up and be added to the organization’s email list
- Footer featuring a parting slogan, as well as another link to social media or additional press materials
Critical Feedback
I shared my current mock-ups with my peers and found their comments to be invaluable as I closed out the week!
Main Takeaways:
- The second and third pages should be switched. It seemed odd to introduce facets of curriculum before explaining the programs themselves.
- The intensity of the hero image was appreciated, but not everyone thought that it fit with the Code Your Dreams ethos. More empathetic photography was desired to tie it all together.
- Many felt some areas of text were difficult to read, especially when the bright pink was directly contrasting the darker teal. It was suggested that I tap into the lighter, softer hues of the design’s cloud-like palette.
Final Layout (!!)
Next Steps
It would be impossible to truly gage the success of this project without running it by a new wave of participants, preferably from our target demographic. I look forward to conducting a series of usability tests and interviews and further refining my design!
It is also noteworthy to reiterate that the artwork I chose to feature as a hero image isn’t my own. I would look forward to either corresponding directly with Tubik Arts to negotiate a licensing agreement or creating an original piece inspired by its incredible essence.
