UX Design
2020
Figma, Illustrator
Individual
Ensemble
I designed Ensemble, a social media site that allows live concert enthusiasts to connect, in my Interaction Design class. I was assigned 3 user goals for this profile page and successfully broke down the goals into user-friendly tasks, through user testing, wireflows and prototypes.
Process & Tools
User Goals & Task Flows
For this project, I was prompted with 3 user goals:
-
The user would like to make a post that a specific friend could not see (they do not wish to unfriend or block them).
-
The user would like to block another user from seeing their posts or messaging them.
-
The user would like to reply to a comment (not comment on the original post).
I started by breaking down these user goals into tasks flows that would outline each task required to reach their goal.
Profile
Page
Click settings
icon
Click
"block"
Click
"confirm"
Example of a task flow for blocking a user.
Using the task flows, I started to ideate wireflows and work with several possibilities. In the images below, I tested two possible wireflows for hiding a post from a friend. One workflow was prompted by an icon on the posting feature and the other was prompted by a dropdown menu.
Example of a wireflow for hiding a post from a user using an icon.
Example of a wireflow for hiding a post from a user using a dropdown menu.
Branding & Prototype
I wanted to put these wireflows into action so that they could be tested. I started my prototype in Illustrator, designing a simple profile page that highlighted features for live-music enthusiasts, such as highlighting music tastes and their upcoming concerts.
Using Figma, I transformed my static site into 2 different interactive prototypes that I could test interactions with. I tested the site on fellow students, giving them the user goal: The user wants to hide a post from a specific friend, but does not want to unfriend or block them. The images below show two examples of these interactions.
1.
2.
Interaction Problems
After testing both my prototypes, I observed the following issues with these interactions:
-
In the second prototype, it took longer for the user to find the "hide" dropdown
-
In the second prototype, the wording of "hide friends" was unclear as to what the interaction would be - comments on ambiguity and lack of call-to-action.
-
Users felt uncertain if the action was complete, as there was no change of state at the end of the task.
After this evaluation of my research, I decided to focus in on my first prototype, that was more successful in terms of user-friendliness and refine it to solve these issues.
Design Solution
To solve these design problems, I decided to focus on creating an interaction that had a clear call-to-action, where the user understands why they are completing the task and to ensure a change of state after the task is completed. To do this, I started by ensuring the pop-up window made it clear of the task at hand by changing the wording of the title.
Old: "Hide Friends"
New: "Hide this post from a friend"
I then moved on to making a more simple and less redundant interaction for selecting a person from the user's list of friends. I did this by changing it from a "select" button to a simple hovering of the element. I additionally added a profile picture next to the name of the friend so that the user could be certain of the person they have selected.
Old: Select button
New: Select entire element with change in colour when hovering
My last step to refining this interaction was ensuring that the user saw a clear change of state after this task was completed so that they knew it was done. I did this by
a) adding the selected name to a list below the search function so that the selection of the name was confirmed and b) by adding the name to the bottom of the posting feature to ensure this user will be hidden from the post.
Old: No indication if name has been selected
.png)
New: Name that is selected, goes under "Hidden" section
The name is now at the bottom of the posting feature, with the indication of the crossed eye icon. Also allows user to easily cancel the task, with the "x".
Reflection
This project taught me the importance of user testing. By testing this interface on users, not only was I able to understand the real goal of the user but I was able to compare how they used it versus how I designed it to be used. From here, I could match the design with their mode of usability to ensure user goals and designed tasks align. It also showed the significance of word choice and the way you explain a feature to a user. It is important to use wording that will match the mental model of a user to create smooth user interaction.
