Role:
Team Lead, User Testing Coordinator
-UI/UX Revamp Workflow -
Main Objective
Revamp
This school project aims to set a new standard for Carousell's UI/UX to cater more to new users as well as veteran sellers to aid in the UX flow better. My role includes filling up the research notes as well as appointing and prepping for playtesting with various individuals that fit the project's personas. Together with 3 other teammates, each fulfilling roles such as prototyping and research, we collate our efforts and produce a high-fidelity interactive revamp of the Carousell app over on Figma in 6 weeks.
​
Our goal is to make Carousell a more inviting place for buyers and give sellers more options for their products. However, we will focus more on UI/UX changes from the buyer’s perspective as getting more customers will benefit the sellers too. Through these changes made, potential customer can easily navigate their way to find the best products with ease.
The low-fid prototype has made various changes that benefit buyers by rearranging icons and adding suggested features. As we ran through playtests, we made changes along the way and updated the mid-fid prototype. The mid-fid prototype provides users with a clearer flow to navigate, and we note each feedback the testers had to improve on for this assignment’s interactive digital prototype.
​
This article will show snippets of the work done for this UI/UX project. The whole document of the finalized proposal is available in the link below.
User Personas
Personas are done to have a better understanding of the user/s in mind so the proposed changes will fit their needs and be reliable to them. We split the user personas into two; Primary and Secondary for the buyer and seller user types using the app.
The Primary User Persona Bai signals a classic buyer in Carousel who has just gotten into e-commerce and is not as knowledgable on how such sies/app works.
We decided on the Secondary User Persona to be a seller as we needed some feedback from the seller's point of view which will aid in how they present their information of their products and help new users search for what they need.
Testing Schedule
Next, as the Team Lead, I set up the testing schedule for our low, mid, and high-fidelity prototypes for testing with real users who fit the personas mentioned. For this showcase, I will be showing the planning made for the project's first iteration of the mid-fidelity prototype. This phase is done after testing and improving on the low-fidelity prototype done with a paper prototype.
1st Iteration
For this round of testing, we will reiterate the prototype from the previous tests and add the feedback given. The first test will be a paper prototype mid-fid to test the changes made in the prior mid-fid. The second test will be more detailed mid-fid and will be done interactively. The last prototype will be a high-fidelity test that closely resembles the original Carousell app.
Task Flow List
1) Log in to an existing account
2) Find a specific car with 1 year of service
3) Go to the listing and like the listing
4) Follow the seller of the listing
5) Go back to the landing page to find the listing
6) Chat with the seller
Questions
We asked questions during the playtest to improve on our mid-fid prototype via their feedback.
1) Did you face any difficulties attempting the tasks given? Discuss feedback given.
2) Do you have any experience in navigating Carousell before?
3) Do you have experience in finding products from other apps?
4) If you did, were there any features that you thought would be useful to bring to Carousell?
5) Were any of the features that we changed beneficial to the overall experience?
6) Looking at the original Carousell and our version, are there any improvements we have made?
Wireframes
Below shows the screens and wireframes made specifically for the task flow in the form of Mid-fidelity using printed images and done on the table physically. What's a mid-fidelity prototype? Simply put, it's a prototype where a playtester will physically show the coordinator what actions they are making and pretend the paper prototype is an app.
The difference being it has slightly more polish with the addition of logos and text as compared to the low-fidelity where only basic shapes and greyscale colors are allowed. This further aims to understand how users interact with the decisions we have made in revamping Carousell's UI to accommodate our personas.
​
You can press on the image to open up and see all the screens. For further details, the PDF download is packed with all the prototypes documented.
Testing Reports
As the coordinator of the playtesting sessions, my role is to gather as many individuals that closely match the personas as possible and come up with schedules for them. Each participant was given the tasks to do as well as questions at the end.
Throughout the playtesting, I would record videos of the process and guide them if they are stuck. Each task is then summarized and documented in the report below. For privacy reasons, I have named them "players" followed by their order. Click on the image to expand and see the rest of the playtester's sessions.
As stated in the report, changes made are done on the spot for the next player and it is done by marking the changes directly on the paper prototype so the user experience is enhanced in the upcoming playtest.
Thorough Observations
After the playtesting, I sat down with the team and evaluate each playtester's responses and actions in regard to each task and go in-depth on the UX and flow to see if it can be improved.
We noticed the second and sixth tasks were where the testers made the most deviations, and most methods were unique. To achieve our goal of improving the UX of buyers in Carousell, we have noted each unique way done in these two steps and improved on the features related to the next iteration.
​
The table below shows the tasks done that provide insight into the experiences each playtester went through.
Polished Adjustments
During the playtesting sessions, changes were made on paper whenever possible for the iteration to improve each test. These changes are then recorded and polished upon the next iteration. The updated changes in wireframes are detailed below.
More research on the Full PDF
What is presented is a fraction of the whole process of making a UI that fits our primary and Secondary personas. As the project lead and coordinator, my job is to make sure the entire team is performing and working together well which in it itself is a challenge as the other members are juggling this mod and their main GAM mod which is a big project done for year 3s.
I have to allocate timeslots to meet up with each member to get their input and collaborate with them in Figma which is proven to be the best tool for designers as we can even invite our lecturer to give critiques on our work done so far.
​
My people skills also allow me to coordinate various playtesting sessions across different times and places to get the much-needed feedback to swiftly provide to my UI/UX designers to make the necessary changes in our 1st to 3rd iteration of the prototypes.
​
In the end, the project scored a B+ on this assignment and it is primarily because we were focusing on the GAM project more as deadlines were approaching.
​
We made a playable online prototype that can be accessed through this Link. The instructions are the same as the tasks given in the playtests.
You can view the full document here: Project Proposal
View my other works:
