UX Design: NYWSE Chapter

A responsive website created for the New York Chapter of the Young Women Social Entrepreneurs organization.

Responsive website for the New York Chapter of the Young Women Social Entrepreneurs

Introduction

My team and I acted as UX consultants to our stakeholder/client, SMPLCT Lab in establishing a brand new responsive website for the New York Chapter of the Young Women Social Entrepreneurs (YWSE). SMPLCT Lab, is a design lab that creates sustainable products, services and experiences for people and planet. The organization was founded by Cynthia Hellen, whom is also the 3rd appointed leader of the New York Chapter of YWSE (NWYSE).

Company Mission

To provide a community with the necessary tools, training, and resources in order to succeed as business leaders while becoming sustainability experts.

Company Vision

To empower people to effect change in society at all levels: as an individual, community member, professional, student, and entrepreneur.

Opportunity

Under the leadership of Cynthia Hellen, NYWSE has been able to take on several projects and partnerships without a website, however — new members struggle to learn more about the organization with limited resources.

Problem

NYWSE members and new users have limited resources to contact or get involved with the YWSE’s New York Chapter.

Objective

Advance careers and create a social impact in the world.

A new responsive website for NYWSE can be a platform for new users and returning members to go to for more information, resources, and connections.

*Research findings later validated that including a membership program sparked more incentive for users to revisit a networking organization’s website. NYWSE currently does not have this feature.

Potential Key Performance Indicators (KPI’s):

  • Generate online traffic flow from social media to NYWSE site
  • Encourage donations, membership sign-ups, and event registrations
  • Inspire and empower entrepreneurs and all members

Our Approach

Preliminary Research

As the project manager — as well as the researcher and visual designer, I navigated my team of two others (who were responsible for research, visual and interaction design) to begin studying our competitive landscape.

Competitors/Comparative Organizations: Ellevate, LEVO, I Am That Girl, The Adventure Project, Art Directors Club, AIGA

We reviewed many organizations and selected the top 6 to focus on after analyzing their market, element, and layout.

Topic Mapping of organizations

We created a Topic Map to organize our competitors and the trends we found while studying their website structure. This was a great way to understand what potential elements could be implemented for NYWSE, while also being mindful of what our client’s needs were.

Competitive/Comparative Findings:

  • Strong landing pages that enticed users to join their membership/organization
  • Storytelling method was prominent in navigating user through the website
  • Each organization had a different take on showcasing their resources page and global navigation
  • Implemented different options to join/sign-up (time-saving/convenience purpose)
  • Member Spotlight page was included in 4 out of the 6 organizations (seemed to be very significant to feature)

User Flows

User flows of LEVO, The Adventure Project, I Am That Girl, ADC Global, and Ellevate

These are just some examples of our competitors’ user flows (Process to get to their About, Member Directory, Resource, Team, Profile, Events, and Donation pages). We reviewed these flows to understand how many clicks and screens it took to get to the user’s final destination. By studying these flows, we were able to think about how we could implement the most efficient flow for our potential users. At most, these flows demonstrated an average of 2–3 clicks to get to their desired page.

Screening Survey

My team and I released a screening survey to analyze relative users in this specific field of non-profit/membership organizations. This strategy helped us narrow down potential users who may visit the NYWSE website. We received a total of 41 responses.

User Interviews

After sorting through our screening survey, we selected 9 individuals that fell into our criteria of being potential users for NYWSE in regards to the frequency of searching for networking events and their involvement in non-profit, NGO’s, or membership based organizations.

Interview Findings:

  • Most users attended events 1–2 times a month
  • Popular platform to find events: LinkedIn, Facebook, MeetUp, and Slack
  • Discover through word-of-mouth
  • All users willing to donate values align
  • Users found donating or joining memberships to be “worth it” if the organization or event provided useful and thoughtful information, resources, and connections
  • Most users willing to share event information on social media
  • Users who could not donate money would donate time

