YE Marketplace Buy
YE Marketplace is the only digital platform with which people under the age of 18 can legally accept online payments from customers in the UK. Although the site allowed browsing and purchasing, it lacked the look and feel of a digital marketplace, making it confusing and frustrating to use for potential buyers and decreasing the value of the platform for school-aged retailers.
I created an e-commerce experience that would enable customers to browse and buy items in an easy and recognizable way.
What I did:
Wrote consent forms and recruitment screeners
Wrote usability test scripts
Usability tests x5
Usability test results report
Sketched and iterated
Medium fidelity prototyping
User researcher, interface designer
Five participants from various age and gender demographics were invited to complete tasks on the existing YE Marketplace interface using both a mobile and computer browser.
They were asked to complete two different tasks: compare two black travel mugs (mobile task) and purchase specific products from two different companies (computer task).
While users complimented the aesthetic simplicity of the site, many struggled to complete their tasks and the majority failed to do so on mobile.
Using an Affinity Diagram, I was able to determine the key usability issues that would be need to be the focus of my re-design to ensure that users could complete common flows on the site.
The main usability issues pertain to the search function, issues in feedback when inputting search criteria, the reloading of the product and company pages and difficulty finding the search bar.
I highlighted these issues, along with more minor usability problems, in a report to be shared with the stakeholder and developer teams.
Ideate & Design
YE Marketplace is a unique product that adds value to Young Enterprise's programmes by offering students the chance to trade digitally. The platform is the only e-commerce site in the UK on which minors can legally trade as it contains integrated safeguarding measures to protect the young people that use it.
I wanted to create an aesthetic and functional design that would do justice to the incredible potential the platform offers young people. In making the site more usable for buyers, I hope that student companies will see increased revenues that will add even more value to Young Enterprise's programmes for schools.
I started with the goal of creating a standard e-commerce user flow and marketplace look and feel. I wanted the site to look familiar - even to first time users. I approached the various design challenges that arose with this goal in mind.
1. Search bar
Users struggled to find the search bar when asked to find both products and companies. They tended to scroll past the search function on both the Products and Companies pages.
A user scrolling past the search function during usability testing.
One user during testing said she initially thought the search bar was a title for the categories and company listings below.
The search bar had to be made prominent and easy to find on all pages. I added it to the header so that it would be visible on all pages.
In adding a single search bar to the header, I effectively had to fuse the Product search and Company search together. I designed a search bar with the capacity to search both products and companies simultaneously, and that would differentiate between them to create clarity for the user.
In many cases, customers come to YE Marketplace with a particular company in mind. I added company logos to the search results to facilitate quicker recognition of a familiar company than from text alone.
To create a marketplace look and feel while eliminating the need to search by category whilst using the search bar, I added the categories to the navigation bar in the header.
2. Difficulty browsing products and companies
When searching by category rather than with a search term, users commented on the amount of scrolling they had to do in order to find something they were looking for. Many said they were disappointed that the companies were not listed in alphabetical order. They were also confused by the location categories: some are regions (eg. South Central) while others are Shires.
I approached these issues while contributing the marketplace look and feel Young Enterprise and I envisioned.
I created a design that offered substantially more transparency and information to the user by openly sharing the number of search results available across the site and within specific categories. I also added breadcrumbs to ensure the user would always be aware of where they were on the site.
I moved the category filters to side and added a 'School' one, as every company affiliated with the site is registered through their school and this would help to narrow down search results for users looking to support a specific retailer.
I added search functions within the School and Location categories to limit the amount of scrolling the user would have to do and ensured that all were organised alphabetically.
Rather than organising locations through a mix of counties and regions, I distilled all the regions down to their constituent counties for consistency.
I redesigned the company directory to provide more information to the user (now including school name) and likewise added the filter categories to the side bar.
The feedback of number of companies within the directory benefits both the user by providing information, and Young Enterprise by demonstrating social proof of their Marketplace product.
The companies here are organised in alphabetical order.
3. Lack of search feedback
Users could not tell if their search had worked. Many input their search term and pressed enter and waited for something to happen.
A user awaiting feedback during usability testing.
The reason users were unable to see the feedback integrated into the original design was that they had to scroll to get to the search bar, and sometimes didn't scroll far enough to be able to see the search results.
Moving the search bar to the top eliminates this problem, as search results will always be visible (unless the browser window is very, very narrow!).
4. Product specification/customization options difficult to notice
Users found it difficult to find which colours certain products were available in and often did not notice the specification boxes during the 'Add to Cart' process.
Three users commented on how there was no way to add to a personalised message to products being advertised as including customization.
I created a clear way to add specifications (eg. colour, size) and custom messages while adding the product to the cart.
Before: no way to customize.
After: easy to customize.
5. Student company information difficult to find
Users struggled to find products on the student company page and the majority failed to find the 'About Us' section highlighting information about the student company.
Users were confused about hyperlinks and social media icons. They struggled to find links to student company websites and misunderstood the meaning of the Twitter and Facebook icons, which they thought would bring them to the student company pages on these platforms rather than share the page content on their own timelines.
Before: 'About Us' not visible.
After: 'About Us' visible.
My design brings the 'About Us' section and the products further towards the top of the page to reduce the amount of scrolling required for the user.
I've added the social media websites to the lefthand side of the banner photo and included a linked website icon (the website in the previous design wasn't hyperlinked, so needed to be copied and pasted). All of the social media links go directly to the company's respective social media pages, which is much more in line with user mental models.
6. Shopping cart
Because of limitations with the software, products from multiple companies had to be checked out individually. The tabs in the cart created confusion, as users were not aware of how many items they were checking out at a time.
Users also wanted to know the shipping and postage costs before entering check out.
A user exploring their cart during usability testing.
While I couldn't change the fact that only one company could be checked out a time, I could change the design to make this fact more clear for the user.
I wanted all products to be visible rather than some hidden in tabs. Each item from separate companies has it's own closed box and check out button, while items within the same company are contained in the same box with a singular option to check out.
Delivery costs are shown as part of the total before check out, not after.
You can click through the prototype here: