Asel Art Supply
Context
For a class in Spring 2021 (January-May), I worked with a group to redesign an e-commerce website.
The Challenge
My team focused on the website for the Asel Art Supply store, an art store located in Dallas, TX, with different branches in the local area.
The Goal
To create a wireframe of the redesign
Scope
End-to-end
Tools
Google Slides,
Figma
Role
UX Designer
Team
Team of five members, with feedback from instructor
Responsibilities
I acted as leader throughout the project, ensuring the team did their tasks while also doing my own individual ones.
My role as leader included:
-
Ensuring communication across the team
-
Scheduling meetings each week
-
Taking notes at each meeting
-
Guiding teammates through the design and iterative process
-
Editing and finalizing group posts
-
Creating group documents through Google Docs so everyone could contribute ideas
Key Steps
The main steps in order to make the Asel Art website more user friendly included:
-
Conducting Nielsen's heuristics
-
Creating user scenarios and representative tasks
-
Performing the thinking aloud method for user tests
-
Contributing to 2 iterative designs
Nielsen's Heuristics
In order to determine the level of the site's usability of the site, I conducted a brief heuristics evaluation using Nielsen's heuristics.
Main Findings
#1: Visibility of system status
There is not a lot of feedback in the check out area
#3: User control and freedom
It is hard to return to the original home page. There is no link and the logo does not lead back to it, either. A user would have to use either the back button multiple times or type in the URL.
#5: Error prevention
There is not a lot of error prevention in the checkout process. For instance, removing an item from the cart is only symbolized by an “X,” and there is no confirmation if someone wants to remove item. A user is not able to see their cart and total cost before submitting credit card information.
#6: Recognition rather than recall
Similar to the problems regarding error prevention, if a user has an item they don’t want, it is unclear if they'll get to see a review order cart before finally purchasing, which means users would have to recall their purchases before buying.
#8: Aesthetic and minimalist design
The aesthetic makes it really hard to see small text and pictures. Additionally, the accordion search results is hard to use, and users can’t look at more than one category.
#10: Help and documentation
There is very little help in the e-commerce portion of the site. A user would probably have to go back to the very first home page to get contact information for assistance.
Conclusion
The checkout and search results pages did not align with many of the heuristics, such as the visibility of system status, error prevention, and recognition rather than recall.
These areas of the site became the main focus of the redesign.
User Scenarios and Representative Tasks
Focusing on the usability, I guided my team in thinking of users who would use this site and creating personas from them.
We determined that the main users of the site would be art students and art instructors.
From there, we created scenarios and tasks to place the users in the best context they might use the site.
Persona 1: Art Instructor
Sarah Goodman is a local art instructor in Dallas, Texas, and she teaches community art classes throughout the week. She teaches all ages, from kindergarten students to senior citizens. She is 32 years old and comfortable with using a computer.
Persona 2: College Art Student
Michael Garcia is 18 years old and a new student at Texas Tech University in the School of Art. He is taking painting and drawing classes online, and he is budgeting carefully to pay for college. He has an intermediate level with using computers and an expert level with using tablets.
Art Instructor Scenario
Due to COVID, Sarah is limiting the size of her classes and making ready-to-go art kits. In order to keep her inventory supplied, she uses Asel Art Supply on the recommendation of a friend. She is interested in any art kits for children as well as general art supplies, such as paints, brushes, and canvases. She is familiar with e-commerce sites and has used them before, but she also wants to talk to a person from the store in case she has questions.
Art College Student Scenario
Because Michael is taking courses online and needs supplies, he is searching for clearance items that he can order from the website. His professor recommends him to use the Asel Art Supply website, which Michael has never used before. He is searching for basic supplies that don’t look too expensive, such as canvases, acrylic paints, and brushes. He also wants to look at supplementary materials that might help him with classes.
Art Instructor Tasks
-
Task 1: Search for Asel Art Supply contact number for more help.
-
The art instructor might need more assistance with the way the website works.
-
-
Task 2: Search for children’s crafts
-
Asel Art supplies offers a children’s crafts category that might be helpful for her students.
-
-
Task 3: Search for shipping and return policies
-
Because she is ordering many supplies, Sarah wants to know what Asel’s shipping and return policies are in case she buys items she does not think will be used.
-
Art College Student Tasks
-
Task 1: Search for art supplies that are on the syllabus
-
This will prompt a user to search for specific items on the e-commerce portion of the site and use the interface.
-
-
Task 2: Search for coupons
-
As a college student, Michael needs to save money and hopes to find discounts. This will illustrate how easily the website offers this service to its customers.
-
-
Task 3: Search for supplementary books to aid learning
-
This will prompt a user to browse a specific category.
-
Representative User Test: Thinking Aloud Method
Using the user scenarios and tasks, I performed a user test using the thinking aloud method because it gave me immediate feedback on the usability of the site's features.
At the time, the ideal persona - art instructor - was not available, so I asked a friend to pretend to be an instructor and perform the given tasks as such.
Overall, I refined the tasks to be a little more specific when it came to searching on the e-commerce portion of the site, because that part of the site is very vast and can be overwhelming if a person is just browsing.
The test showed that three main aspects of the site needed to be changed:
-
Change the search results features from the accordion style
-
Change the categories
-
Change the shopping cart icon
Group User Tests Results
Each group member also performed a user test with the thinking aloud method. Some of our collective observations included:
1) The need to change the shopping cart icon. Users either skimmed over it, mistook it for something else, or couldn't find it because it was not the typical shopping cart icon, and it was not in the upper right hand corner like most icons are. Instead, users clicked on the green button that said “shopping cart.”
2) Difficulty looking at the search results. The search results were laid out in an accordion format by category, and users could only open one category at a time. Users accidently closed and opened categories they did not want to view.
3) The difficulty of sorting items by price. There is no option to sort by price or item name, so users found browsing functions harder to do.
4) Too small text and images. The overall layout of the site is asymmetrical, with too much negative space, leaving the content hard to see.
5) Issues with entering in discount coupon code. Users would have to go back and find the code because it is not in check out process.
6) Issues checking out. Users had to type in the quantity they wanted first before adding the item to the shopping cart.
The Asel Art Supply Website Wireframes
The class focused on iterative design, so the team went through two main iterations of the redesign.
Iteration 1
I worked with my team to create the final designs. The aspects that we improved in the first iteration included:
-
Making the general layout of the site more consistent with other e-commerce sites, such as Amazon
-
The search function, i.e. the search bar, is bigger and easier to see
-
The browse functions are more consistent with other websites (i.e. filters and sort by options)
-
The shopping cart icon is recognizable
-
Adding a link to direct users back to the online shopping home screen
-
Streamlining the checkout process
-
Bigger images
Iteration 1: The Home Page
The team decided to give the Asel Art website a more standard design, and we chose to emulate parts of Amazon’s look, one of the top e-commerce websites.
Changes we made included:
-
The shopping cart icon is now in the upper right hand corner and looks like a standard shopping cart with a number to indicate the number of items in the cart.
-
A wish list button is added in case users do not want to check out from the cart to allow for more versatility in their purchasing experience
-
The search box has been moved to the top. This is more standard for websites, and in this redesign, it is bigger and more noticeable.
-
The menu of the items is placed underneath the search box at the top instead of the left hand side.
-
Replaced the accordion list of search results with more standard search results format with large pictures and clearly labelled buttons
-
A “Relevance” box is added so users can sort the products with more ease.
-
Two home buttons are added. One is linked to the Asel logo, which will take a user back to the original Asel Art website homepage. The button labeled “Return to Online Shopping Home” will return the user to the home page on the e-commerce portion of the site.
-
The content spreads across the page, so pictures and text are more visible.
The first iteration of the home page
Iteration 1: The Product Page
The product page is given a more standard design with features including:
-
Bigger images. Users no longer have to go to another window to view a larger image.
-
Name, price, and description of the product.
-
Button to add to the cart without having to check out immediately.
-
Button to proceed to check out to make buying a single product easier.
-
An option to add a discount coupon to the item’s price.
The first iteration of the product page
Iteration 1: The Check Out Page
The redesign of the checkout page focuses on streamlining the purchasing process and making everything as clear as possible.
Features on this wireframe include:
-
The ability to review one's order before purchasing
-
An option to view shipping and return policies
-
A “Remove from Cart" button is added.
-
The option to select quantity is here rather than on the original product page, where a user had to enter in the quantity before adding the item to the cart.
-
The price in relation to the quantity and price of the item individually is explicitly shown.
The redesigned checkout page
The Asel Art Supply Website Wireframes
Iteration 2
The aspects that we improved included in the second iteration focused on:
-
Balancing and better supporting the search and browse functions
-
Condensing the 15 categories into 7
-
Adding in submenus
-
Adding breadcrumbs
-
Including clearer filters and "sort by" options
Iteration 2: The Home Page
The second iteration of the home page includes more features to support browsing and searching functions.
-
Condensed 15 original categories into 7 menu tabs
-
Submenus more explicitly shown
-
Breadcrumbs added to help visitors to the site know where they were and find their way back.
-
"Sort By: Relevance” and “Filters” boxes added with drop down options for more specific browsing.
-
Items are contained in their own boxes for easier grouping
-
Magnifying glass icon added to search box
Second iteration of the home page
Iteration 2: The Product Page
All of these browsing functions will remain consistent throughout the website. The second iteration of the product page demonstrates the permanence of these features to the site so users can access the browsing at any given time.
Second iteration of the product page
High Fidelity Mockup
While not part of the original assignment, I wanted to make high fidelity mockups in order to flesh out the design of the site and see what a user might look at.
High fidelity mockup of home page
High fidelity mockup of product page
Conclusion
The redesign of this website requires more than two iterative designs. If I had more time, I would continue user tests and creating more wireframes that would support user functions and goals.
Next Steps
If I had time, I would go through a few more iterative designs and work towards more high fidelity mockups to enhance the site's design.