UI/UX Design
UI/UX Design
CHALLENGE
With the increasing popularity of the cartoon TV series of Miraculous Ladybug and high demand for the official merchandise, the Zag Store has only one location so far which is in Santa Monica. No matter the time, the store location has always long wait times due to the ongoing pandemic where every store and business in America has to abide by the CDC guidelines to wear a mask, 6 feet apart distance and to hand sanitize your hands and as the delays in delivering the merchandise from store to home. Due to the unexpected long wait times in line for the store, it far exceeds their competitors. Even though they do not have an app to buy, the app has all the same features and functions as the website version of the online store, such as browsing through the products, adding products to cart, purchasing products and adding reviews as the limitation is not having an app to buy merchandise and having one store location in America.
SOLUTION
Provide a better Zag Store consumer experience by reducing wait times through enhancements and increased functionality to create an app. The goal is to make improvements to allow consumers the convenience of ordering and paying electronically, making for a simple and quick transactional process. Consumers will also have the option of pay-by-phone. Pre-ordered items from the app will then be ready for pickup without waiting on line, avoiding long lines and wait times.
USER FLOWS, SKETCHES & WIREFRAMES
Based on the unpredictable wait times at the one location of the official Zag Store, I developed the user flow journey by mapping out what the user might do and what they might expect to see while in the process of accomplishing a task quickly and efficiently. This helped visualize how certain screens may appear from a user perspective. It set the groundwork for creating low-fidelity sketches, which evolved to high-fidelity wireframes with software application tool ‘Illustrator’. This validated the flow and allowed me to optimize and improve the user experience for the app.
User Flows
User Flows
User Flows
Creating an account with the Zag Store
Logging into Zag Store Account
Add Credit Card to Account
Purchase Merchandise
SITE MAP
With useful data on hand from the wireframe, a tentative sitemap was
created for the app UI/UX design.
