#nm4259

During discussion with my team to combine our ideation sketches, I drove the discussion and reminded my team members that we should focus on solutions that were most useful but could be created with less effort. Instead of focusing on a major redesign of Shopee, we focused on ideas that we could iteratively test and build on, so we would know what features are actually useful to users. For example, some of our ideas had been to give Shopee a visual refresh to make product listings bigger and thus encompass more details for quick comparison. However, this did not directly allow users to compare between products the user wanted to choose like our main pain point, so this was discarded. Instead, we chose a more direct approach of allowing users to select products to compare with. 

Group ideation sketches

Once we selected the most promising ideation sketches, I wanted to do usability testing  with users to find out if our main feature was intuitive and useful.  To address this, I took the initiative to create a low-fidelity prototype for usability testing. This prototype was shared with team members for a final review. 

To guide and provide a more structured approach for my team members during user testing, I curated a set of example questions to get valuable feedback. My main aim was to find out if they could use the main feature of our redesign, which was the comparison feature, as well as any qualitative insights they might have on our design, such as if it was actually useful to them. 

The questions included testing the main flow such as how users would compare items using the prototype, their expectations when interacting with specific elements, such as the “likes” icon and the “reselect” button, and their overall impression of whether the feature improved their ability to compare products on Shopee. 

Instead of choosing new users who might have different pain points, we conducted the testing with the initial users we worked with for our contextual inquiry, to directly address their pain points and determine if our redesign effectively addressed their needs.  

Each member of our team conducted usability testing and shared insights with the rest of the team. I then conducted a quick affinity diagramming to structure the main insights and shared these insights with my team to discuss the refinements of our initial lofi prototype. Mainly, our users were able to navigate the comparison flow easily, but did not realise the “reselect” button was a button. They also voiced concerns for information density in our comparison table. With these insights, I took the initiative to design the final wireframes.

Improvements based on usability testing

Lastly,  I created a navigation flow. This flowchart illustrated the steps users needed to navigate through the redesigned feature. It provided a visual representation of the user journey, allowing us to identify potential bottlenecks and areas for improvement. I also researched possible market rates for UI/UX Designers to work on our project.

Initially, my group was quite lost on what to do to begin the redesign for Shopee’s comparison feature. I decided to initiate the ideation and designing process by creating a plan and schedule of what to do.  I proposed that we first create design sketches of potential ideas for our ideation, then share our sketches and discuss what elements we wanted to move forward with for the final high fidelity design. This could be taking the best elements among all sketches, or choosing the top few sketches and building upon them.

I decided to use low fidelity sketching as it would allow us to quickly present our ideas to get our points across without focusing too much on the details and specific implementation. It would also allow us to create more design ideas without focusing on the quality of each design sketch. I went for quantity over quality at this stage, and forced myself to think out of the box to not limit any crazy ideas that could potentially be useful in the ideation with the group later on.

As I was working on my ideation sketches, I was concerned on how I could tell if our redesign actually made an improvement. Unfortunately, in the initial interview I performed with my users,  I did not take any metrics such as task completion time, to understand how much time users spent to finish their task of comparing, or usability via the system usability scale (SUS), which would tell me if users found the application usable. Despite this, I intend to create a lofi prototype to do usability tests with users to uncover potential design pitfalls and a short post-usability test interview to gather qualitative insights that can help our team understand if our redesign improved the user experience.

However, given the tight time constraint, we might not be able to perform a proper usability test with external users, and might opt for a guerilla testing instead. In any case, I shared my plans with the team to align expectations of the schedule. 

Ideation sketches

In my ideation, I found designing a comparison feature to be quite challenging given the small real estate available on a mobile device. Given that comparison usually requires dense data, it was challenging to think of ways that could fit into a small screen. For example, one idea I had was to inform the user to horizontally flip their phone to view more data rows so to compare more products. However, this could be intrusive and annoying for users, especially if they were comparing multiple times, or  on the move. I also realised I should account for the touchpoints that users could interact with, such as the affordance of scrolling through a horizontal carousell to compare products, as they might not know they can scroll. Additionally, they might accidentally scroll too far into the next product, which made me think of introducing a “snap in place” interaction. I hope to design a useful yet simple interaction solution.

