︎



`

A hassle-free checkout


Going to starting this off by asking a few questions...🤔

Have you ever abandoned an item in your cart because the checkout system was complicated?
Or experienced a checkout system that did not have your preferred method of payment?
How about a checkout flow that had zero visual appeal?

If you have answered yes to all of these then do I have a solution for you! 💡
Anyone who has ordered online expects a checkout system to be smooth and seamless.



My Role


Lead UX/UI Designer


As a lead designer, I established and updated the UX design process while mentoring and overseeing the work of 3 designers on the team.

I scheduled weekly meetings with the CEO, project manager and engineers to present my findings and designs based on the previous feedback, built low and high fidelity screens for both mobile and web platforms.






My goals were to:


  1. Improve the checkout experience by adding intuitive features to both the responsive web and mobile screens
  2. Create a style guide centered around the current branding and aesthetics of the company
  3. Integrate additional services: multi-cart checkout, multiple payment options, and adding promo codes




What’s wrong with the current flow?


Starting at Square One


The previous design was scrapped, which put the design team in a position to freely reinvent a new checkout system.

Even though we did not have any designs to reference we gained valuable information after talking to some users who used to previous product.

Let’s ask the users.


Common User Pain Points



☹️ “Checkout needs to be a fast and painless experience. If I do not see my preferred method of payment, I immediately leave my cart.” -Chris
🛒 “I want to be able to put more than one item in my cart. Since every item is coming from a different vendor I need to know how much everything costs” -Brandon
😑 “There needs to be an option to update my addresses. I move a lot and going back to my profile to change my information before checking out gets annoying.” -Val




My team and I conducted a Google Survey to gather more information about how we can make an efficient streetwear platform. To our surprise 46.2% of users stated that a tedious checkout process was a frustrating experience and 61.5% preferred a fast checkout as an important feature.

With this information in mind, focusing on the checkout flow became our priority.

Designing Solutions



Mobile First


Before designing, I decided to go with a mobile first approach. This allowed me to see what are the most important features that need to be displayed on the screen. It also served as a guideline for responsive web designs.


Checkout Requirements


From the start to the end process, I constantly had to think about what makes a checkout flow…a checkout flow? What does a user see when they select their cart? How can I create a flow that has everything that the user needs to fill out while being mindful of their time?

These questions helped me create wireframes for different scenarios that a user would encounter.




The shortest flow consisting of only 3 pages of a user who is familiar with the application.

For this type of user, they have selected that their address and payment information saved would be saved from a previous transaction. For users who are using the app for the first time or need to update their information, they can input the correct details while still remaining in the checkout flow.

This flow also presents the user the option to save their information to their account for a speedy checkout for their next purchase.



Within the wireframes are also red routes or scenarios that would prevent the users from moving to the next page if a value cannot be recognized. This will prevent any errors such as an unverified address, phone number, promo code or an invalid/expired payment method.

With the mobile flows established, I was able to transpose these flows to the web designs.



User Advantages


  • Existing users will save time by saving their details for future transactions
  • Decrease the possibility of error when filling out the required information needed to fulfill an order
  • Users can now checkout with more than one item in their cart
  • The option to edit their address or payment information within the checkout flow

Project Insights and Takeaways


Improved Visual Design
Engaging in this project has significantly enhanced my visual design abilities. Given the unavailability of the original checkout flow, I utilized the company’s branding and aesthetics as the foundation for the interface design.

Leading Discussions
I took the responsibility of organizing and conducting meetings to communicate my design decisions with the CEO, project manager, and engineers, which resulted in an improvement in my confidence and presentation skills.
︎ABOUT  ︎RESUME  ︎EMAIL