large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/women-and-women-first-womens-mentorship-mobile-app-uxdi-a1c74bb16ec6?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Julia J Park <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*O3nXAZRSLqQsIbrkIe55Ag.png">
<blockquote>“Gender inequality is not only a pressing moral and social issue but also a critical economic challenge. If women — who account for half the world’s working-age population — do not achieve their full economic potential, the global economy will suffer.”</blockquote>
<blockquote>&#8211; McKinsey Global Institute</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hicYy8OkEbYdjtqCIHPnXw.png">
<h3>Overview</h3>
As the fourth project of General Assembly’s User Experience Design Immersive program, we were to work in a group on working with real-world design constraints and shipping our designs on the subject that we were passionate about.
We had roughly two weeks to 1. submit a project proposal, 2. when approved, submit a project plan, 3. conduct multiple research to come up with a platform to build, 4. to actually build the prototype of the platform and conduct multiple rounds of usability testings, and lastly, 5. to prepare for a presentation with clients.
After struggling a little on coming up with a mutual topic that all team members are passionate about, we have found out that women empowerment is such an important topic for every member, and that it would be a great chance to talk about it, since all members are women indeed. Although we wanted to create an empowerment app for all women, due to our constraints, we decided to start with a specific group of women, and then to expand over time.
This is the problem statement that we came up with;
<blockquote>Women find that their gender can be an obstacle when it comes to building careers in STEM. How might we help empower these women to achieve their personal and career goals within these male dominated industries?</blockquote>
<h3>Discovery</h3>
We wanted to focus on women in STEM industries to start, as there is a need to empower women in male dominated industries. And wanted to be able to branch out into other fields, as sexism is an issue in all careers and STEM industries are a good jumping off point. We started by defining STEM: Science, Technology, Engineering, and Mathematics.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Dp38rYyb3AqkZ4oAQaqB5Q.png">
And found these surprising statistics about female participation in the industry. It showed us that there’s a real need to support females entering and staying in these fields. It was important for us to offer help in an area where women are majorly underrepresented. We hoped that our app would allow women to connect with each other and provide the mentorship women in those industries both need and deserve.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bXR2ptUxNm2Rj6-GcYJYKA.png">Competitor (organization) Insights
Through our research we found several organizations who support females, but the organization that we chose to be a good partner for the platform we were planning on building was “Million Women Mentors”, a website branched out from a big platform for people in STEM fields, called “STEMconnector” because, first, it focuses on women in STEM fields, second, provides mentorship volunteer opportunities, to support young women who are in, or interested in pursuing their careers in STEM industries.
After doing some background research, our team conducted different types of researches; screener, survey, user interviews, comparative and competitive matrix, comparative and competitive feature analysis, information architecture of Million Women Mentors”.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2rPla4CQwtAbd-elpdehMQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_vuZmDu9poNlcp-jx21MOw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*n7tdOex0rGET-XDzbAxwzA.png">(Left) Competitive &amp; Comparative Matrix (Right) Competitive &amp; Comparative Feature Analysis
We contacted 7 people — 6 women and 1 man for our User Interview. We wanted to get a single male perspective because, in order to get the full story, it’s important to also have a relevant outside opinion. Each of our participants work in STEM fields, with the exception of one individual, who is currently studying to join a STEM field. Though there were only 8 questions in our interviews, almost all of the talks were more than an hour long.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IqlPHGINOYP_w0ZKPjCaOQ.png">“I” Statements from Affinity Mapping
During our affinity mapping we came up with ten initial insights, but the most important were “I like to uplift other women,” “I need a safe space to talk about personal things,” “I want mentorship, and I would benefit from it,” and “I prefer connecting with people in person.”
From these insights, we were able to create three personas, two being our primary user personas, and one other being our secondary user persona, that we connected a lot with.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Xyuu2abRex2DThz3BiOEQQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*o4G_ck8YACU8dt3MvfcRaQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2ThMuSUEAdMIt4K8LD-YLA.png">
Then, in order to see how Million Women Mentors work, we decided to do some more research and build information architectures of the website.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TwzP0b0HyZEnFZ-3YN_pZw.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oGfReTRi6qRpL3E0pp61pw.png">
On the left is the current user journey of Emma, our persona who is looking for a volunteer opportunity to help women in Stem. As you can see at the top, even though the platform of MWM is a website, that is mostly used on the desktop, she can not use the website as much as she should.
Same thing goes with our persona Sara, who’s looking for a mentor.
Here’s how the user flow is structured right now.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qFBCR0uf7JuqnK6VbaIyvA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AjVy2_MdSAOvtwRYG5BP0w.png">(left) User Flow of an individual mentor (right) User Flow of an individual Mentee
On the left is the user flow of an individual who wishes to become a mentor for MWM, in this case, Emma. After signing up, and searches for a potential organization to volunteer, the website takes the user to the organization information page, then tells her to separately contact the organization, using the contact information they provided.
It is worse for Sara, the individual who wishes to find a mentor. Looking at the user flow on the rihgt, when Sara tries to sign up as an individual looking for a mentor, the website takes her to a FAQ page, and basically tells her to join a local organization, that has connections to MWM, then being part of the organization, she will eventually be able to find a mentor; meaning, nobody knows how long that will take, and she has no access to the website at all.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UcygYONxE9tpP0NQis9IOQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GTyINIqXaFcT68hINmKlEA.png">Website of MWM
The website functions as a “Search Engine” rather than a platform to connect; which is why we’re creating a new platform to become that connector, and the community for women by partnering with MWM.
The type of platform that we decided to build was a Mobile Application, reasons being the following;
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Lb28DQScgPdZz01pjN3haA.png">
After doing some numerous types of research on not only mobile applications, but also with iOS vs. Android, we have decided to build a mobile application for iOS. The following are just a quick peak of some of the reports that we found.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8mTz5bnTlux_nR-55kd5OA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WghVhqYFs-FskVeJUr3bFQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6QbVYCPWon4OVdRiJsFb2g.png">
<h3>Development</h3>
After all the decisions were made with platform, and with all the research needed being done, we jumped right into sketching ideas for the app that we were creating. We used the following methods to come up with, and to prioritize our features to be added on the app; bubble map, MoSCoW map, and Phase Rollout.
We began our iteration phase with multiple rounds of design studios and found that we were on the same page almost immediately. As users would be sharing very personal information on this app, creating an account would be required to connect with others. A short on-boarding process would guide users through creating their account. We also wanted to incorporate a social aspect in which users could connect, but on their own terms. Messages would always be requested, first, before connections could be made.
With all the features that we came up with through the findings and design studios, only the features that are absolutely necessary to become the bare minimum solution to our problem statement were chosen through MoSCoW map. Then, the phase rollout was made with all the features, that will be added to the app eventually. The current process of the project in phase rollout would be in phase 1.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ISm_aWxFJv2moWeGZ_phUA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*1Wo0eLRTzj4q0HRAwMKPVg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YZbLiKvGhfmxCyeGIkNPQA.png">(Left) Bubble Map (Center) MoSCoW (Right) Phase Rollout
Then, as a comparison to the information architecture created for Million Women Mentors work, we build new user journeys and new user flows of our personas using the app.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bSSRbxZ9NSnP1fV-KmdQ5A.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*UDpMVQkGd0ymUtdFjbQAug.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9bs2eqs_hVqy_pFQozYXoA.png">
On the left, we have Emma’s new user journey, and on the right is Emma’s new user journey. Not only they can communicate and connect through the app, the journey actually doesn’t really end here, because now they can connect in real life, become part of each other’s life and they can meet more mentors/mentees who they can connect through different types of challenges.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*-bGWfTaeKV-UoFJPx24yZQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3EsVtXaJqNHab1iKKCNkoQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*btV1hQUVJOV5D9t_7aemzg.png">User Flow of Sign Up (left) User Flow of Mentee Browsing a Mentor (center) User Flow of a Mentor Accepting Message Request (right)
On the left is our mentee persona, Sara’s sign up task flow; we created on boarding screens to guide users through building their profiles, each screen has a progress bar to show what step they are on for a total of 4 steps.
In the center is Sara’s user flow for finding a mentor. Once she’s in the app, she can access the browse option either through the browse option in the footer, or from the call to action buttons on her account page, that takes her to the filtered search screen. She can choose to search mentors by interest as she wants someone who shares her values, then send a message as a request to start a conversation.
On the right is our mentor, Emma’s, user flow of accepting a message request.
Based on the ideas, features and information architectures to narrow down the key points that we wanted to have in the app, we created these wireframes. Starting with rough sketches of wireframes, we created 2 sets of mid-fidelity wireframes and prototypes for two of our primary personas, Emma and Sarah. Along with two rounds of usability testings, followed up with revisions, we created our wireframes into a hi-fi by adding images and applying colors.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xYzSvHH5zF1raxCcAphKrw.png">
We have an initial home screen, which pops up when the app is first opened, and then home, two screens on the right, that shows how home changes when the user signs up, or signs in.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vDyQQZxZOncWjNG3zTJxXg.png">
This is how our sign up process looks like.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LdI1Lh1xJfARaCJySwGwEA.png">
These are the screens from our Browse section; that browses potential mentors, mentees, community to join, and event to attend.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*xtfNvt9k3PifnN62SyFXGQ.png">
And lastly, our message section, which is the biggest reason why Women and Women First is an app.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GZaiNeEMyqQg-e4EUVbEzg.png">
Going back to the problem statement, with these features in the app, Women and Women First, can “help empower women to achieve their personal and career goals within these male dominated industries” by providing a platform for women to connect, and to advise each other.
<h3>Testing &amp; Iteration</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*CFtXxFv6oJ0uyN7TBfjU4g.png">
With two rounds of usability testings, we tracked the following; the tester’s behaviors (actions), likes, dislikes, changes to be made, KPIs, and metrics. These are some of the findings from the testings.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*mRic7ejeT12ltfUeEpSsNg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*W4Qnp-IgIo1ynE8G_eXQ4w.png">
Though our iterations, we were able to reduce the time to complete each task from 2 min 20 secs to 1 min 15 secs!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ATOwASLZRFbQXp4j5e__rg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*dMddrFqWtVYb6btfRVerDg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DSHPV6NotC_m8hR37c8XlQ.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*229aZL-OMtDZWt6qsEOxtg.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TjRYlHiMEKiLCVxJKYN9TA.png">
Based on the insights from the usability testings, two rounds of revisions have been made to the wireframes.
Some major changes were made to our landing screen, sign up flow, home screen, profile, browse, and request — so basically almost everywhere. On the home screen, we switched the locations of “Trending” and “For You” to focus on the users’ connections rather than prioritizing the featured and trending things. This way, the user can continue building their relationships and choose to add more if they would like.
We prioritized content of profile based on users’ needs, by reducing the photo header to make room for more important content.
Many of our users were confused by the quick message icon on the browse pages, so we removed them, we also filled in the interest bubbles in the filter section. In the final iteration, we prioritized the user information that is relevant to the search filters, in this case, the matching interests are highlighted.
<h3>Final Product</h3>
Here is the to our protoype:
<a href="https://invis.io/P4DT4FSWX">Click here to view the project `Women &amp; Women First (V3)`</a>
<h3>Conclusion</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*f11NHpQ69DiuSAdZ3eS4rA.png">
Wrapping up, we will be running a final round of usability testing with the 2nd revision prototype that we currently have, and do a final revision. After the prototype is finalized, we will be finishing up phase 1 and move on to phase 2.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YQJxd5GRf2BaK9M20ywUGA.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kPhk8bM1ZKToGZpt7CG58g.png">
In order to further address our problem statement, we want to add features such as blogs, community and events. Currently our main feature is to connect users through interests, careers and location, they’re encouraged to create their own communities through these relationships, but we want to expand our options with a blog feature, community pages, where users can chat in forums and meet up and create events. We would also want to have featured events created by the company founders.
We hope that our application will help women feel supported by the communities they form and empowered like the intelligent and talented people they are.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a1c74bb16ec6" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/women-and-women-first-womens-mentorship-mobile-app-uxdi-a1c74bb16ec6">Women and Women First — Women’s Mentorship Mobile App ~UXDI</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Women and Women First — Women’s Mentorship Mobile App ~UXDI

Women and Women First — Women’s Mentorship Mobile App ~UXDI

Top Stories