Project Summary

51% Club is a female-exclusive social networking site that will allow like-minded individuals to connect with each other in order to participate in real life micro events. The project initiated from discovery phase and I was onboarded during design phase; currently, the design is completed and the project is under development. Two months was allocated for design including research, planning, wireframing, visual design, team communication and client communication.

The client was collaborating with the team to provide domain expertise and functional guidance, along with regular & timely feedback on the deliverables.

Discover & Design

- Who will be using it?

The primary target audience will be female relocaters who are new to town and don’t have wide social connections. They’re eager to enlarge their social circles and blend into the new community. These people are likely to be the participants of events. Nancy, the persona below, is one of them.

The secondary users will be original or late-coming locals who also want to expand their social networks. They are probably the party organizers or opinion-leaders since they know more of local facilities.

Nancy Ruiz

31 years old • Manager • Single

Relocator Introverted Hardworking Efficient

Nancy recently moved to Victoria. She found a new job in a tech company and works as a manager. She knows a few people here, but still feels lonely when they’re busy and no one hangs out with her. Her job is busy, so she doesn’t have much free time exploring on Facebook or Meetup to engage with others. She considers herself not an avid socializer - she feels more comfortable when the group activity is smaller and more personal. That’s why she doesn’t go to events which hundreds of people may join, as she still feels lonely when surrounded by strangers. What she wants is some easy, simple, face-to-face interaction with other girls and develop friendship from there.

Stretch out to meet new people and make friends

Interact with like-minded people who share same hobbies and interests

Participate in fun activities and relieve the stress from work

Know more working professionals and their businesses to grow her networks

Hard to find events suiting her needs (time, location, theme)

Events are too open to the public and lack face-to-face interaction

Concerns about the safety of the events hosted by strangers

Difficult meeting others with similar interest in a large public event

- Website Design

The website design covers a wide range of pages, from the initial marketing webiste to primary sections like club member, get-tegother, and to many granular functionalities like messaging, notifications, etc.

1. Marketing site, sign up and blogs

The marketing site tries to stand in the shoes of those potential club members, like Nancy, having emotional touch and empathizing with them. Photographs are widely used to make it visually impactful and close to real life. The language here is also fine-tuned to be easy-going and heartfelt.

2. Club members

In the club, members are called ’51 Percenters’. Nancy could write her brief bio, interests or even her business here; then the system will match her with whoever like-minded. Once she’s completed writing and published her own profile, others’ profiles will be visibile and she can start browsing and socizlizing. The quickest way to break the ice is to message somebody and start talking about Game of Thrones, for instance.

3. Events

Hosting and attending events are conventional ways to meet new faces. In 51% Club, events are called ‘Get-togethers’, where women could come to an agreed public spot to see each other in real life. Similar to Meetup, users can see all details of the event and join the conversation.

4. Opencalls and Other Utilities

Opencall allows Nancy to give a shout and summon the participants for a future event. People can respond to her call and discuss about the details, and then Nancy or anyone in the loop could organize an event at a later time.

There’re other utilities like business index, notifications, account settings which help Nancy enjoy and manage her social life here.

Skillset & Toolbox

The chart on the right roughly presents what we’ve been working on throughout the project. In general, we touchbased on all areas a bit, but there were a few which took more efforts.

UX Leadership

1. Collaboration: we worked closely with the project manager (PM) and developer to ensure the design is accomplished under the budget, impressive to the client as well as feasible to implement.

2. Win client trust: we talked with the client face-to-face weekly to review the design and iterated it with timely feedback. Though I’m not one of the target audience, I analyzed the competitor products, interviewed girls around me, and consulted my female colleagues, the design, in the end, was highly approved by the client. Besides, she was impressed by our step-by-step process of translating the technical user stories to the visually-appealing interfaces. We had a great partnership in the course - she has access to many end users and we have the design expertise, so we were open to each others’ critiques and co-designed various parts of the website.

UI/Visual Design

1. One challenge of UI design is: the pages are quite informative. To battle with a large amount of text and make all components harmonious, we made many attempts on various containers (cards, sidebars, tags) as well as gaps and paddings, to ensure the page is breathable and comfortable to read.

