adding a commenting and messaging feature to the vogue runway  app to allow discussion of collections and looks for each designer posted on vogue runway.

RESEARCH
METHODS

user surveys

Commenting and messaging over social media is not a new concept. User surveys provide a straightforward, time efficient way of collecting data. Focusing on gathering qualitative data keeps the attention solely on the chat feature.

Competitive analysis

Comparing established mobile apps with the ability to message and comment will give a sense of where to begin when designing. Highlighting the strengths and weaknesses of each app will reveal what works and what doesn’t.

USER SURVEYS

RESULTS

participants’ last experience using a chat feature was simple, efficient, and/or quick. The 7th mentioned they typically do not utilize comment sections.

participants said they would be less likely to utilize a feature if it was hidden in some way.

of the participants said they would not be comfortable communicating to strangers in a forum or social media platform.

COMPETITIVE ANALYSIS

INDIRECT
COMPETITORS

Reddit
Instagram
Facebook
Twitter
YouTube

Common themes among
all social apps:

  • Conversing with any and all users to create a community.
  • Does not focus in on one industry.
  • Framework of chat features were similar.
  • Avatars to indicate user.
  • Visual indication of comment thread.
  • Neutral in color.

mapping the details

Project goals

Establishing the user goals, business goals, and technical considerations will give a focal point on what the new chat feature will aim to do.

task flow

Design the framework for how a user will navigate from the home screen to either comment or message about a particular look or collection.

user flow

Based on the established task flow, a user flow will give an idea on the anticipated pathways a user could take to get to their end goal of commenting or messaging.

PROJECT GOALS

task flow

user flow

CREATING THE FRAME-WORK

WIREFRAME SKETCHES

Based on the app that is readily available for download, sketches of new features were created. These features include both  messaging and commenting within the app.

HIGH FIDELITY WIREFRAMES

Using Vogue’s established UI design system I created high fidelity wireframes for both a messaging and commenting feature.

wireframe sketches

commenting

messaging

HIGH FIDELITY WIREFRAMES

commenting

messaging

what works & what doesn't

usability testing

Gathered participants to test the prototype created from the high fidelity wireframes. Used to determine success points and design flaws based on tasks given to complete.

affinity map

Noted the various successes and pain points of the usability test.

USABILITY TESTING

Testing Objectives

Confirm the overall ease of use to comment or send a direct message through the Vogue Runway app by testing the prototype in the testing platform Maze.


Determine any usability issues with commenting and messaging through the app.

tasks

1. Access new messages and send a message.
2. Message a user about a specific collection.
3. Leave a comment on a specific collection.
4. Leave a comment on a specific look.

task completion rate

“I would rate the difficulty of the Tasks a 1. They were very straight forward, and the icons were commonly used icons to perform those functions.”

“The function of the buttons was very intuitive.”

AFFINITY MAP

PARTICIPANTS

Task 1

Access new messages and send a message.

successes

Completed task

Pain Points

Gave up
Not familiar
with task

interactions

Completed task
directly
Completed task
indirectly
Initially selected correct
button for messaging

Task 2

Message a user about a specific collection.

successes

Completed task

Pain Points

Gave up
Not familiar
with task
Selected wrong
button for
message a
collection
Confusion of
share button

interactions

Completed task
directly
Completed task
indirectly
Initially selected correct
button for messaging

Task 3

Leave a comment on a specific collection.

successes

Completed task

Pain Points

Selected wrong
button for
comment

interactions

Completed task
directly
Completed task
indirectly
Initially selected correct
button for commenting

Task 4

Leave a comment on a specific look.

successes

Completed task

Pain Points

None

interactions

Completed task
directly
Completed task
indirectly
Initially selected correct
button for commenting

overall

successes

Felt tasks were overall easy
One reached "typing" screens
able to complete tasks

Pain Points

Had a hard time
with Maze

interactions

Intuitive icons
Prototype