Enhancing eCommerce personalization and checkout process for customers
The Goal
Design a mobile e-commerce application that allows customers to purchase high-quality, affordable furniture with personalization options.
Responsibilities
User Research & Market Analysis, Sketching, Wireframing, High-fidelity Design
Role
UX/UI Designer
Project duration
4 Months
Create a simple and pleasing user interface while maintaining focus on the product
Provide easy-to-access delivery options
Provide a seamless checkout process
Design a wishlist section to list favorite products
Challenges
Research and Insights
Through user and secondary research, I was able to learn more about what consumers enjoy about online shopping and the common limitations that they experience.
I also reviewed other shopping and browsing sites to further understand how to design for e-commerce, usability, and how those two things keep customers loyal to a business.
Competitive Analysis
By conducting a competitive analysis between a few of the most popular shopping and browsing apps amongst consumers, I was able to understand what makes these platforms successful due to the services they offer. I wanted to scope out key features that stand out and take what was not working for users into consideration to build something solid.
Not every business I chose to research is exclusively a furniture e-commerce platform, such as Pinterest— which is a platform used to share images, but there were a few valuable insights to consider.
User Pain Points
Meet the users
Design Process
Based on my research, I noticed that users value simplicity, convenience, and straightforwardness. As a result, I thought about design solutions that involve fewer screens, fewer taps that it takes to purchase a product, and how to carefully guide the user through the browsing checkout processes.
I created an information architecture diagram to demonstrate how the product should be structured and how to properly organize content in a way that satisfies the user.
Information Architecture
Initial Sketches
After sketching out screens for the onboarding, browsing, and purchasing flows, I was able to figure out a skeleton to work from.
Using the information architecture as a guide helped organize a flow that is organized, seamless, and presents all necessary information to its user.
Low-fidelity Wireframes
After the sketching phase of my process, the low-fidelity wireframing wasn’t very difficult once I had a better idea of how I wanted the main screens to be designed. Most ideas from the sketches in regards to the layout were kept in the low-fidelity wireframes, such as including a ‘Browse by Category’ section on the homepage and allowing a customer to quickly access their favorite products as well as mood boards through the ‘Favorites’ icon in the bottom navigation bar.
High-fidelity mockups
Solution 1: Information Architecture
During design ideation, I thought about how users would feel navigating through an e-commerce app and how that experience could make or break customer loyalty. I decided to go with a simple layout, limiting the overcrowding of images and text content. A clean UI with white as the background using accent colors to create a visual hierarchy helps guide the user through their browsing experience.
Lastly, I included a bottom navigation bar with the two outermost icons being the most important: the home browsing page and the cart page for easy access.
Solution 2: Favorites and Mood Board Features
The user I have designed for enjoys browsing and saving content or inspiration on Pinterest, so I designed a section in the bottom navigation bar to allow users to easily curate different mood boards for later viewing. This also gives users the ability to better organize their inspiration into ‘folders‘ and view their ‘favorites’. To decrease taps, I went with a ‘tab’ design for users to simply swipe between the ‘Favorites’ and ‘Mood Board’ pages.
Solution 3: Offering easy-to-access delivery options
Maynooth products are intended to be available for home delivery, therefore, I implemented easy access to quickly update or change delivery addresses or methods. To ensure that a product is set to ship to the correct address, I’ve given users the option to update or change their address in the cart screen as well as the order confirmation screen.
I also aimed to make the order and delivery process as straightforward as possible, notifying when an order is expected to arrive.
Additional Screens
When a customer first opens the Maynooth app, they will be greeted with a brief splash screen and is then given the options to either Sign Up or Log In.
Design System & UI Elements
Using blue as the main accent color paired with red felt like a good fit for Maynooth. Blue evokes feelings of security while the cherry red that I chose brings feelings of energy and creativity when used sparingly. I chose these colors to liven up the furniture browsing experience and energize users to get inspired and feel safe and secure while using the application.
Lastly, as for iconography, each product category icon has a corresponding label to help users understand what they are shopping for. My intention was to make all icons simple and easy for the user to understand.
Takeaways
As an avid Pinterest user and online shopper, it was a great experience designing for e-commerce. Although this was a class project, it certainly taught me how to think outside the box while designing and keeping the user in mind at all times. It also exposed me to the importance of having an efficient and straightforward user experience because, without it, a business can’t reach its full potential or maintain customer loyalty.
What would I do differently?
Spend more time sketching out ideas. I sketched often during the ideation phase, but I feel that if I spent more time throwing ideas onto my notebook, I could benefit from seeing things from multiple perspectives and give myself more time to consider which designs work better than others. I realized the importance of throwing all of my ideas on paper, no matter how ‘silly’ they may seem at first.
Be unafraid of failure. I admit that I am a bit of a perfectionist. Pretty designs are nice but the process isn’t always going to be pretty based on my past experiences. Failure and having to try again is part of the learning process, especially when it comes to UX/UI design, and I think it’s something to enjoy, too. Gotta experience and enjoy the ride before reaching its destination, right?