2. As for visuals, the client doesn’t want it to be over ‘girly’ - she likes the website rather mature, professional, a bit feminine but not excessively. So we didn’t use traditional feminine colors like pink and purple; instead, we chose taupe as the color of the header, footer and primary buttons, orange as the primary color, and red as highlights and emphasis. Meanwhile, we added diluted watercolor to the background to spice it up. In the end, it feels gentle and welcoming generally but vibrant partially.

Tools

Wireframe, UI design

Clickable Prototype, Team/Client Communication

Version Control

Design Process

- Context and Competitor Research

To begin with, we read articles about women using social media and learned about the data and trends in this regard, some of which are helpful such as:

“Men vs. Women: who is more active on social media?”

“Why Women Are The Real Power Behind The Huge Success Of Pinterest and Tumblr?”s. Women: who is more active on social media?”

“How Men and Women Use Social Media Differently?”

“Do Women Use Social Media?”.

To check out competitors, firstly we played the common social media sites/apps to understand the design conventions: FB, Ins, Twitter, Linked-in, Pinterest, etc.

Secondly, we looked into the websites and mobile apps specifically focusing on arranging face-to-face meetings such as Meetups, Eventbrite and even dating apps like Tinder and Superdate.

Lastly, we researched websites of female products to understand the popular visual styles attractive to female customers such as Sephora, Victoria’s Secret, MAC, etc.

- User Research

It’s crucial to talk to women in the real world who may be using the product in the future. We prepared eight questions to ask about the interviewees’ social lives, such as their personalities and emotions, thoughts of relocating, social activities, technologies in use of socializing, etc.

We interviewed four girls (the names below are fake) and recorded all the raw data. Later we managed their answers by using different colors for easier contrast.

On top of the market research and user interviews, two personas came into being: Nancy and Sophie. Nancy represents the young generation whereas Sophie stands for the middle-aged and senior. As they nearly sit on the opposite end of the spectrum, the values they share in common could be discovered if they are willing to meet up in the club.

- User Stories

User story is a critical tool shared across the team. Initially, business analyst will write the initial versionn based on the business requirements. Then designer will review the stories from user’s perspective, revise them and roughly estimate the workload. Similarly, developer will also look into the stories, measure the feasibility of each functionality and have a rough estimate of the dev time. Eventually, the whole team could outline a tentative budget of designing and developing the entire product. Project manager then will communicate with the client to negotiate about the budget and allocate resources afterwards.

- Happy Path & MVP

A common design approach is to build the happy path. Essentially, it is a typical use case which may be experienced by most users. In this case, one of happy paths is that Nancy comes to the landing page, registers as a club member, fills out her personal profile, and starts socializing.

Along this path, Bulls-eye is a common tool to help prioritize items. Usually, the labels in the first and second rings could wrap up the features needed in MVP. The third ring is outside the scope, many of which probably won’t affect the story-telling for MVP and could be archived in backlog.

- Wireframe

The wireframe session took a few weeks to create and iterate, but the outcomes were good enough and ready for polishing. We brainstormed and whiteboard-ed, discussed in the team and with the client, iterated and refined. The wireframe is the visual translation from the user stories, so most of the design clung to the requirements. However, there were also times when better solutions came up during design and user stories were adapted accordingly.

- Clickable Prototype

The clickable prototype was done in InVision, which stitches the pages together by hotspots and simple transitions. It doesn’t support full-fledged interactions (e..g drop-downs, pop-ups) but is good enough for showing the logical relationship between pages.

- Development

During the dev process, designer was still helping answer questions in the meetings and keeping an eye on the build occasionally, making sure it is as close to the design as possible. With the Inspect Mode of InVision, devs could easily read the CSS of nearly all visual elements and the pixels of dimensions, gaps, paddings, etc. Since the majority of design is flat and vector-based, there’re only a few art assets to pass over to devs.

Responsiveness is mostly taken care of by devs. I would review the results and made sure the website looks decent on various sizes of devices.

- Client Communication

Throughout the project, we met the client weekly to review the design and gain feedback timely. She also had the access to InVision and could leave comments anytime. She has witnessed the process of how we tackled the project from initial ideas to the final concrete deliverables progressively and was impressed by the outcomes. In the end, the client signed off the design, meaning there wouldn't be radical changes in the future, but maintenance is still ongoing; meanwhile, it also means the leadership transfers from designers to developers, who would drive the project primarily and meet the client regularly whereas designers were turning to supporting roles.