Women in Web Dev— UI Case Study

Online Community for Female Developers

Introduction

Hello world, designers, aspiring designers and hopefully hiring managers (😉straightens tie).

This case study outlines my team's process for the UI portion of our work for Jenny Lang, Founder of Women In Web Dev. Women in Web Dev is a comprehensive online resource and supportive community for female web developers all over the world. This was a speedy project sprint of only 2.5 weeks however as a result of our amazing team and long productive days we were able to fulfill the client's goal of a complete responsive UX and UI redesign including a complete evolved brand identity and produce a clickable Invision prototype for both web and mobile.

The Team.

Myself and Isabella Aidar lead UI development and implementation, and our teammates Jisu Choi, Maja Ivic, and Viviene Svoboda tackled UX research and the design of the new set of wireframes.

My Role.

UI Design Lead, Client Discovery, Research, Art Direction, Branding, Logo, Colour, UI Style Templates, Pixel-Perfect Proofing, Case Study Graphics.

About Our Client

Why this work matters.

Women in Web Dev is a free online resource and community that supports women pursuing careers in web development, a disproportionately male-dominated industry. Women still make up only 11% of the developer workforce, get paid less than men and face unique career challenges as a result. Women in Web Development aims to be an active and consistent online community that women of any experience and identity can connect with and draw resources from.

How their work helps.

The website publishes stories and interviews by other successful female developers, the Facebook group fosters supportive connections, and the job board and training pages help developers find opportunities and strengthen their professional careers.

Above everything else the founder envisions the project as the place her users say “Ooof, I’ve found my home! All these other women are just like me and I can lean on them for support to help me navigate my career. If they can do it, I can do it too!” Additional enhanced support features including one-on-one mentorship calls, feedback sessions, and virtual co-working sessions are available with a paid membership.

What makes them different.

While other platforms like Women in Tech, and Tech ladies exist Women in Web Dev is the only online resource and support network serving female web developers specifically.

Jenny Chan — Founder of Women In Web Dev

About Our Challenge

How we can help.

Jenny the founder, worked quickly to get the first iteration of the site up and running and hired a friend to take a first pass at branding and styling. The MVP (Minimum Viable Product) has been proven, features, and pages have been added and tweaked and the site sees 400 visitors a month. In order to grow the user base and make the organization marketable to sponsors; it’s time to bring the entire website and brand experience to the next level.

Who we are designing for.

Women in Web Dev is catered towards any English speaking woman-identifying person working or pursuing a career as web development. Based on current web traffic, 60% of users are age 25–34, and 30% are 35–44.

Business goals.

Ultimately we are redesigning Women in Web Dev to help Jenny support her larger business goals — increase the number of monthly users, newsletter subscriptions, and paid memberships, in order to increase sponsorship income and paid job postings

Design goals.

• Improve visual hierarchy and consistency, and navigation — allowing uses to effortlessly scroll and skim through pages to preview or find the content they want with ease
• Enhance legitimacy — by creating a newer, competitive, and sophisticated brand and brand identity system.
• Spark joy and delight for users, creating a more friendly, welcoming, fun, and joyful experience.

UI Deliverables

• Develop and implement new brand identity across the website inclusive of typography and typesetting, colour pallet, imagery, and alignment
• Incorporate key elements of existing digital branding
• Create corresponding style Guide brand documentation
• Create 2 complete screen sets & clickable Invision prototypes for both web & mobile

Additional blue sky, nice-to-have deliverables

• Explore options to redesign and refresh logo while maintaining core elements of the current wordmark*
• Develop a set of illustrations to support communication, navigation, enjoyability and enhance overall legitimacy*
• Develop photo treatment, to improve consistency in brand experience across all uploaded images*

Brand Research

Current Website & Branding.

We started off the discovery phase by exploring and understanding the current website, features layout and brand. We took a peek at the Facebook page and we got a feel for the community and how the website currently works. Here is a look at the current state and some of the things we hoped to improve upon.

• Many pages feel cluttered and a bit messy which pulls down the overall sophistication of the visual experience and could lead to the assumption that Women In Web Dev as an organization is more of a smallscale, homemade effort, with less authority in the domain. This undermines the value of the main content and community to new visitors at first glance, and thus limited the growth of the organization, and additionally limits them further in sponsorship investment.
• Long, white text-heavy pages, make for a dull reading experience, and may make many readers feel overwhelmed
• It’s difficult to scroll and skim text-heavy pages to find specific content without skimming every line.
• Simple bolded text link navigation in the job board and sidebar make for a busy and sometimes confusing experience visually. What is a header, what is a link and what is the focus of the page?
• The main nav feels a bit messy and the logo could feel a bit elementary
• CTAs in some places could be more clear and could be confused with labels
• Many pages struggle to define a clear visual hierarchy and focus point for the reader

