Project 1: E-market Trading
Overview
My role
My role
My role
Use Design Thinking Methodology to create a product catalog for clients.
E-market Trading is the catalog of one of the biggest supermarket chains in Puerto Rico: “Econo.” The project would undergo usability testing to create an efficient, user-centric product. Reiterations will be undergone through agile sprints with stakeholder reviews.
UX Design, Product Design, Agile Project Management
What is the task?
-
The site's main objective is to facilitate the export sales process by creating an efficient digital catalog.
-
Reinforce the identity of Econo and eMarket Trading.
-
Clients prefer to organize information by brand.
-
The number of categorized products could grow in the future.
-
Discuss changes between reiterations.
Who is it for?
Store owners or suppliers in Puerto Rico. They search for products to restock their inventory in large sizes.
When do they use it?
The user will order the products when their store needs a resupply.
Where
do they use it?
Users can access the catalog through a computer and a list of previously ordered items.
DEFINE
Research
To gather the necessary information for the system, seven user interviews were conducted on current eMarket Trading clients. They yielded the following observations:
-
Two participants ordered from a written piece of paper with printed product serial numbers.
-
Five out of seven participants noted an unsatisfactory experience ordering products.
-
All participants mentioned difficulty identifying products from their pictures on the Excel product document.
Competition
How do the competitors solve the problem?
-
Adding a side tab
-
Organizing products into categories and subcategories
-
Side tab hidden unless selected
-
Navigation by brand, category or search
How do competitors complicate the problem?
-
Too many subcategories
-
Unnecessary pages in the sidebar
EMPATHIZE
User Personas
Persona creation aids in aligning the project to the user. With the information gathered in user interviews, two different personas were created.
Alfonso, 42
Santurce, Puerto Rico
Alfonso is the owner and manager of a small shop in Santurce, Puerto Rico. He usually chooses his products from the E-market trading paper catalog, then calls to make the order. Once in a while Alfonso writes down the wrong order number and does not get the product he actually wanted.
Pain points: He must write down all the product numbers codes and double check he has the correct ones. He must also correctly read-out the numbers on the phone.
Verónica, 37
San Juan, Puerto Rico
Verónica is tasked with ordering the ingredients needed for a small restaurant and store. Due to changes in demand, the quantities of products vary month to month and the menu is changed seasonally.
Pain points:
Verónica has trouble distinguishing one product to the next since there’s only one small picture in the paper catalogue, or none at all. Another pain point is that she must document how many products she orders each month. Since she must assess whether to get more or less, she must find the code, find the product and write down how many she is getting each month.
EMPATHIZE
Essential features
A meeting was held with designers to discuss possible design features that would solve common pain points. For a successful product, users should be able to:
Find specific products easily
Easily navigate to a specific page
Add desired items to a list
Easily navigate to a specific page
Display item number for each product
View previous orders and add them again to list
Design Decisions
Features that solve these problems:
Add a category menu
Simple header with minimal pages displayed
Profile with list of past orders
User Flows
IDEATE
The navigation was designed to be simple and straightforward. The user should not have to search long for products.
Logo and Color Scheme
Based on the parent company and logo, brand fonts and colors were decided for the design.
We began the design process by completing a design studio for each of the pages. For each iteration, we conducted usability tests and refined as needed throughout the next two weeks.
IDEATE
Navigation
Low fidelity design
Mid-Fidelity Prototype
Creating a prototype aids in solidifying initial ideas and discovering improvements.
Profile page to manage past orders
A side bar is added to show brands and categories at any page.
A search bar is added to browse for specific products.
Pages about the brand and business, do not clutter the main navigation.
Navigation options in the home page.
These extra pages can be found in the HOME page and the footer.
PROTOTYPE
TEST
Managing Data
The project handles more than 3,000 products; therefore, a plan was constructed to easily and correctly import data and images into a platform. It also had to allow changes and the addition of new products in the future.
In order to upload more than 3,000 items at once, the developers and I revised a code which would upload the product information and search for its corresponding picture. Each product was sorted into brand, category, product number and size.
High Fidelity
Once having a finalized prototype, it was examined by stakeholder and tested.
Ten participants examined the prototype through usability tests. In each test, participants were tasked with three user flows.
-
Adding products to list/cart
-
Editing product amounts
-
Ordering list of items
Each interaction was timed and compared to a design "happy path", which refers to the desired steps we want the user to take to complete a task.
Usability Test Results
-
100% of participants stated the prototype was easy to use
-
Only two out of ten participants encountered problems during a task.
-
Participants had problems finding the personal list button.
Using Agile methodology, the project was divided into sprints. Interactions in design were conducted on the prototype then the final version was created.
Final tests revealed high-fidelity prototype increased efficiency by 15% compared to its initial prototype.
Achievements and Lessons Learnt
The E-market trading catalog was reviewed and tested. It was found that most users browsed with the catalog tab and within the catalog page; however, it was stated that the variety of search options helped each find their way to the product they needed.
E-market Trading asked for several changes, for example, the use of a sliding banner, where they could add different pictures for any occasion.
The organization of data worked successfully and further changes to products were simple to make.
My team and I consider this a successful project and can now work with more extensive catalogs.