open.studio
​
Social Networking App Design
​
Overview
Deliverables
-
Clickable Hi-Fi prototype of in.studio app design
-
Stakeholder presentation with proposed business partnerships
​
Role
UX Designer and Researcher
​
Team
Christiaan Montgomery
Jessica Chin
​
Scope
Completed over a 2 week period
​
Tools
Sketch, Figma, inVision
As a team of UX designers, we wanted to explore the emotional effects of how users are impacted by social media engagement.
​
open.studio is a social media app for professional creatives that focuses on networking and it showcases a creative user's portfolio, resume and events
​​
​​
​​
​
Problem Space
“If you are on social media, and you are not learning, not laughing, not being inspired or not networking, then you are using it wrong.”
― Germany Kent, Journalist and Author
UX Design Process
Research
-
Topic Mapping
-
Screener Survey
-
User Interviews
Synthesize
-
Affinity Mapping
-
User Persona
-
Journey Map
-
Problem Statement
-
Competitive Analysis
Ideate
-
Design Studio
-
MoSCoW Map
-
Mid-Fi Wireframes
-
Mid-Fi Usability Testing
Deliver
-
Hi-Fi Prototype
-
Company Partnership
Research Methodology
Screener Survey​
​
24 participants
User Interviews​
​
7 participants
Affinity​ Mapping
​
6 Key Insights
​
Key insights from user interviews, translated in to "I" statements:
​​
-
I use social media for professional networking
-
I like to scroll through posts rather than comment on them
-
I am inspired by see what others are posting
-
I use social media to create and maintain connections
​
​
​
​
​
​
For our study, we focused on users who engage with content on social media apps, who vary in age, gender, and their frequency of use.
User Persona + Problem Statement
​
Needs
-
Maintain and engage with professional connections
-
Filter her feed to display posts relevant to her current need
​
Pain Points
-
Distracting feeds that are not relevant to her current objective
Behaviors
-
Uses posts from other photographers to gain inspiration
-
Scrolls through feeds instead of commenting on posts
​
Goals
-
Grow a professional network
-
Maximize time on social media to engage in content that matters
​
"Social media connects me to people who are significant"
Piper | 30 yrs old
Freelance Photographer
​
Insight
People use social media to make/maintain connections, find new opportunities, and for entertainment.
​
Problem
Due to Piper’s distracting social media feed, she finds it difficult to focus on her professional goal at hand
​
Opportunity
How might we help maximize her time on social media so she can engage with content that matters to her?
​
​
Journey Map
In order to focus on design opportunities, we plotted our user's emotional journey while looking for inspiration on Instagram.
UX Design Opportunity
Competitive Landscape
We examined the current social media landscape to look at current networking apps for creative professionals and for potential market entry points.
​
Product Focus
-
General vs Specialized
​
Features
-
Content vs Communication
​
Based on data from user research, it was found that there is a unique space in the social media landscape that can solve the needs of our primary persona:
​
-
Professional networking
-
Filter content quickly
-
Inspirational content
​
Feature Prioritization
​​
Should Have​
-
Video Diary/Stories
-
Multiple Accounts
-
Job Search
​
Must Have​
-
Photos/Videos​
-
Professional Networking
-
Follow Others
-
Posting
-
Private Messaging
-
CV/Resume Upload
-
Private Commenting
​
​
Could Have​
-
Live Feed
-
Explore Page
​
​
Won't Have
-
Invitations
-
Meet Up Events
-
Geolocating API
​
​
We then created a MoSCoW Map to guide us with feature prioritization in designing the first app iteration. All features listed are needed by the user and are to be implemented at some point, but in interest of time it was critical that some features were prioritized over others.
Design Methodology
Design opportunities distilled from research + synthesis
​
-
Focus on professional networking
-
Filter content quickly before the user becomes distracted
-
Connect an artist's profile to other inspirational content
Design Studio
​
Initial Sketches
​
​​
Mid-Fidelity Prototype​
​
Usability Testing​
Hi-Fidelity Prototype​
​
Design Improvements​
​​
Design Solution
open.studio
-
Social media app for professional creatives
-
Showcases a creative user's portfolio, resume, and events
-
A focus on connecting with other creative professionals
Log In Screen
Mid-Fidelty Prototype
Mid-Fidelity Wireframes​​
Save Image Screen
Save to Album Screen
User Connect
Profile Screen
User Connect
Event Screen
Mid-Fidelity Usability Testing
Usability testing was conducted on the mid-fi prototype to test for functionality of key features.
Task 1
Filter your feed for photography posts and then save the first street photo you find.
​
Task 2
Connect with this photographer by saving his upcoming event and sending him a message.
Mid-Fi Prototype
Task 1
​
3/3 users were able to filter for photography posts and save the photo to an album
Task 2
​
3/3 users were able to connect with another user by saving his upcoming event and sending him a message
Hi-Fidelity Delivery
Design Improvements
Based on user data from the mid-fidelity usability tests, several design improvements were implemented in to the high-fidelity iteration.
​
​
Save Image Screen Mid-Fi
Save Image Screen Hi-Fi
Save/Calendar Iconography
-
The save and calendar icons were changed to more recognizable icons
​
User Profile Screen
Mid-Fi
User Profile Screen
Hi-Fi
Events/Connections Dropdowns
-
The events and connections dropdown menus were moved to the top of the user profile page, to ensure that users would not mistaken them for their own
​
User Event Screen
Mid-Fi
User Event Screen
Hi-Fi
Events Menu
-
The heart icon was changed to a more recognizable bookmark icon
-
Events were divided into Past and Upcoming Events
​
App Features
​
​
​
Filter Bar
Home Screen
Tag Management
User Profile
Resume/CV Upload
User Profile
Hi-Fidelity Prototype
Hi-Fi Prototype
Company Partnership
Potential Company Partnership: Instagram
​
Reasoning: Over 1 billion users worldwide. Allow for image/video sharing, video diaries, all inherently important to in.studio's primary user.
​
​
​
Next Steps
App Revisions
-
Hi-Fidelity Usability Testing
-
Onboarding for new users in regards to "tag" functionality
-
Improved Event Functionality
-
Improved Professional Networking Functionality
-
Job Search Function​
-
-
Premium Service Offerings​