Studio Sync

What I did: UI Design, UX Design, User Research, Wireframing, High Fidelity Mockups
Client: General Assembly / Personal Project
Timeline: 8 weeks

Backstory

In 2016, I was starting to feel creatively isolated after having moved to Atlanta two years prior. That fall, I enrolled in the User Experience Design Immersive at General Assembly and was suddenly surrounded by a group of designers eager to learn from each other and make work. The experience got me thinking about how creative professionals might find each other more easily and work on projects together.

Problem

Creative professionals who have moved to a new city might have trouble tapping into the creative community around them because they don’t know where to look for nearby events or established organizations.

Solution

Studio Sync was a conceptual social media platform with the goal of facilitating collaboration between users. In creating the project, I wanted learn how the platform might help users establish meaningful connections with each other and encourage them work together on projects.

Ideation

Finding collaborators

My main goal for the project was to provide ways for users to collaborate with each other locally. To make the process of searching for collaborators easier, the initial concept for the platform included tools such as:

Finding “users near you” by location
An adjustable “distance radius” filter for search results
The ability to filter a list of nearby users by skill
An aggregated list of nearby user groups
An aggregated list of nearby events
Sending a message to another user

A basic feature map I made while ideating the initial concept for the platform.

Research

Networking over collaboration

For research, I interviewed five creative professionals in fields ranging from graphic design to education. The discussions were illuminating and, unsurprisingly, invalidated a few of the assumptions I had made during the ideation phase. I learned that:

My interviewees sought feedback more often than collaboration.

Plotting exact user locations on a map was not necessary to platform functionality

A compatible personality and working style was vital for successful collaboration

Because their work and its realization was deeply personal to my interviewees, collaboration was rarely their first instinct when starting a new project. However, they still wanted to be able to find people who could help with specific skills they lacked when necessary.

Despite preferring to work alone for the most part, the people I interviewed saw the potential value of Studio Sync as a tool that could help them build a personal creative community based on their work and interests.

Collaboration should be based on what is best for the project and the creator.
James D. - Educator, Sculptor, Digital Artist

Define

Giving users what they want

My biggest takeaway from the interviews was that I needed to pivot. What I had originally intended to be a collaborative platform was changing into a networking one to better provide what my target audience wanted most.

Insight

Action

Users wanted to be able to find others with similar interests

Give users a way to find people they’d want to connect, and possibly collaborate, with by showing them groups and events around them.

Users valued feedback as collaboration just as much as labor

Create opportunities for users to dialogue with each other by exchanging messages or comments - especially on work posted to their profiles and/or groups.

Users wanted to be able to fill specific skill gaps when a project called for it.

Instead of “finding users by skill,” interviewees thought it would be better to have a Classifieds section where project opportunities could be posted for other users with the requisite skills to respond to. Since this didn’t happen often, I put this feature on the backburner and saved it for a later iteration of the platform.

Iteration

Making mistakes with sketches

Class feedback on my initial sketches revealed that the profile page didn’t exactly encourage communication since users could only message each other after connecting. This put a lot of pressure on the user to send a random request to connect before being able to get to know another user. To solve this, I added a “message” button alongside a “connect” button to the profile page which made it easier to casually strike up a conversation.

The Mistake: Only one way to interact with a user and it's positioned toward the bottom of the screen. *facepalm*

The Fix: Added two interaction buttons with simplified CTAs and prioritized their placement at the top of the page.

While my classmates like the calendar format, they felt that the Events page looked too much like a personal calendar and not a listing of events in the area. I scrapped the original page layout for a more simplified list of events instead.

My original Events page layout also risked becoming visually cluttered if there were many events to display.

A simplified list organized by easy-to-see dates made for a more scannable events list.

Below are a few additional sketches I made (and remade), including an event details page and two versions of the home page.

The sketch for an event’s detail page was modeled after a user’s profile page.

A great way to increase visibility of events was to give users the opportunity to share them with their connections after RSVP-ing.

The original sketch for the homepage presented the user with four main paths to search for connections.

I re-sketched the homepage to eliminate the “find by skills” option after user interviews helped me determine that a Classifieds section would be more useful, which was not included in this initial version.

Strategy

Designing towards visual consistency

In order to apply some of the lessons I learned from my sketches, I used structural patterns in my wireframes for pages that had similar functions. Building recognizable layouts across multiple pages would give users a consistent visual experience.

Profile pages for users, events, and groups
“Near You” list pages for users, events, and groups
Sidebar + Main Content pages for viewing a user’s network details and messages

Profile pages for users, events, and groups

Profile-styled pages start with a banner image with name and avatar photo (1), followed by the user/event/group details (2), and finishes with uploaded photos (3).

List pages for users, events, and groups “near you”

List-styled pages are straightforward, consisting of a main content pane and the aggregated list.

Sidebar + Main Content pages for a user’s connections and messages

The “Studio Syncs” page displays a user’s network, included requests and blocks. The Messages page uses the same side window (1) + main content pane (2) layout.

It wasn’t until I reached the wireframing stage that I realized my sketches hadn’t accounted for how to feature a user’s skills on their profile. I knew I wanted something a little more interesting than a plain text list so I opted for a section of interactive pill tags. Clicking on the tags would generate a filtered list of users with the same skill - perfect for discovering others with the same capabilities.

Design

Putting it all together

One of the main critiques I received from the class about my wireframes was that the homepage only featured the three search methods, which created a shallow user experience. Taking a cue from other social media platforms, I added a feed of user generated content to instill the homepage with a sense of discovery. Showcasing recent user, group, and event activity provided users with more opportunities to find others with similar interests and relieved the pressure of having to manually search for those same connections.

There wasn't much to the old homepage unless you were actively searching for users.

With a homepage feed, there was less pressure on the user to search for opportunities to connect with others.

Since much of the information presented on the list-styled pages was similar, I wanted to use components for the users, groups, and events pages. Formatting these pages using the same structural elements tightened up the overall look even more.

Info card component detail for a non-connected user.

Info card component detail for a group.

Info card component detail for an existing connected user.

Info card component detail for an event. Side note: I abandoned the calendar date icon to make this event card similar in style to the others.

Here are the info card components used on their respective pages. Redlines included to show how I tried to keep the lists formatted the same. Click to enlarge.

To mirror the way the Profile page was designed, I added Join and RSVP buttons alongside a Notifications button in the headers so users could keep up with groups and events they were interested in.

Conclusions and Takeaways

So many lessons were learned with my first end-to-end UX project. I learned how pivotal it was to affirm design decisions based on user research and feedback. I also learned how easy it was for my own biases to creep in and influence my work.

It’s important to give users a reason to keep coming back.

Don’t be afraid to rework or abandon features.

User research can reveal the holes in your preconceived notions.

If I were to continue the project in the future, I’d like to build out and test the usability of the Classifieds section since I placed that feature on the back-burner as a nice-to-have. I would also test which search method garnered the most use on the platform to see if I could improve how users found collaborators, groups, and events.

There were plenty of times I was unsure about the design of Studio Sync, but a quote from one of my users inspired me to keep pushing through each iteration of the project:

“Crank out the work. Don’t be precious about it”
Beau B. - Graphic Designer, Illustrator, Philanthropist