Kelly Wang

Sync

Sync is an all-in-one workplace and platform for organizations to collectively plan events, share ideas and files, track budgets, and assign tasks. It streamlines workflows, strengthens bonds within clubs, increases transparency, and facilitates member data-keeping.

ROLES

Product Designer, UX/UI Designer, Visual Designer, User Resarcher

DELIVERABLES

user research and testing, competitive and heuristic analysis, low and high fidelity mockups

TOOLS

Figma, Invision, Photoshop

The Problem

Executive boards in universities face challenges with close collaboration, group decision-making, and cohesive functioning.

These challenges are exacerbated by the feeling of disconnection online, low response rates in group messages, unopened emails, and difficulty managing club tasks amid busy school coursework.
Current tools are scattered across the web, including Google Drive, Facebook, GroupMe, Slack, when2meet, Lettucemeet, Notion, and Google Calendars.

User Research

Goals

My goals were to understand executive boards' cultures, decision-making processes, power dynamics, and emotions, and identify the pain points experienced by these e-boards

Interviewees

I interviewed a diverse selection of e-boards including:

Stanford University’s Women in Design, President
Duke University’s American Medical Women Association, President
UChicago’s Business Fraternity Alpha Kappa Psi, VP Finance
NYU’s Kappa Sigma Fraternity, Rush Chair
NYU’s ACE Fashion Show, Fashion Associate
NYU’s Asian Cultural Union, Marketing Chair

Synthesizing Insights

Key Takeaways

After each interview, while they were still fresh in mind, I wrote down the 3 to 4 insights from each onto sticky-notes. I created an affinity map and found noticeable patterns in the responses.

Lack of transparency among e-board members
Collaboration tools and social platforms are disconnected
Hard to track progress and follow up on long term goals
Inactive members on social platforms

Empathy Map

Empathy mapping helped me to visually organize the insights, observations, and quotes I’ve collected from the interviews to better understand the user’s pain points and the differences in the user’s goals, feelings, thought, and behaviors.

User Personas

I created two persona models to guide the design process: Joyce and Henry. Joyce represents higher-ranking e-board members like Presidents and Committee Leaders responsible for overseeing others. On the other hand, Henry represents lower-ranking members who follow instructions.

Competitor Analysis

From the interviews, I put together a list of commonly used tools by student e-boards and compared the functionalties of each to the features Sync would have.

Sync vs. Project/Membership Management Tools

After doing an in-depth research of competitor project/membership management tools, I found that the three most popular sites are: ClickUp, Wild Apricot, and Join It.

In short, although ClickUp satisfies one realm of needs of student clubs, it fails to meet the other. ClickUp offers a highly customizable collaboration and project management tool, but lacks the feature to create events and conveniently chat – both crucial for clubs.

Similarly, although Wild Apricot and Join It specialize in membership management service, such as fees, membership tiers, and emailing, it lacks a collaborative space which students can work together as a team and strengthen the tie between members.

Findings

Students are busy. Clubs are extracurriculars. They prioritize efficiency and don’t care about the extra details.

I asked interviewees to participate in a card sorting exercise to rank the tasks based on two factors:

How often they do each task
How imperative it is to the club

I was surprised by the results. I supposed that most clubs would want to keep a detailed database of members and their attendance. The ranking, however, revealed that most clubs do not need to keep track of people who show up to meetings. An answer to a follow up question I had for one interviewee, shocked me even more – “We try to keep as less data about members as we possibly can.”

Information Architecture

Sitemap

To allow for easy navigation, I made sure that the site hierarchy is relatively flat. I also identified the key red routes critical to the design and drew out the user flows.

User Flows

Sketching

Mobile Sketches

Wireframes

After drawing out many sketches of the logo on paper, I finalized it on Figma and made several versatile versions of it. In addition, I also chose the typography to follow iOS's typography and carefully picked out the primary, secondary, and gray colors.

Create a note within a workspace

Create an event and assign tasks to other club members

Create a task and assign it to club members

Desktop Wireframes

Desktop Create Event

Usability Tests

Goals

My goals were to discover if there were any gaps in the flow and to identify any difficulties in understanding the functions of the pages.

Methods

I gave five users three prompts and worded the prompts with unbiased language. One of the prompts was “Imagine your organization is hosting a workshop. Find a way to make an event and let other members know what tasks they need to do before the event date.”

Key Takeaways

I addressed some confusion among users by reducing multiple access points for the same task into a single access point. Additionally, I received valuable feedback on the Workspaces page that led me to reconsider its information architecture. The previous practice of creating separate spaces for each club group proved inflexible. Workspaces should be simply folders. This change enhances user control and flexibility by eliminating unnecessary segmentation.

