YE Marketplace Sell

Project Summary

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.

 

With a registration conversation rate of only ~45%, it was obvious that the registration process was not as streamlined or user friendly as it could be. Young Enterprise was also fielding a number of complaints from student companies about the software itself post-registration and wanted to ensure that users could easily update their profiles and view/process orders from both desktop and mobile.

I redesigned the registration form, the company set up and the product uploading process to ensure young people using the software would have an easy experience with their digital shop and more time to focus on other business priorities.

What I did:

  1. Stakeholder interview

  2. Wrote consent forms and recruitment screeners

  3. Recruited users

  4. Wrote usability test scripts

  5. Usability tests x3

  6. Comparative benchmarking

  7. Affinity diagram

  8. Usability test results report

  9. Flow diagrams

  10. Sketched and iterated

  11. Medium fidelity prototyping

Year

Role

2019

User researcher, interface designer

Research Phase

Usability Testing

Although I had originally planned to test with users under the age of 18, getting access to young people through their schools proved difficult. The majority of students didn't have 45 minutes to spare during the school day and the schools that gave me permission to conduct testing tending to be too far for me to get to on multiple occasions. Because of this, I had to adapt my recruitment screener to allow for 18 year olds and try to recruit users through different channels.

In the end, 3 participants aged 17 to 18 were invited to complete tasks on the existing YE Marketplace interface using both a mobile and computer browser.

 

They were asked to complete three different tasks: register a student company, edit their student company page and add a product.

Prioritising

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 most critical usability issues that arose were related to the site navigation, the menu icons and the registration tutorial.

I highlighted these issues, along with more minor usability problems, in a report to be shared with the stakeholder and developer teams.

Ideate & Design

The Vision

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.

In the 2018/2019 academic year, only about 45% of student companies that began the registration process completed it. A small percentage of student companies nationally actively used and sold products on the marketplace.

 

Young Enterprise and I wanted to re-design the website to make it more inviting and easy to use for student companies to increase uptake and registration conversion. More teams selling products on YE Marketplace results in more website traffic and purchases, providing students with income and experiential learning of e-commerce.​ It also creates more public awareness about Young Enterprise's charitable mission and aims.

In order to encourage student uptake of YE Marketplace, I wanted to design a more streamlined registration process and make adding products and company information easier to do.

Registration

1. User Flow

Since the majority of teams that started the registration process were not completing it, re-designing registration was a major priority. Usability testing showed that the issue wasn't so much in the user flow (3 step registration), so I designed a flow quite similar to that of the original but more feedback and more tolerance for mistakes.

2. Tutorial

A major problem at usability testing made obvious, however, was the inbuilt tutorial that activated automatically. All participants were confused by and stuck within the tutorial at various stages throughout the registration process.

Before: Tutorial obstructs screen.

Because only the next and back buttons were bolded ('done' was greyed out despite being active), participants didn't know they could close the tutorial and instead kept moving backwards and forwards through it.

All users said they didn't think the tutorial was necessary.

"I understand they are a guide but it’s really confusing. I’d prefer not to have it on the screen so you can just fill it [the form] out.”

- User during testing

3. Simplifying the registration process

Forms should be intuitive enough for people (even young people) to complete without additional instruction. In my re-design, I simplified the registration process and got rid of a substantial amount of text to ensure that a tutorial wouldn't be necessary.

In the original design, reading information about YE Marketplace was a formal step of registration and was heavy on text. In my usability tests, all of the participants skim read or skipped this step entirely.

Before: Step 1 loaded with text.

In my re-design, I condensed the text down and added bullet points to make it easier to scan through quickly. No longer a 'step' of the registration process, this page instead introduces the registration process after the user clicks 'Sell on Marketplace'.

After: Easier to scan.

To aid readability, I made the progress bar larger and more differentiated and made the input boxes more visible.

Before: Interface hard to scan.

After: Labelled input boxes.

Previously, students would have to send their YE Manager a completed product approval form. The manager would give approval and then file it in folder on ShareDrive for the folks at YE Marketplace to crosscheck before allowing the company shop to go live.

