UX Case Study — Building an Intuitive Online Merchandise Store Website

Summary

Project Name

StudentXCEOs International Summit Merchandise Store Page

Role

UI/UX Designer

Project Date and Duration

7th — 14th August 2021 (7 days)

Project Background

StudentXCEOs International Summit (also known as SxC InterSummit) is an international student event where you can attend seminars, workshop, and competition initiated by the StudentXCEOs Jakarta Chapter. I was tasked to design Merchandise Store, an official online store found in SxC InterSummit’s main homepage. Through Merchandise, users can obtain information regarding the official merchandise of the event that can be used in the playground through easy and intuitive online shop experience. In this project, I worked as a UI/UX Designer alongside other designers, software engineers, and managers tasked to research and design the merchandise store.

Goals

• To exhibit and promote all official merchandise regarding the SxC InterSummit event.
• To create a simple merch buying process for the public.
• To market the merchandise to the International audience as the main target of the event itself

Problems

• There haven’t been an Indonesian student-based event that could market their merchandise to international audiences.
• Most publicly available C2C online marketplace in Indonesia only covers the Indonesian audience for the products.

Project Scope

• Provide an end-to-end user journey flow from entering the store to buying the products
• Determine the shopping flow and system

Challenge

• How can I create a simple online shopping experience?
• How can I enhance the main event itself (SxC InterSummit) through the utilization of online shopping site?

Gaining Insight Through Empathizing

Before starting the design, we first took a look at SxC InterSummit’s target audience to help compose a research for this project. We decide that our audience are international students in general.

After deciding the target audience, we planned and did a small interview with several people who match our target audience to gain insight on what to improve and what to avoid when creating this event. We did not research our specific tasks first (in this case, mine was designing the merchandise store). We collectively research the event in general as a team first while also learning about how to do user interviews effectively from our lead.

User Research

We interviewed several people who fit with our target audience and asked them several questions regarding online events in order to achieve our current research goal. Because of the pandemic, we had to do the research online using voice and video communication software such as Zoom and Google Meet.

Research Goal

The main goal of this research is to gain users’ insight about what aspects of online shopping that the users liked or disliked, considerations when shopping online, and opinions or experiences of attending the current SxC InterSummit events.

Interview Question Examples

• What are your considerations when joining an online event?
• Have you ever attend and online event? If yes, how was the process of attending it? Is it good or not and why?
• What do you expect to obtain from attending an online seminar?
• If you have attended SxC’s International Online Summit before, how was your experience?
• Imagine your personal experience in online shopping. What is it and what did you like about it?

Establishing the Problems

After conducting the interview, we gathered in an online meeting and discussed while analyzing the interview result using Miro’s sticky notes.

Gathering and Sorting Insights

The first step of analyzing the data is to arrange and group the data to help ease the reading and processing later on. We grouped the data based on the event type, and then the insight within the types. This was made so we can check on each part easier, and to assign the data to our respective tasks.

After grouping the data and assigning them to our respective tasks, we continue to separate it and analyze the problem from the data, which is the user’s voice. We determine the problem, and then create How Might We which then we turn into solutions. The key How Might We from the data that could helped my tasks are:

1. Create an online shopping mechanism that is easy to understand while maintaining the engaging aspect
2. Give useful information about the products for the users

Wireframing and Prototyping

After deciding that I will be designing the online store, I continued the process with creating the high fidelity prototype and wireframing for the store due to time constraints. I tried to keep in mind the result of the research and tried to create the interface of the website as simple as possible and reusing many elements from the landing page to ensure design consistency.

I started working on the high-fidelity prototype using Figma. I tried creating as close as the hoped finished implementation would look like. I matched the looks of the machine with SxC InterSummit’s theme, and did several explorations of the visuals.

The prototype for this version can be accessed here.

Usability Testing and Design Reiteration

Creating solution without checking if the solution works is bad practice, therefore my team and I planned a usability test on the working prototype.

Usability Test

Usability Test is a research method where the user will be ask to complete certain task using the prototype while the interviewer will observe their behavior. I interviewed 3 people who have different experiences of online shopping to diversify the result and obtain as much data as possible. Because of the pandemic, I had to do the research online using voice and video communication software such as Discord and Google Meet.

The Result

After conducting the usability test, I found out that the current merchandise store is already good because all of the users are able to navigate through it. At this point, we are approaching our launch date really fast and we don’t have anymore time to research or redesign. Fortunately, as we shifted our focus to build and implement the design to live website, the developer team didn’t stumble upon any issues regarding the design because I reused a lot of the same components from the landing page so implementation went on smoothly onto the launch date.

The Launch and Impact

Finally. the moment we’ve been waiting for, the implementation and the launch of the feature. The Store was scheduled to open at August 15th — October 16th 2021. During those times, people are able to visit the online store and purchase the merchandise of this online summit event.

Conclusion

StudentsXCEOs International Summit was a success even though by not a huge margin. Handling this project was quite exhausting but really fun. I learned a lot again from my manager and person in charge who guided me through and I could experience a real design sprint from the beginning to the end. To see something I designed would be implemented and used by real people was really rewarding for me and I’m quite satisfied with the result. There might be some mistakes here and there, but I hope I could learn more from this experience.