Feature Prioritization

Affinity Diagram

Affinity Diagramming

My team and I wrote the insights we obtained from our interviews and organized them through a method called Affinity Diagramming. We sorted the notes by major trends and then placed them into categories of pain, pleasures, behaviors, needs, and potential features. We then organized them into “I-statements” and then further synthesized them into their respectful categories.

2x2 Matrix Chart

2x2 Matrix Chart

Following the affinity diagram, we transferred our synthesized notes into a 2x2 Matrix Chart. With this second method, we were able to prioritize our potential features according to their low or high expectation and low or high impact in accordance to the website.

MoSCoW Method

MoSCoW Method Chart

To finalize our user research insights, we transitioned our notes into the MoSCoW Method Chart where we were able to examine our priorities under features we Must, Should, Could, and Won’t have.

Overall Findings:

  • Users want to be reassured that they’re joining a reputable organization (stats, partnerships, clear mission, values, etc.)
  • Many expressed the importance of attending networking events, workshops, and classes
  • There is a need for efficient sign-up using other social media platforms
  • Want for exclusive membership perks (spotlight, acknowledgement, profile, directory, curated content)
  • A need for social media sharing
  • Receive email newsletters
  • A resourceful page (tools, contacts, articles, relevant news)

Personas

From the 9 interviews, we created three personas that would potentially engage with the NYWSE website.

  • Primary: Corporate Professional
  • Secondary: Young Professional, starting off in their career
  • Tertiary: Student, unsure of the future

Susan, a new entrepreneur and advocate of sustainability- is our primary focus as her behaviors, values, and needs align with most of the features (resources, events, membership directory).

Design Studio

To illustrate these potential features, we implemented a time-boxing method to begin the initial sketches of our website’s wireframes. We designed in 5 minutes, pitched our ideas in 3 minutes, group critiqued in 2 minutes, and refined our rapid sketches in 5 minutes. Overall, we created more than 30 wireframes and then voted on which wireframes would work best. With these ideas, we began to develop our first potential user flows.

Initial refined wireframes for Resource, Chapter Team, Events, Directory, Member Spotlight, Profile

As a team, we spotted trends in our own sketches and decided together which wireframes would work best and iterated as needed. We also discovered that it would be wise to keep our designs consistent so that there was a cohesive layout represented throughout the website. This would also help familiarize the user and potentially create a smoother flow.

Site Map

In evaluating our competitors’ landscape and user flows, we also made note of their global and secondary navigations. We conducted a card sorting exercise with some individuals to validate our findings and then concluded our final layout for the NYWSE site map.

User Testing

Usability testing with individuals

Our first user testing provided so much feedback than expected. We tested 5 individuals and learned about so many areas of our website that needed improvement. We failed to realize that most of our pages began to look too similar and that we did not pay close enough attention to how we could promote the new membership program. There was not a strong enough incentive that would motivate our user to want to join the organization or even check out the membership part. Another important part to note and iterate was our non-transparency of the membership packages and their prices. Users did not like this ‘surprise’ after they proceeded to the joining page.

Design Iterations: Part 1 (Low/Med Fidelity)

Design annotations of low/medium fidelity wireframes

Design Style Guide

Style Guide referenced for high fidelity wireframe work

Because our client did not have an existing website or style guide, we created the best possible color palette and typeface choice for the NYWSE website. We found inspiration from their mother organization, YWSE’s brand and put together a fresh and modern collection of colors.

Design Iterations: Part 2 (High Fidelity)

Our high fidelity wireframes proved that with more real visual representation, users were able to provide more feedback on areas we could improve upon.

NWYSE User Flow

Prototype

Click here to view the prototype

Next Steps

  • Wait for client feedback
  • Propose design iterations for next round
  • Continue user testing on new design iterations
  • Speak more to existing chapter members to gain more insights
  • Discussing further into a potential membership program
Show your support

Clapping shows how much you appreciated Jenn Chow’s story.