Accessibility Audits

Color Contrast

After checking the color contrast ratio, I changed the torquoise color to #107AA* to meet WCAG 2.0 level AA contrast ratio for normal text, large text, and graphical objects. In addition, the floating action button was originally purple, but it did not stand out enough. Thus I chose torquoise's complementary color, orange, and made sure it met level AA requirements.

Spacing

I increased the spacing between poll options and tags to allow adequate space for tapping on mobile phones.

Font size for readability

I adjusted the font size of the primary "Add" button from 12pt to 14pt, so that users can easily read and tap it.

Taking edge cases into account

While iterating my designs, because many components were dependent on the information users input into the app, I had to keep the following in mind and designed these scenarios:

What would a component look like if a user does not provide a piece of data?
What if someone's name is very long?
How should the app communicate to the user that details have been truncated?
What information must be required or optional? How would I visually inform the user, so that the user wouldn’t make a mistake first and then find out?

Prototypes Round 1

Create a note within a workspace

Create an event and assign tasks to other club members

Create a task and assign it to club members

Desktop To Do Page

Desktop Create Event

Usability Test Round 2

Research Plan & Test Script

After creating a research plan and a test script, I conducted five moderated usability test. By testing users, I can find patterns that reveal experience issues.

Scenarios given to the partipants

1. Imagine you are the secretary for your club. Find a way to create a new note to type today’s meeting notes in.
2. Your committee leader has assigned you a task to post on Instagram and Facebook. Find a way to let him know that you have completed the task.
3. You have an event coming up next week and need other members to help you out. Find a way to make a new event and let others know that they need to complete a task prior to the event.

Key Findings

-Critical Issues

Users were unable to mark a task as completed. Expanding the task only showed the buttons to “x” out and to edit the task.

Users experienced difficulty in knowing what was happening to the app because the prototype was not interactive enough.

Solution: Buttons either “marked as complete” or “edit” must reflect if the task was assigned to the user of if the user created that task

Solution: Create a prototype with one specific flow of information that guides the user through each sequential step in adding information to the event/task

-Major Issues

After the user creates a note, the user clicks on the “x” button instead of the “add” button when the intention was to create a new note.

Regarding the set date and time component, users were not sure whether the whole horizontal row would slide altogether or each column would slide separately from each other.

Solution: Make the “add” button more clear and prominent by filling in the button with the orange color.

Solution:
The columns should be filled with empty spaces between them, while the row should not be filled.
To indicate the values of each column make up the complete date, the horizontal row should be outlined.

-Minor Issue

Creating a tag is small and difficult to tap/read

Solution: Increase the padding of the tags, the font inside the tag, and the spacing between each tag

Animations

Floating Action Button

Using InVision, I created the animation for when the action button is tapped. The + spins and each action button expands sequentially.

The action buttons allows e-board members to easily do the tasks they do most often:
create a poll, ask for others' availability (ex: for a meeting), send announcements, and create tasks

View task

When a user taps on a task that he or she has been assigned to do, the task expands and displays its full details.

Once expanded, the user can:
1. mark the task as done
2. check when its due
3. access important documents from the workspace
4. see who else is working on the same task.
5. tap a member's icon and chat with them

Creating an Event

I animated the motion of how the accordion menu expands and pushes the content below it down.

The date, time, and AM/PM are changed by swiping each respective column up or down.

When creating an event, users can:
1. add a description
2. invite members to the event
3. set the meeting location
4. add tasks to be completed for the event
5. link files from the workspace
6. add a budget

Final Interactive Prototype

After discovering the strengths and weaknesses of the design, I went back to Figma, fixed the high fidelity prototypes, and created the final InVision prototype.

Reflection

I truly felt the importance of user research and discovering the user’s motives, emotions, and needs first before all else. Although I had an initial understanding of student club e-boards, I made sure to start from a blank page and then build a mental model of the user from primary and secondary research. I now have personally experienced how user research and testing are so critical for functional, successful designs.

One main challenge I ran into was that I felt that InVision did not allow me to create as interactive of a prototype as I wanted. Although it was easy to link screens to demonstrate the screen flow, I wish input fields, check boxes, and date entries could be changed. In addition, I wish I was able to integrate the animations I did for components into the prototypes. In addition, I would have liked to conducted more user interviews and testing to test my design hypotheses and to prove its effectiveness and usability.

If I have more time in the future, I would like to flesh this product into life as a fully interactive prototype by collaborating with a developer to implement a prototype.