While the primary goal of the new e-commerce website was to physically bring customers into the store, they also wanted to broaden their customer reach beyond SF by allowing products to be purchased online for delivery or for in store pickup.
The site needed to reinforce their core business values: traditional, fun, and creative. The site also needed to distinguish this from other e-commerce retailers by emphasizing their highly curated inventory of handpicked specialty items. The primary business goals for this website included:
Having clear ways of locating specific products
Ability to support a single page for each product
Having an efficient means of purchasing one or more products
Steering customers towards popular products.
Prototyping
Homepage
I kept the homepage clean and simple to avoid overwhelming users on first page they see. To allow users to easily locate and find products I included a global and secondary navigation, as well as a search bar. The new arrivals and product recommendation sections were key to showcasing the curated and frequently updated inventory as well giving users helpful suggestions on what to buy. I wanted to emphasize the importance of the customer brand relationship by highlighting the rich history and specialty of thus app. I incorporated this by featuring an “Our story” section on the homepage that also links to the about page with further information. I wanted to emphasize the importance of the customer brand relationship by highlighting the rich history and specialty of this app. I incorporated this by featuring an “Our story” section on the homepage that also links to the about page with further information. In the footer, I placed important links where users could obtain additional information they might need. I also included a social feed for users to gain inspiration from other customers and to raise awareness for in store events.
Product Category Page
Once a user selects the shop button or a certain category they are brought to a page that lists all the items under that specific category. One of my user personas wanted an age appropriate toy for her grandson, so including a filter and sort by function for topics such as age, price and brand was important to include. I also included a breadcrumb trail to make it easier for the user to navigate and identify where there are within the website.
Single Product Page
On the single product page, I wanted to make sure to provide detailed product descriptions so that users can ensure the product fits their needs. Below a user could find helpful product recommendations based on the current product they’ve selected. I also gave priority to the product reviews section since this allows for user input, establishes trust and also allows users to make more informed buying decisions. To make the checkout process as efficient as possible, I designed a drop down cart summary that would appear every time a user clicked add to cart. Users could then conveniently click on the checkout now button to begin the checkout process.
Cart Summary Page
Once the checkout now button or cart icon was selected, a user would be led to the cart summary page pictured below. This was the first step in the checkout process where users could review and make changes to their cart as appropriate. I also included the option to select between in store pick and home delivery as a way to entice customers to visit the Jeffrey’s Toy store and lower shipping costs.
Checkout Page
One of the primary pain points of the three user personas was having an efficient checkout process so I made sure to make this experience as seamless as possible. As a returning customer, users have the option to log in to their account and have their saved shipping and payment information auto filled in for them. I decided to keep the checkout process all on one page to make it easier for users to edit their information at any point in process. The progress bar at the top also indicates to users how many steps the checkout process will take, what point they are at now, and how close they are to completing their order.
Additional Screens
I also created some additional screens that included an Order Confirmation Page to indicate to users that the checkout process has successfully been completed. They could also find important details here about their order for reference.
I created a Contact Page where users could inquire about products they were unable to find on the site as well as learn about store hours, the location and phone number to call.
It was important that I included an About Page to emphasize what distinguishes this app from other e-commerce websites such as Amazon. I also utilized this page as an opportunity to discuss in the unique 60 year long history of this local business to reinforce their brand values of tradition, fun and creativity.
Usability Testing
Once I completed my wireframes, I created a prototype of my website to begin usability testing. This would allow me to evaluate how users would engage with the proposed website solution and validate whether it was addressing the primary user needs. It was important to test with mid-fidelity, grayscale wireframes to gather honest, critical feedback from potential customers and to solidify the functionality of the website before addressing the visual design.
I conducted a usability test with 4 participants and asked them to complete three different scenarios to put themselves into the shoes of my user personas. These three scenarios included:
1. You need to buy a toy for your daughter. Show me how you would find a product and successfully purchase it.
2. Show me how you would find out what events are happening next month.
3. Show me how you would inquire about a toy that you couldn’t find when searching for it on the website.
These were my key findings from the tests:
Overall users were able to easily navigate the website and locate products and information.
Participants found promo code section to be distracting in checkout flow.
A few participants wanted a way to inquire about products if they didn’t want to call.
Some felt there could be a greater push to bring people into the store.
Conclusion : -
The successful companies of the future will be those that take e-commerce seriously, dedicating sufficient resources to its development. E-commerce is not an IT issue but a whole business undertaking. Companies that use it as a reason for completely re-designing their business processes are likely to reap the greatest benefits.
Hire Figma Experts for any kind of projects – urgent bug fixes, minor enhancement, full time and part time projects, If you need any type project hep, Our expert will help you start designing immediately.
T H A N K Y O U !!