Domain Research.

Next we took a look at the brands and websites of other organizations in the same domain to get a better understanding of the market, and what users might expect to see. Below is a quick look at some key players: Women in Tech, Women in Tech World, and Girls in Tech Vancouver. Here are a few of the things we noticed worked well:

• The use of hand-drawn elements in the latter two, creates a comfortable softer human feel as opposed to the pure business achievement focus of women in tech.
• They all use somewhat playful fun colour which perfectly makes the experience feel welcoming and positive and exciting
• The use of visual section dividers makes it easy and navigate and understand how content is related to each other
• The overall brand experience of Women in Tech and Women in Tech World position the organizations as significant, trusted authorities of their domain, while Girls in Tech is dragged down by the uncomfortable size and equality of the icons, the clunky font choice, and the crowded typesetting and column width of the blog galley preview. It unfortunately results is the assumption that Girls in Tech Vancouver is a hokie community meetup group with a basic WordPress site, limited resources, and is a limited authority in the domain compared to the others.

Client Meeting

Using a 20 Second Gut Test to Set Visual Direction.

Based on the domain research and inspiration we collected, we built a gut test for our client. The gut tests consisted of around 20 snapshots from our research that represented an intentionally broad direction of color pallets, design styles, and imagery. We ask the client to think out loud, and rate each snapshot with her gut reaction (like Tinder for art direction). This candid and visceral feedback allows us to begin to explore and develop potential art directions that are aligned with the founder's desired look and feel.

This — Our client had a strong affinity towards
• Simple colour pallets and muted colours
• Layouts with lots of airy white space
• Websites with trendy illustrations that felt “Techy”
• Diverse, non-denomination Illustrations without facial features

Not This — Our client had a strong affinity against:
• Loud designs
• Bright colours
• Any ideas that felt busy or messy
• Illustrations and colours that felt too childlike or cute

Getting to the Heart of Women In Web Dev

We worked through a number of onboarding questions designed to spark conversations and learn about the client, the organization, and her vision for the project in detail. Here are some of the key take-aways we needed to consider as we began to create the two art directions for our client to choose from.

• Clubhouse First, Networking Social Second — Women In Web Dev was first and foremost a virtual clubhouse to support female coders. Creating a safe, comfortable and welcoming space designed for users was the most important goal. While it was important that we also maintained a strong professional tech image externally for hiring partners and sponsors, the internal-facing brand was first a comfortable home for its users to kick back, work and drink coffee and its high-powered, blazer wearing, networking alter ego was secondary.
• Please Not the Matrix — One of our initial ideas was to experiment with referencing coding and traditional hacker type imagery (monospaced fonts, bold contrasting colours etc). However, we learned definitively that she didn't want it to feel like another hacker type coding resources. “Just because we code for work, doesn't mean our hangout space has to feel like the matrix,” was the sentiment we heard. That made sense to us and underlined our understanding of the website as a cozy community space.
• Feminine, but Not Girly — In terms of female branding, we concluded that the client wanted to be careful not to make the space feel too girly or too feminine however she did still want to appeal to the female demographic. The space should feel female, just not too girly.
• Tweak but Don’t Toss — She was tentatively open to exploring new logo iterations however it was important that we keep the core anatomy of the wordmark unchanged.
• Everyone Welcome — The space is welcoming to all women, including all female-identifying users ❤️

Designing for Everyone

Developing Our Gendered Branding Design Philosophy.

After the meeting, we were faced with a very interesting dilemma regarding gendered branding. Before speaking to the founder our team's initial thought was that the project shouldn't feel feminine at all. Women don’t need different pens to write (as famously articulated by ellen), why would they want to have a differently branded website? In terms of our website we grappled with the following questions 🤷‍♂️: Is the space allowed to feel feminine or should it feel gender-neutral? Is using traditionally female colours sexist?

But after the client meeting, reflection and discussion we noted that while the above is true: it’s also true that many women on average have different stylistic preferences than men, lots of women do like traditionally feminine colours and brand identities, feel more at home in feminine feeling spaces and prefer to decorate their own living spaces differently than their male-identifying counterparts — be those preferences from birth or from the way they were cultured. And since we are designing a product for women, inclusive of any women identifying users we should design a space that on average women would prefer.

Our Working Gendered Branding Design Philosophy.

