UI/UX & Interactive Design
Native E-commerce App UI/UX: OTAKORE
PROJECT OVERVIEW
This conceptual UI/UX design project for OTAKORE, an e-commerce app that specializes in selling Japanese anime merchandise, was a collaborative effort by designers Hoi Ki Kong and Ka Yan Lo. Together, we designed an engaging digital shopping experience, emphasizing usability, accessibility, seamless navigation, and a strong brand identity that resonates with anime enthusiasts.
Scope
Brand Logo & Style Tiles
UX/UI Research
Personas, User Journey Map & User Flows
Native App Wireframes (low & high fidelity)
User Testing
Clickable Native App Prototype
BRAND VISION
By combining the word ‘Otaku’ and ‘Core’, the shop OTAKORE is a online store selling Japanese anime and manga merchandise.
Customers can purchase products of their favorite characters and series, and have the goods deliver to their doorstep. From manga to novels, from badges to plushies, OTAKORE provides all kinds of official merchandise shipped straight from Japan to all over the world.
CREATIVE PROCESS
1. Project Research & Planning
My teammate and I started out by browsing online e-commerce sites and native apps and we wanted to create something unique, or even unseen in the market. Since we are both anime fans, we quickly decided to design an app that specialize in selling and providing exclusive anime/manga related goods and user-experience via this brand, OTAKORE.
After that, we did a detailed research on the target audience and executed competitor analysis on existing similar products(sites and apps). Then, we together designed the style tiles, then divided the remaining workload in order to finish our work more efficiently in the upcoming parts.
2. Sketching, Personas, User Journey Map & User Flows
After research was done, I mainly focused on creating 2 personas for the OTAKORE app in Figma. Then worked out a comprehensive user journey map for one of the users(personas) and started to design the main user flows that we wanted to focus on in Miro.
At the same time, my teammate focused on creating sketches of the layout on each page, such as the boarding pages and the home page. During every process, we kept exchanging opinions on design decisions with each other, to make sure we were on the same page and we both contributed our own thoughts into the user flow designs.
3. Mid-Fidelity Wireframes & User Testing
After all preparation work done, we started to create mid-fidelity wireframes in Figma with the basic ideas on the sketches and concepts developed during research. The clickable prototype of wireframes for the Boarding pages, Home page, Communities page, Explore page, Cart & Checkout pages and Profile page are done in this stage and has been tested with 5 users in person, and received feedback for improvement on the usability.
4. Design Reviews & High-Fidelity Prototype
We gathered feedback from all user testings, made some improvements to the layouts and accessibility and started to work on the high-fidelity wireframes. By creating Components and with proper layering and naming structure in Figma, we has also designed custom micro-animations and responsive designs to buttons and elements that align with the brand identity of OTAKORE. We have also received feedback via design reviews from our supervisor and peers, which added great value to our work when we refined the prototype.