To streamline this process and remove several steps, I created the ability for students themselves to directly upload the form (signed by their YE Manager) so it could be found alongside their registration. This saves an enormous amount of time and a lot of back-and-forth emails with the YE Manager when YE Marketplace is unable to find the form on the shared drive. It also saves the student company from having to open up the file to find the date and YE Manager name during registration.

Adding Company Information

1. User Flow

While it was clear what students needed to do to be able to add their company to YE Marketplace (and during testing young people even commented how much they like the progress bar), there wasn't much guidance as to how each of the items could be completed. Users would just need to click around and hope to find the right place.

"Is it a banner? It would be helpful to have it first or have a description of what it’s for."

- User during testing

I wanted to make the process of adding company information more streamlined and straightforward. I designed a user flow that would guide users through the process in four easy steps.

2. Navigation

The lack of guidance in how to add company information was exacerbated by confusing navigation icons in the usability tests. Two of the three participants struggled to find the page in which they could add their company information and/or products. One user accidentally logged himself out while looking.

I added labels to the icons to help users navigate. I also removed the spanner icon and replaced it with a bell to alert teams to new orders coming through.

Because Young Enterprise companies tended to refer to their digital retail space as a 'shop' rather than a 'store', I changed the text to reflect the more commonly used language.

3. Your shop - initial information

In order to go live, students have to complete their company information page, add a product, connect to Stripe and complete GDPR lessons. Rather than have them guess at where on the site these items can be actioned, I decided to design an initial company information input process to help guide users. Upon completion of all four stages, their online shop will be activated.

During usability tests, all of the users were uncertain of where to input their information. The logo and image fields weren't labelled, the description area had placeholder text that read "These are student company profiles" and the About Us and Links section were on the bottom of the page, below the banner image/logo/description, products and team news.

User scrolling through company information page during testing.

I wanted to ensure that fields were better labelled to ensure that information could be efficiently input and/or changed.

 

In my design, school name and location are linked to the student company number and input automatically to save users time and reduce potential for error. The fields are all titled with descriptive hint text where useful for clarity and are listed sequentially so users no longer need to scroll past products or news to add additional company information.

After: Sequential inputs in single page.

Editing and Adding Products

1. User Flow

In the original design, company page edits and products were all added from the 'Your Store' page. I wanted to keep these features organised in a similar way whilst making it easier for users to update and add information.

2. Design

A number of usability issues arose during user testing, including adding product specifications, inputting price and selecting pick up or delivery. These are the issues I aimed to tackle in my re-design.​

During testing, all users originally failed to list multiple specification categories, instead creating one column with all four specifications in: small, large, red and blue. One user queried why one was bolded and then realised that a second category could be added with the bolded box listed as the title.

User inputting specifications during testing.

As the majority of users failed this task, I knew the redesign would have to allow users to add product specifications in a much more straightforward way.

I began by changing the name of 'Specifications' to 'Variations', which was more in line with terminology used by similar marketplace websites.

I then created a design in which the title of the variation was labelled and clearly distinguished from the options themselves.

After: Variation titles are clearly distinguished.

A user pointed out that in the original design it would be impossible to keep track of quantities of product variations: it asked only for the overall quantity of all products regardless of their variations. Likewise, there could be no variation in pricing.

Before: Stock measured overall, not by variations.

In my redesign, users can specify both stock quantity and price for each individual variant of a product. I considered that in cases where there are many variants this list could get long, but decided that since most products uploaded to the site have 0 - 2 variations altogether that this would be unlikely to create a problem for most users.

After: Variations considered in stock and price.

Finally, users were confused by the delivery and self pick-up tick boxes. They couldn’t tell whether or not the boxes were selected.

Before: Which is selected?

"Is black in white or white in black selected? I don’t know which is enabled."

- User during testing

One user also commented that 'PRODUCTS.SELFPICKUPENABLED' sounded like accidental code.

I fixed this problem by creating simple check boxes which are initially empty. The user must tick at least one of the boxes in order to add or save the product.

Prototypes

Registration prototype:

Company information prototype:

Editing and adding products prototype:

Contact Me
Follow Me
  • Black Twitter Icon
  • Black LinkedIn Icon

Like

what you see?

© Cassandra Cardiff 2019