• We must acknowledge that we can not design a space that feels perfect for everyone in terms of gendered branding preferences.
• We will aim to design a space that feels somewhat traditionally feminine, that we hope MOST users will love but that ALL users will at least feel comfortable enough to use and get value from.
• We can’t aim to please everyone but we will aim to include everyone
• Our design should not alienate users by being too traditionally female or “girly”

Asking Why

Defining Purpose.

After the client meeting and philosophizing, we were excited to kick start the creative portion of the process starting with the definition phase.

We use a tool called ‘Design Inception Canvas’ which is a whiteboarding exercise that structures the definition phase and visual language development into 7 sections to work through. The first step is to clearly articulate the purpose of the project, app or organization, and next, the purpose of the visual design for the website. Why does this website exist? What is the visual design helping to achieve? This important step helps the design team work together towards a common goal, and ensures we are on the same page as our client.

Defining The Purpose of Women In Web Dev

Why does Women in Web Dev exist? What is the definitive purpose of the organization?

Defining the Purpose of the Visual Design

Why are we being hired to redesign this website? What is the purpose of the branding and what will it help to achieve?

Setting the Mood

Defining Visual Language.

Next we conducted a whiteboarding session to tease out and establish a set of visual language that would steer the visual direction of the project.

Mood & Voice

First and foremost we wanted our users to feel comfortable, and at home in their new female, tech, clubhouse. If the space was a person she would be welcoming, impressive, inspiring and she would always made sure you felt safe.

Initial Colour Direction.

We agreed colours should build on the original blue and pink of the existing brand identity as requested by the client. We imagined a soft off white background with the addition of a stronger purple or blue that might reference the original hyperlink colours of web 1.0.

Imagery & Shape.

Finally, we felt imagery for the brand should be authentic, human, and a little bit badass 😎. We concluded shape should definitely include illustrations contained by curved shapes paired with definitive scrollable sections padded with airy white space.

Drafting the Mood Boards & Style Tiles.

After setting the direction with common visual language, the step is to capture images and colors that visually articulate ideas for art directions. We worked independently to avoid groupthink and built out two potential art directions. In addition to mood boards we took each direction one more step down the path and created mock style tiles. Style tiles are like a working draft of the shape of the brand system including colour, typography ideas, iconography illustrations and imagery.

Converging on Our Art Direction.

We came together with our client to present the directions, get feedback, mix and match and tweak her favorite elements. Here are the winning components.

• Use of a warm off white background color to create a sense of comfort and home opposed to strictly business and tech environment for users
• Versions of pastel coral and teal
• Using authentic and casual photography of female web developers working from home and other spaces (A decision to stay away from really traditional canned stock imagery. While still leveraging images that allude to the millennial remote working dream.)
• Sophisticated serif header pared with a sans legible body copy
• Round CTAS
• Using nondenominational illustrated characters opposed to more personalized characters
• Use hyperlink purple instead of blue for serifed CTAs — intended to draw a connection to coding and web development

Design Wake, RIP — Ideas we gracefully said goodbye too.

• Don’t proceed with Exploring the use of treehouse/clubhouse imagery to anchor the idea of imagining women in web dev as a safe community space rather than a website

Final Mood Board & Style Tile

[INSERT]

Developing the Complete Brand System

After confirming the art direction with our client we began to the process of experimenting to transcribe and develop the art direction into a more complete brand system culminating in the creation of the complete style guide.

Typography.

After preparing a few sets of potential font pairings for our client, we settled on the google font pairing Playfair for Headings and Poppins for Body Copy. These are beautiful font sets and they will also avoid annual licensing fees for our client. Next we built out the font hierarchy using a font base of 16, and a growth rate of 1.5x for a definitive, contrasting and effortless hierarchy.

After establishing the hierarchy size intervals I used and 8pixel vertical grid to work out the spacing relationships for a core set of typography paring instances.

Developing the Complete Colour System.

Next we deloped the colour pallet. We started by evolving the current state pink and blue towards the classic millennial pink and teal that allude to the part of the work remote allure of tech careers. With input from the client we settled on a coral iteration instead of pink and a friendly but strong purple for links and sub-navigation. Lastly we used the colour pallet in test scenarios and illustrations and tweak the background color to the more subtle soft white as used in this case study.

After determining the final colour pallet. We developed an extended pallet to use in the illustration sets. To do this we added white and black to the base colours at intervals of 20% to create the complete set of colour values. Using this tool as a pallet allowed us to quickly and efficiently edit and colour the illustrations, with confidence they would work harmoniously together and complement the rest of the branding.

Illustrations.

