A Case Study in web layout, digital marketing and UI.
The Project
Create a landing page that applies knowledge of web layout, digital marketing and UI within a rapid prototyping visual design sprint.
Overview
S.E.O.C. (Statewide Education Organizing Committee) is a New Jersey based non-profit organization whose mission is to improve education outcomes for children by organizing school communities and advocating for equitable funding and resources. Found through Catchafire, S.E.O.C requested a full branding and website design.
Scope of Work
Design a landing page with call to action. S.E.O.C. did not have a website at the time of research. To be honest, since I was using this as a learning experience, I did not reach out to S.E.O.C. to get a more specific idea of what they were looking for. I used information provided by Catchafire as well as Idealist and looked at similar organizations in New Jersey and across the United States to gather ideas.
My Role
UX Research, Prototyping, Art Direction, UI Design
The Approach
Gather Data
From the ‘What We Do’ section provided by Catchafire, I found three key areas of focus for SEOC: informed, vocal and organized. Informed — presumably meaning, keeping up on the local news and policy changes in education. Vocal — uniting voices to advocate for or against educational governance decisions. Organized—gathering for events that promote learning about areas needing advocacy and building a network of community members.
I started with comparative research and looked for what information organizations like S.E.O.C. include on their websites. I looked at about 20 other education advocacy organization websites and found they all used similar content focused on engaging their communities in different ways through events, articles and confirming stances behind education related initiatives. Many of these sites had their missions prominently stated on the landing page, making sure visitors could not mistake the scope of work each organization represented. There were also prominent calls to action for volunteers, donation and newsletters.
In addition to what would be on the site, I also looked for inspiration for how it would look on the site. Most sites focused on education are… slightly tragic in their layout and information architecture . Hey, I get it, these people are working hard and have important work to do rather than think about design styles. One reoccurring scheme though, was color. Bright color. I also did research on New Jersey, this organization being closely connected to New Jersey through public schools, education, and state legislation. It made sense to me to use New Jersey symbolism when it came to designing the UI for this landing page. Spoiler alert: the state bug of New Jersey is … the honeybee! Learning this set off a lightbulb on the design front, honeybees are community focused and can serve as a reminder to be productive in our daily lives and to give back to the world.
Prototype
After I had an understanding of what might be needed on the S.E.O.C. landing page, I started laying out hierarchy and planning what content and elements would go where. I did a UI Audit of the74 to get an idea of visual identity and how I could create that for S.E.O.C. This helped with finalizing color use and typography on my own site — using similar conventions to comparative sites is a great way to help your user understand your brand.
Shown below are three wireframe samples — the first felt too column-y; the second was better but the ratio the images would need to be in was… odd. The third wireframe was made in Figma and finally started to come together. However, my suspicions were confirmed after feedback, when several teammates thought the top section was too cluttered.
Design UI
Next I put together a style guide, I had my colors and honeybee already but needed some fonts that supported a brand that was approachable, informative and inviting. The goal of S.E.O.C. is to bring communities together for educational equity, so they need to create a space that is welcoming. I used Fontjoy to get me started and a Figma plug-in so I could preview fonts. I chose to use three fonts, which may be a bit much but let me explain. I decided to differentiate organization information from the content they are sharing. I used one font, McLaren for the logo, navigation titles, mission and about. The other two fonts, Paytone One and Gudea are used for content.
The logo needed some help, in my opinion, so since I was doing this project for fun, I went ahead and redesigned it. Incorporating the bee with a graduation cap, to pay homage to the previous logo, within big bold and colorful letters. The font, McLaren, is really fun and playful and works well to balance the busy nature of a hard worker bee.
The Product
After the feedback stage, I went back in and rearranged my content again. The hierarchy to me needed to flow between organization’s information and the content they want to share. I did away with twitter and discussion pages because I felt that the content I was still providing met the criteria of what S.E.O.C. does. Be Informed by reading news articles about New Jersey education; Be Vocal by learning about and supporting campaigns advocating for change in school policies and funding; Be Organized by meeting with community members at events to learn more about advocating. (Really wanted to use “Bee” instead of “Be” here, but thought that might detract from the seriousness of the issues.)
Final Thoughts
I learned a lot from this project and look forward to more like it. My favorite part was the honeycomb drawing the eye through the page and then ending directly at the newsletter call to action. Still, I felt like I had a bit too much creative freedom, given I didn’t actually speak with the client and think those constraints will be very helpful in the future. It was interesting to learn about myself and how my own critical thoughts played out here more than they have in previous projects. I may still keep working on this, and I’ll post again if I do.
Until then, bee kind.
I like the way you connected the org's mission for community focus and productivity with the honeybee design motif!