UI Case Study: Immigrant Women in Business
Empowered women empowering women
Our client, Immigrant Women in Business approached me and my UX design partner Ashvini N. for a website re-design.
IWB is a Toronto based not-for-profit organization focussed on helping new female immigrants establish and succeed in the corporate world of business. The founding members are all highly accomplished and powerful women who wish to empower other women by sharing their own struggles, successes and networks with them. What sets IWB apart from any other similar organization is their collaborative and supportive spirit.
Current Website
The current IWB website is just a collection of photographs from the IWB networking events, put together with some text to describe the purpose and goals of IWB
The website has no distinct personality which would make IWB stand out as an organization and the benefit and impact of this powerful social organization is not getting communicated to the users.
The Challenge
To create a distinct identity for IWB and to redesign its website to reflect the impactful, giving and collaborative nature of the organization.
Research
The UX research focused on understanding the needs of the users as well as the motivation and passion of its founding members, so in-depth interviews were conducted with new female immigrants, founding members of IWB and its Board of Directors.
These comments from the interviews hold the key to the identity of IWB.
“It is not about making profits, it is just about people.”
“The level of energy and collaboration during the events are indescribable. It’s something that I have never experienced anywhere else.”
“It’s the giving.”
What stood out at the end of our research was the warm and welcoming character of IWB which makes it unlike other organizations, and the powerful inspirational stories of its members. Beyond doubt, these two factors are the essence of the organization and had to be reflected in the UI design as well.
Mood
As a UI designer, I saw two keys areas that needed to be equally represented. Since IWB is an organization of women, by women and for women, the feminine aspect is undeniable. This also encapsulates the caring, supportive and giving qualities of the organization. What is equally important is the corporate aspect of the organization, making it strong, powerful and almost masculine in nature.
This was my guiding mood diagram which also reflected in my mood board.
I sought visual elements that were bold and strong yet soft and flowing. I opted for curves versus geometric shapes as they captured the feminine qualities I was seeking.
Colours
The colour palette is guided by the inherent psychological value of each colour. When it came to the primary colours I went with families of blue, purple and pink.
- Blue is the colour of intelligence and trust. And nothing says corporate, like blue does.
- Purple is the colour of intuition and I wanted to incorporate it to denote the visionary nature of IWB.
- Pink, especially the softer tones, is feminine and stands for the loving, caring and supportive aspect of IWB.
The accent colours – Grey, yellow and green provide the contrast and therefore create interest.
Typeface
Like the other visual elements the typeface needed to be strong yet soft and I opted for a contemporary sans serif font like Nunito. It is modern and conducive for the corporate world yet its rounded edges endow it with a certain degree of softness.
I used the Bold, Semi-bold and Regular weights of the font.
Illustrations
A key element of the design were the illustrations. I wanted every woman coming to the site to feel included and represented. Stock photographs, are simply incapable of representing the ethnicity of every single immigrant.
In addition to conveying the diversity, the illustrations also communicate the feelings of care, support and sisterhood, which is a hallmark of IWB. The illustrations also allowed me to suffuse subtle messages of love, infinity and wholeness through the use of common, universal symbols.
Patterns
I broke the boldness of the deep blue solid background by using gradients to soften them.
Overlays of subtle and contrasting curves divide the space, adding movement and fluidity.
Logo Redesign
The current logo of IWB lacks visual appeal and more importantly, it does not reflect the spirit of IWB. Also since it is photograph based, it has limited use in print media.
After hours(days, to be more precise) of exploring typography, sacred geometry and universal feminine symbols, I arrived at the new logo that uses the negative space of the alphabet ‘B’ to create the silhouette of a woman in ‘B’usiness.
The tonal variations indicate the diversity of the immigrants. In keeping with the original aim of combining the strong with soft, I rounded the silhouette to arrive at the final logo.
Simple, chic and contemporary this logo retains its identity even when rendered in monochrome, making it more versatile than the existing logo.
Style Guide
Given below is the detailed style guide for the re-designed website.
Design Decisions
It is now time to see how these various elements came together in the new re-designed website of IWB. For the sake of brevity I only use the homepage as a reference for my design decisions.
The complete website design can be viewed in the prototype.
Prototype
To see the final prototype please click here https://invis.io/QKGL0L5ME87#/287968919_Homepage
or see a quick video of the website below.
Conclusion
The flow of information and ease of navigation of the new site makes the user experience seamless and trouble free, while the well researched and attractive interface makes that experience a memorable one. Both the UX and UI of this project are robust and versatile enough to accommodate any changes and additions to the site in the future, like an exclusive member-area or blogs.
This website re-design is a wonderful blend of function and aesthetics, a fact endorsed and greatly appreciated by our client.
