TUN is an agency that represents a boutique brand, focusing on offline channels before this project. This project aims to extend their channels to online platforms. The most challenging part is integrating the offline systems used previously into the online platform while considering the overall user flow for both online and offline channels. The web and mobile versions were completed, and user interviews were conducted for validation.
The information presented in this case study is for job application purposes and has been modified to comply with a non-disclosure agreement. The views and opinions expressed are solely those of the author and not of any entity. This case study is not intended for commercial use.
As a lead UX designer in charge of this project, I worked closely with the PM to define the product positioning and scope of development. In addition, regular design reviews were conducted with the engineering team to ensure feasibility while ensuring a team-wide understanding of the developed features' overall flow and business context. I also regularly engaged in design peer reviews with other product line designers to maintain consistency across products.
To overcome the obstacles of online and offline communication and optimize the shopping and customer service process, I have:
I designed across and collaborated with one other UX designer and one UI designer.
When the user first enters the website, the landing page serves as the entry point, allowing them to browse further based on their interest in a particular brand -
When thinking about the shopping process, the website does not force users to log in to reduce friction and interruption in the user's shopping experience. Instead, the login and registration process is integrated into the shopping process. Once users add items to their cart, they can log in or register directly from the cart interface. In addition, the product information is fixed on the right side to maintain the user's shopping impulse and reduce the interruption caused by the login and registration process.
Maximize marketing effectiveness while maintaining the design style and layout of the page -
After analyzing competitors' practices, researching multiple high-end shopping software, and talking with stakeholders, I found that many high-end websites focus on the product and reduce the marketing content. Therefore, I designed a sticker banner above the header to showcase marketing information without disrupting the layout to maximize marketing effectiveness while maintaining the overall design style.
Streamline the shopping experience by integrating login/registration with checkout and keeping checkout details on the right to sustain the impulse to buy -
Based on our discussions with the client, we found few cross-brand consumers, and the product types of each brand differ significantly. Therefore, we use landing pages to segment the audience and also use this page to shape the image of the agent. Dividing the website into five brands console minimizes brand interference and speeds up the efficiency of each brand's business personnel, allowing them to maintain their brand separately. We also optimize the shopping process through usability testing.
Maximize brand exposure by categorizing search results by brand and product type in real-time search -
Design the search function to expand the search range to five brands and define the search scope, implementation methods, and feasibility with the backend engineers. This interaction includes mechanisms for product recommendations and sorting. Design-wise, the instant search will categorize products to help users search for what they want faster and correspond to each brand. At the same time, other brands with similar products will also be presented this way to achieve the effect of exposing diverse brands.
Presenting the accumulated consumption of members in a graphical format, such as a progress bar, helps users understand their level of loyalty program. They can view the rewards and progress of upgrading at any time, and the emphasis is placed on the remaining progress rather than the accumulated progress. This encourages users to continue consuming without feeling guilty, and a timely push notification reminder is designed to keep them informed.
Implement a real-time search that categorizes results by brand and product type, providing opportunities for other brands to re-expose through search results -
To accurately present the member upgrade and renewal accumulation process, the client has been consulted, and it was established that renewals are accumulated over one year during the membership term, whereas promotions are based on the past year's spending from the current date. Card levels are separated and displayed independently, not combined, to clearly indicate this information. In addition, a tooltip reminder is added on the member benefits page to encourage users to view the other card levels.
During the design process, internal testing and interviews revealed that users care more about how much they can upgrade and the deadline than their progress. Emphasizing how much they have spent can cause psychological stress. To address this, the most critical information is placed in the center of the pie chart to highlight it; the accumulation of renewal and upgrades are shown using progress bars (not showing the exact amount) to visualize the progress. The user's transaction details are listed on the right for easy reference. Accumulations that are about to expire are highlighted to motivate the user to continue their spending.
In the app's shopping cart, the information is rearranged to place the message that can encourage users to purchase at the top of the screen. Different types are presented using labels to help users quickly understand. The focus is on "cost," and a reminder is given when the user is about to reach the target to promote sales. At the same time, when designing the shopping cart, the ability to delete items or adjust quantities is not emphasized on purpose to allow users to focus on the ordering process and reduce drop-out or cancellations.