Women in Web Dev is an active, well-rounded, and consistent online community for women around the world of any background, experience, and identity. This is a platform where women may connect with others and exchange resources. Aside from providing professional development features such as a job post board and training/workshop opportunities, Women in Web Dev is also an emotionally supportive online environment. Think a cozy ‘clubhouse’ for female developers.
A redesign of a responsive web for the existing site of womeninwebdev.com, freshening up and the look and feel, while also making it more user friendly. The business goal is to increase the number of newsletter subscribers, which would in turn help increase sponsored job posts.
3 week sprint
Sketch, Photoshop, Illustrator, InVision
UI Designer
Client gut test, comparative research, two style directions, custom iconography, typeface pairing, illustration editing, logo design, style guide, high fidelity mock ups for desktop and mobile
Playful, Modern, Millennial, Bright but Soft
Welcoming, Professional, Fun, Curious, Bubbly
Emotive illustrations, cute iconography, cozy stock imagery
Cream, Coral, Teal, Cobalt. This direction would use a classic white background for a brightening effect.
Playful, Modern, Millennial, Bright but Soft
Welcoming, Professional, Fun, Curious, Bubbly
Emotive illustrations, cute iconography, cozy stock imagery
Cream, Coral, Teal, Cobalt. Aside from one colour variation, quite
similiar to our other palette but with a brighter feel because of the white background. The white background also creates a sense of spaciousness. An open door to a clean room.
Purpose Meets Visual Design
We created these directions based on the findings from our gut test. The gut test is a presentation deck we create with 21 timed slides featuring different design and colour ideas, where the client rates and vocalizes their thoughts on each of the slides presented.
From the gut test we learned that cleanliness, good spacing and hierarchy were the most important factors above all else. Teal, navy and pink tones were preferable, and the use of more complex iconography was encouraged. The client did not like anything that was too busy or clashing, from colours to movement to designs, and when presented with illustrations, she preferred non-denominational illustrations over ones that had facial expressions, since they draw more attention to the action rather than an emotive assumption. While the client is drawn to traditionally feminine palettes, particularly pink, she likes the idea of balancing it out and not stereotypically gendering too much based on colour. The use of a classic, bold, and trusting colour such as navy, black, and/or white to compliment the softer palettes would be preferable. We also learned that rather than going full sans serif for fonts which is the modern “tech-y” approach, she was drawn to serif headers with sans serif body, a more magazine-like aesthetic.
We know that the project goal is to be a consistent online home to foster connections, support and career navigation for women in web development. Similarly, the visual design needs to communicate that this is a safe and welcoming platform. When asked what makes this brand stand out from other competitors, the client told us that the emotional component was a large factor, so we knew this distinction was important in inspiring our branding directions.
Based on the clear results of the gut test and brainstorming our inception together, my UI partner and I both knew that the directions we came up with would have similarities in colour and feel. Instead the focus would be on the subtleties for differences, allowing the details to be at the forefront when we send the directions off to the client. We knew pink and blue had to be included in some form, and neither of us wanted to go for the traditional “Venus razor/Breast Cancer awareness ribbon” fuschia pink which is the current pink used on the client’s current website. While some of our colours may be similar, with the exception of an extra colour or two, we instead decided to play around with using different background tones, iconography and illustration styles.
Final Style Guide