Jump to

Studio Sync

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 collaborate on projects together.

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

Problem

Creative professionals who have moved to a new city might have trouble tapping into the art scene 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 find each other and establish meaningful connections that would enrich their work.

User 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
A compatible personality and working style was vital to 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 community based on their creative 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

1
Users wanted to be able to find others with similar interests
1
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 wanted to be able to find others with similar interests
2
Users valued feedback as much as collaborative labor.
2
Create opportunities for users to dialogue with each other by exchanging messages or comments - especially on work posted to their profiles and/or groups.
3
Users wanted to be able to fill specific skill gaps when a project called for it.
3
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.
Ideation

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 "cold" 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: there’s only one way to interact with a user and it’s positioned at the bottom of the screen.
The Fix: Added two interaction buttons with simplified CTAs and placed at the top of the page.

While my classmates liked the calendar styling, they felt that the Events page risked becoming visually cluttered if there were too many events to display. I scrapped the calendar layout for a more simplified, scannable list instead. If it was easier for users to find events, it could be easier for them to meet others with similar interests.

Original sketch
Iteration

My original sketch for the homepage presented the user with the four main search methods. In the subsequent iteration, I eliminated the “find by skills” option after the user interviews helped me determine that it might not be the most appealing way to find collaborators. Additionally, interviewees didn’t think that particular search method would be one they took advantage of since “skill gaps” weren’t something they dealt with often.

Original sketch
Iteration
Design

Creating visual consistency

To build recognizable layouts across multiple pages and give users a consistent visual experience, I used the same structural elements for pages that had similar functions. This tightened up the overall look of the site and allowed me to implement several UI patterns.

Profile pages for users, events, and groups

1
Banner image, name, and avatar
2
User, event, or group details
3
Uploaded photos

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

1
Sidebar pane: displays tabs for connected friends, connection requests, and blocked users.
2
Main content pane: displays a user’s network as a list of info cards and message content.

Info cards for aggregate list pages

Info card detail for a user.
Info card detail for a group
Info card detail for an event

To mirror the way the Profile page was designed, I added Join and RSVP buttons in the headers of the Event and Group page, respectively. Paired with a Notifications button, users could now keep up with groups and events they were interested in.

On the Profile page, I opted for a section of interactive pill tags to feature a user’s skills. Clicking on the tags would generate a filtered list of users with the same skill - another potential path to discover others with interesting capabilities.

Finally, one of the main critiques I received from the class about my designs was that the homepage consisted only of 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 manually searching 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.

Conclusions and Takeaways

So many lessons were learned with my first end-to-end UX project. I learned how pivotal it was to validate 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

View another project