Our journey of improving Shopee's comparison system continued to present us with both challenges and opportunities for contributions. One of the challenges we faced was the need to delve deeper into the competitive landscape. While the decision to examine Shopee's competitors had provided valuable insights, it also raised questions about how to differentiate our redesign from the other e-commerce platforms.

To address this challenge, I took on the task of conducting a more in-depth analysis of Amazon as I discovered it had a direct comparison feature. I shared this discovery with the team for potential explorations of the redesign. We were also careful to take note of Amazon’s feature but not reference it too heavily to enable us to think critically and innovatively on a solution.  Understanding the strengths and weaknesses of Amazon's approach would help us refine our design and potentially incorporate elements that had proven successful in a similar context. 

For example, some interesting things I noticed was how comprehensive Amazon’s comparison feature was, showing all details that users may need from price to type of compatible devices. As users may have different product needs, Amazon’s comprehensiveness aids each unique user.

Amazon’s comparison feature

To overcome the challenge of identifying user pain points within Shopee's existing comparison-related features,  I also decided to extensively research Shopee’s comparison-related features and how those features were currently presented in the application. While I initially believed  that Shopee did not have a “see similar” function, upon deeper analysis of Shopee’s “like” feature, I realised Shopee indeed had a similar feature hidden within the “Likes” page. As a long time user of Shopee, I wondered who else had used or even seen this feature. Even  with the addition of this feature, the comparison function was still lacking, and this helped our group in better understanding the various functions Shopee offered.

Shopee’s “Find Similar” entry point

Another challenge was defining the scope of our project. "Comparison" was a broad concept, and to streamline our efforts, I created a user flow with screenshots to visually illustrate the interactions between various features that were comparison adjacent. This visualization became a valuable reference point for our group, ensuring that we remained focused on the most critical aspects of comparison.

User flow with screenshots

In the week 3 seminar, our team first encountered the challenge of brainstorming potential applications they had issues with for our project. We struggled to find potential applications. To address this challenge, I took the initiative to facilitate a brainstorming session. I encouraged each team member to share their ideas and concerns openly, and probed each member so everyone would be heard. Through this collaborative effort, we eventually settled on the idea of improving Shopee's comparison system for similar products, specifically focusing on enhancing the "Like" feature and or the "Review" feature.

This decision brought its own set of challenges. One notable hurdle was the temptation to dive too deeply into the design details, such as contemplating the intricacies of creating a user-friendly interface for mobile devices. To overcome this challenge, I reminded our team that our primary focus at this stage of the design thinking process should be on validating the problem itself. We needed to ensure that the issues we identified with Shopee's system were significant enough to warrant a redesign.

To provide clarity and context for our project, I gathered screenshots of our experiences with Shopee's current "Like" and "Review" features. These screenshots allowed us to visually communicate the issues we had encountered and gave us a starting point for our discussions. Additionally, I also took the time to explore the existing design of the features on Shopee, expanding our knowledge base on how the platform currently helps users track products they want to purchase.

I also took a look at Shopee’s competitors to understand if this was an issue that only Shopee faced, or a broader issue with ecommerce applications. I decided to look at Lazada and Amazon, given that they were the most used applications after Shopee in Singapore in 2022 (Singapore: Leading E-commerce Sites 2022 | Statista, 2023). I realised all of these applications do not have a direct comparison feature, but do allow users to save products and aid in their decision making with the use of reviews. Amazon does have a “See Similar” feature, which was worthy of more detailed analysis in future milestones. Although Lazada does have a “Like” feature, after five minutes of struggling, I was not able to find where my liked items were at all and gave up in my search. I also added these screenshots of the other applications to discuss with my teammates for the group milestone later on. 

I found that researching Shopee’s competitors was a challenging yet fulfilling task that enabled me to better understand the constraints and workings of each application, as well as further my motivation to work on this problem space. 

References

Hi there, I'm Pei Ning and I'm a current Y3 who is pursuing UI/UX Design as a career. Outside of academics and work, I like to feed stray HDB cats and hike!