About Women of MENA in Technology
Women of MENA in Technology ( WoMENAIT) is a US Non-Profit 501(c)(3) Organization established on March 29, 2015 in Silicon Valley with a mission to connect, mentor, and empower Persian, Middle Eastern & North African (MENA) Women in Technology globally. The organization mission is empower Middle Eastern women and girls around the world to strive in the fields of technology, STEM, innovation, and entrepreneurship despite the conventional beliefs, societal pressures, or inequality challenges.Overview
Objectives:
Our UX design team is tasked with conducting the research and developing a modern-looking user-centered and intuitive website redesign to bring the WoMENAIT into the 21st Century digital arena.User Problems:
- Intuitive user experience
- Easy access to information and events
- Easy checkout for membership page
Organization Problems:
- Attract and retain new members
- Brings revenue to organization
My Role:
Design Team Leader, UI/UX Designer, UX ResearcherTimeline:
2018- PresentSkills:
Web Design, Prototype, Wireframe, Iconography, Pixel Perfect Design, Accessibility, Typography, email campaign.Tools:
Design Process
The entire my UI/UX design process can be divided into 5 phases. At each step I share the outcome to the leadership to receive feedback, and hence it to becomes almost perfect!
Meet Mina
Once we established the user’s needs and goals and identified the community, it’s time to put it into perspective through Persona. Our persona is Mina who represents a major group of professional Middle Eastern and North African young women with similar goals and viewpoints. She is going to be our reference throughout the design process and is keeping us focused on what’s important to her.
User research
In order to understand the problem while emphasizing a user-centric approach, we conducted user interviews to gather more data on users, their needs, behaviors, and pain points. I started off the project by conducting 5 interviews. All of my testers were female who use Internet daily and represented a wide array of careers that fell into WOMENAIT target demographic.
This report outline the findings and recommendations from usability testing and google analytics data for WOMENAIT’s website.
The three primary recommendations are to:
Add a membership section on the main page, so visitors can see the opportunity.
Add membership benefits on the membership page below each option.
Provide more donate options, like the monthly donations to have a long-term donors.
These recommendations are designed to improve the usability of the site, encourage becoming a member of the WOMENAIT and grow the revenue and to provide a satisfying experience for visitors to enjoy. Read full report here
Affinity Mapping
Affinity Mapping was conducted to help our team catalog and categorize pain points, brainstorm possible solutions, and develop our persona. To have an accessible Affinity map, I used Trello App.
Common User Needs and Pain Points:
I need to know WoMENAIT’s programs.
I need to know the mission of the organization.
I need to know how to sign up for WoMENAIT’s events.
I prefer to buy eTicket.
I prefer become a member.
Task Flow
In this project, the UX task flow revolves around the user's goal of purchasing a membership from a website. The task flow begins with the user landing on the home page, where they are presented with an overview of the website's offerings and navigation options. From the home page, the user proceeds to the membership page, where they can explore different membership options available. The task flow guides the user to browse through the membership details, benefits, and pricing information, helping them make an informed decision.
Once the user finds a suitable membership that meets their needs, the task flow facilitates the process of initiating the purchase. This involves selecting the desired membership option, providing any necessary personal information, and selecting a payment method. Throughout the task flow, the user receives feedback and validation messages, confirming their selections and ensuring a smooth progression. The task flow concludes with the successful completion of the payment process, indicating that the user has purchased the membership.
By designing an intuitive and user-friendly task flow, the aim is to provide a seamless experience for users, enabling them to effortlessly navigate through the website, find their desired membership, and make a purchase with confidence.
Wireframes
After defining the UX task flow for the website, the next step is to create wireframes. Wireframes are visual representations of the website's layout and structure, focusing on the placement of elements and content without including detailed design elements. Using the task flow as a guide, the wireframes are designed to reflect the user's journey and interactions with the website. This includes mapping out the home page, the membership page, and the various screens involved in the purchase process.
The wireframes depict the essential components of each screen, such as navigation menus, content sections, forms, buttons, and any feedback or validation messages. They provide a clear and concise representation of the website's structure and help ensure that the user experience flows smoothly. By creating wireframes, product manger and developers can visualize the overall layout and functionality of the website, allowing for iterative refinement and feedback before moving into the visual design phase.
Wire flow
In addition to creating wireframes, I have also developed a Wire flow diagram that illustrates the starting and ending points of the user journey. This diagram provides a visual representation of the sequential steps and interactions involved in the user's path to purchasing a membership on the website.
By sharing the task flow diagram with developers, they can gain a better understanding of the user's intended path and the desired functionality at each stage. This helps ensure that the development team has a clear reference
Mockup
Now it's time to add visual elements and color to create the mockup for the website. The mockup will bring the wireframes to life, incorporating the desired visual design and branding elements. Based on the task flow and wireframes, the mockup will focus on enhancing the user experience by creating a visually appealing and engaging interface. This includes selecting typography, colors, and imagery that align with the website's overall aesthetic and brand identity.
The mockup will showcase the finalized layout, visual hierarchy, and interactive elements such as buttons, forms, and navigation menus. It provides a realistic representation of how the website will look and feel to users. This way I collaborated with product manger and developers, to ensure that the visual design aligns with their expectations and requirements. It serves as a visual reference for the implementation phase and helps maintain consistency across different screens and components of the website.
Usabiliy Testing
In order to test the functionality and accessibility of the new design of the WoMENAIT pages, an initial remote usability test was run on a sample of 5 potential users right after creating a wireframe before jumping into a high-fidelity mockup. The main objective was to identify recurring problems related to the execution of specific tasks.
For my user testing session, I chose to identify five participants within a target demographic. Then observed the participants in a controlled setting as they performed a series of tasks involving the WOMENAIT website. In my case, moderator (myself) guided testers through tasks, instructing them to “think aloud” (i.e., narrate their thoughts and actions) as they worked through the tasks. The predefined tasks were designed to allow for exploration within certain areas of the site that improved.
Impact
One of the WOMENAIT’s goal is building a loyal community, to understand the location of the website's visitors, number of returning and new visitors, number of visits of visitors I chose Google Analytics (GA) tool.
43.7% of the site visitors use their cellphone. I recommend to optimize the mobile version of the website.
Also most of the visits are from the USA and Canada, I would recommend organization start advertising in Middle east and North Africa since their mission is to empower women of MENA in tech.
