UX/UI Project
K MALL
Goal
K-pop, being a new global phenomenon, has been attracting millions of people with its fascinating ways of composing music and arranging choreography. The amount that sales in K-pop related products, such as music CDs and all different kinds of related merchandise.
However, the current major K-pop websites could be a bit overwhelming with their user interface design: too much information including images and texts. This could lead to a result that reduces the customer's desire of shopping.
Hence the reason why I decided to design a more modern looking and user-friendly website where the customers could easily access and have a smooth experience with their purchase.
K Mall
K Mall is an imaginary website that sells K-pop-related products with a straightforward user interface and smooth user experience. The name K Mall aims to provide an online shopping experience where the customers can have access to the latest K-pop products when they are sitting at home in front of their computers or holding their phones.
Persona
Age: 21
Occupation: Student
Location: Toronto
Background: Haechan is an exchange student from Seoul, Korea. He has been a K-pop fan since the age of 10. Coming to Toronto for his Bachelor's degree, he is excited about his new journey, but he also wonders if he can still get his hands on the latest K-pop products to support his favorite groups.
Goals: Pre-ordering CDs/ Signing up for fan meeting events.
Haechan
"I am so happy to study aboard, but I don't know where to buy K-pop products. I heard that some K-pop groups are coming to north America for fan meeting events, I wonder where can I sign up for those."
Tiffany
Age: 34
Occupation: Store Manager
Location: Toronto
Background: Tiffany is the manager of a local clothing store, she works with a lot of young generations and that is also how she was introduced to K-pop. After bingeing some Korean TV drama, Tiffany is inevitably attracted to some of the items that appeared on the show and wants to bring them to her store for sale.
Goals: Buying bulk items/ Getting reward points for purchases.
"Coming into the K-pop world makes me appreciating a different culture that carries so much unexpected but interesting stuffs, I want to share that with friends my age because I think they will love it."
Low Fidelity Wireframes
The low fidelity wireframe prototype is created to give a basic look at the structure of the website, as well as to be used as a user flow testing tool. The prototype below shows the user flow from the landing page to purchasing items from the online store.
User Journey Map
User Testing
Based on the results of user testing, some changes were made when creating the high-fidelity prototype. Such as adding more information and interactive elements on the home page, the visual aesthetic is now more appealing and vibrant, visual cue buttons are easy to notice which provides a smooth user experience.
Responsive Mobile Mockup
.png)
Homepage and flyout