The Future is Female
Team: 4UX, 2 UI
Time: 3-week sprint
Tools: Adobe Photoshop, Figma
Project Management method: Scrum
About T.O Women in Technology
Product Designer, Sandhya Kumar founded T.O. Women in Technology. TOWiT is a “grassroots” movement that aims to supplement educational efforts in raising the overall standard of learning and social awareness in Toronto’s tech & STEM communities, to promote men-for-women advocacy, and to focus on the other end of the “#metoo” movement.
Project Brief
We began the design process by meeting with our clients to understand their desired outcome for the project better. From our initial meeting, we learned that TOWiT already had an established visual direction and style guide; therefore, our primary focus was to bring their vision to life throughout the website and mentorship platform. The goal of the mentorship platform is for young professionals to find a mentor in their industry. As a team, we decided to redesign TOWiT’s website and mentorship platform into a responsive site, so that the design fits both mobile and desktop requirements.
Problem
Our main problem was that TOWiT had difficulties in establishing how to connect mentees with a mentor. The UX team delved into solving this problem through research, client interviews, and user testing. As one of my team’s UI Designers, my biggest challenge was finding a way to portray the client’s desired mood for the overall website and to convey the company’s mission through the visual design and specific colour choice.
The Design Inception
Since TOWiT already had an established brand, my partner and I began our research by better understanding the overall brand, the desired mood portrayed to users, and how we could make our spin on their established brand.
For the first step in designing, we created an Inception Diagram to establish the design direction we wanted. To generate the Inception Diagram, we first had to understand the company’s “Why.” TOWiT’s “Why” is to “create a responsive web design to showcase a movement that works to neutralize workplace cultures in technology to address intersectional gender inequality.” Once the overall goal for the design was established, we moved on to finalizing the mood. By talking to the TOWiT team and examining their prior plans, we decided the mood should be bold, futuristic, modern, empowering, and welcoming. From there, we finalized colours, shapes, movement, and space that would ultimately all support the “Why” and create an inviting, powerful mood.
Mood Boards
Secondly, I created two mood boards to embody the look and feel previously established by TOWiT. Both mood boards are quite similar; however, the noticeable difference between them is that one is more modern and bold, while the second is more futuristic and has a “tech feel.” They both express the overall look and experience TOWiT desires to communicate with their viewers. I used both of these mood boards as inspiration when designing the final Hi-Fi design.
The Colour Palette
The solution to our problem was solved through the use of the inception diagram, mood boards, typography, and colour palette. The colour palette used throughout the design was primarily black, red and white, with royal blue as the accent colour. These colours perfectly manifest the futuristic “superhero” vibe we were going for, in hopes of meeting the overall goal of the site by making mentees feel empowered and confident; the use of red achieves that goal, while the use of blue and white still makes the overall site feel welcoming.
The Final Design
Once we received the mid-fidelity designs from the UX team, we began the final design process. We started by focusing our attention on the website’s Homepage and About Us page. These pages were our first priority because it would define the user’s first impression of the overall site, and the design from these pages would influence the mentorship, onboarding, and mobile pages.
Future Consideration
My future consideration to the TOWiT team would be to implement a testimonial section that allows mentees and mentors to score their own experiences with one another, and to add tags and specializations for industries outside of STEM, to provide further opportunity for growth.
A challenge I found when designing the Hi-Fi prototype was finding the right balance between using the established design system and implementing my flare. I constantly asked myself if my design was on-brand. If I had more time, I would have designed a mobile version of the “selecting a mentor” section. This portion of the platform is vital; therefore, it would have been nice to design what it would have looked like on a mobile display.