Illustrations are an effective way to bring warmth, lightness and joy to the experience. In order to implement a complete set usable of illustrations for the project within the budget and timeline we leveraged the Undraw’s amazing set of open source illustrations. This allowed us to quickly create, edit and colour a complete set of illustrations within the limited timeline. The illustrations allowed us to create a friendly and consistent header for each page and completely transform the membership and about pages from primary text into an effortless, friendly progressive, scannable and discoverable experience.

Imagery.

We wanted the imagery in the space to evoke a mixture of inspiration and strength. We hand-selected images of the badass, confident, authentic millennials we wanted to embody and celebrate - ‘killing it’ in their field and clearly living their best life. We decided to stay away from inauthentic, overproduced stock imagery. We want the interesting, effective, and inspiring women on the screen to generate the feeling: “Damn I want to be like them, I can do to this!”

Many people are drawn to tech by the attractive, remote working millennial dream and we wanted to leverage that. While be cognisant to include a diverse range of workplaces and styles, but with the same sense of confidence and attraction.

Logo Redesign.

Our client was initially keen on keeping the same logo, but after discussion she was open to the idea of exploring potential evolutions. We agreed it would be important to keep all the core elements of the logo unchanged and that evolving the logo would be really beneficial to creating a cohesive brand experience. After many iterations, font and weight combinations, angle matching, and balancing and input from the client, we created the final logo below.

The Final Product

That wraps up the discussion on process and design decisions. Here is a look at some of our favorite final screens and the links to the complete clickable Web and Desktop prototypes.

Screen Mockups.

These images showcase the Support Page user flow on desktop and mobile, the Scholarship page user flow on mobile and the Desktop version of the Membership Page, Scholarship Page and Homepage

Cleanup & Hand-Off.

There was one last step before we poured our Friday beers. Like the good designers we are, we prepped and organized our design files and tidied the hand-off folder while the project was still fresh.

I use a plugin called ‘Sketch Cleaner,’ to quickly sort objects, folders and artboards by X-axis and Y-axis location and another plugin called ‘Rename It’ to quickly label, objects and folders and artboards.

And last but not least we prepped the hand-off folder for the client and potential developers: simply oranizing and labeling project files, wireframes, saving all images used in one folder, exporting illustrations to .png and icons to .svg in respective folders. And then we poured a well deserved Friday beer 🍻.

Mission Accomplished

In a matter of 17 days, we did exactly what we were asked to do by the client. We transformed the existing Women In Web Dev experience into a comfortable, easy-to-navigate and welcoming online ‘clubhouse’, all while enhancing and defining the overall brand image.

Goals Achieved.

✓ Improve visual hierarchy, consistency, navigation
✓ Enhance legitimacy with new competitive and sophisticated brand
✓ More friendly, welcoming, fun and joyful
✓ Implement UI and provide a complete set of web and mobile screens
✓ Branding Style guide
✓ New Logo
✓ Complete set of illustrations

What our client said.

When I saw the end product of the redesign, I was blown away at how it hit all of the objectives that I had outlined for the team. It was a pleasure to work with this team and I couldnt be more blown away by the end result I didn’t know what I really wanted it to look like, but they have really hit the nail on the head

- Jenny C, Founder of Women in Web Dev

Future Considerations.

• Custom Illustrations — If we had more time and a budget we would love to explore custom illustrations for this project. Either spending time to develop a unique illustration style for the site or exploring and hiring an illustrator with a unique style that could add even more personality and branding to the site really would be amazing. As the community grows and new sponsorship and funding opportunities develop I think this would be an amazing opportunity for Women In Web Dev.
• Branded Photo Treatments or Custom Photography — This idea landed out of scope for us, however developing a subtle photo treatment that can be implemented on untreated uploaded photos with html5 or javascript would do wonders to bring the blog pages and photography together even more. While it would be amazing for a photographer to shoot all the contributors in the same style this is likely to always be out of scope for the business model. But using a coded filter to treat the uploaded photos would be a fantastic solution
• Non-Stock, Stock Photo Set, and Guidelines — We spent a fair amount of time searching for images of women working that evoked the exact feeling of inspiring, strength and coolness that we imagined for the site. It would be helpful to create a library of more photos as well as guidelines for choosing photos, so as new blog content is developed and published it will continue to push the brand narrative we have created.

Thank You.

Thanks for reading, clicking skimming and scrolling through this case study. We had a great time learning about Women In Web Dev and working through the lunchtime discussions about gendered branding. Women in Web Dev is an awesome resource and we are so proud of the work we were able to accomplish for them.

Check out my portfolio for more projects, questions and contact info 😎
www.robmorton.ca