MOCHITHINGS
E-Commerce Redesign.
At MochiThings, stationery buyers can easily find their items to purchase and have a seamless checkout process through the responsive eCommerce site.
SKILLS
UX Research
UX & UI Design
TEAM
Self-Directed
TOOL
Figma
How might we offer a clear and informative way to purchase stationery online?
MochiThings was founded in 2011, offering the cutest, most unique, and most functional products. They carry 1,000+ products, but the website has less informative ways to find and purchase user stationery. To provide a better user experience for new and returning users, I redesigned the site to improve the findability and transparency of the checkout process.
PROCESS
RESEARCH
User Research
To get a better understanding of the users, I conducted a user survey covering the online shopping experience. Of the 10 participants on the survey, I conducted user interviews for 6 participants and asked about the stationery shopping experience. Here are some of the data and Insights that stood out from the interviews.
Users had difficulty finding items of quality they were looking for online.
They prefer to test out products before purchasing.
Users wish to spend less time shopping for stationery.
INSIGHTS
Market Research
I looked into other stationary eCommerce that users shop to understand common ways to provide seamless product findings and checkout experiences for their users.
Takeaways: After looking at other eCommerce sites, I realized MochiThings was missing:
Product Reviews & Rating
Alternate views of the products
Cart Notification when adding items to the cart
Product images and the checkout process were significant topics during my user research. I focused my feature design on the product details page and cart system.
SOLUTIONS
MochiThings users need a hassle-free product finding and checkout process to purchase stationery items frequently.
SKETCHES
I started my design with a sketch based on the inspiration from the existing Mochithing website and then added some new features that support users in purchasing products.
Testing & Interaction
After plugging minimum information and connecting each page with interactions, I conducted a usability test with 3 participants.
The goal of the usability test was to discover any problems and unclear things that users found on the early-stage prototype. Below are the findings and insights from the test.
DESIGN
Here are the design solutions I came out with that reflect the usability test feedback.
PRODUCT LIST PAGE
Organized product categories based on the card sorting results.
New sort by and filter options for easy navigation to find products.
CHECKOUT PROCESS
Implemented the cart popup after the item is added to the cart to provide fast checkout options.
Navigate users to the login/sign-up page for autofill customer information to provide fast checkout for returning users.
HOME PAGE
The New hero image was added to provide intuit brand concept to users.
PRODUCT DETAIL PAGE
The alternate views of the product images for more accessibility on images that users like to check.
The customer review section was added for users to reference and support quick decisions on the item purchasing.
FINAL PROTOTYPE
Please feel free to try out the interactive prototype by clicking on the image on right.
REFLECTION
CHALLENGES
This was my first time using Figma to create wireframes and prototypes and being able to utilize components effectively was a learning curve. Through trial and error, I managed to understand components and how to use them.
KEY LEARNINGS
Throughout the project, I learned that product categories are important for users to shop online. I conducted card sorting to figure out common stationery categories and was able to implement them in the main navigation to guide users to find the product more smoothly.
