3C Product Marketplace
Re-design of 3C Institute’s one-stop shop for evidence-based interventions and programs.
Project overview
3C Institute’s existing product marketplace was outdated and hosted on a website separate from the main site. The goal of this project was to use 3C’s new resource center technology, WordPress, and WooCommerce, to incorporate the marketplace on the main 3C institute website and create a cohesive and user-friendly experience for customers. Several existing products would also be rebuilt using 3C’s updated DeLP (dynamic e-learning platform) technology.
My role
I had several objectives for this project:
- Develop mockups for the new marketplace hosted on the 3C website using the resource center technology as the base
- Develop mockups and build the product pages using WordPress and WooCommerce
- Gather existing graphic assets for the products
- Create new graphics where existing assets wouldn’t work
- Create new powerpoint templates, resource centers, and course players for the updated products
Audience
The users of the 3C product marketplace could be customers seeking individual licenses for products, such as educators and parents, and organizations seeking to bulk purchase products, such as school districts. With the drastic changes to the existing purchasing process, we wanted to ensure users both returning and new were provided with relevant and actionable information and a clear path to exploring and purchasing products.
April 2021 - September 2022
Role
UX/UI
Interaction Design
WordPress
E-commerce
Tools
Photoshop
Illustrator
Adobe XD
WordPress
WooCommerce
Dr. Melissa DeRosier – Chief Executive Officer
Dr. Deb Childress – Chief of Research and Learning Content
Roy Goulet – Chief Technology Officer
Sheiniz Rich – Lead Web Applications Developer
Chris Hehman – Chief Software Architect
Ricky Groner – Web Developer
Josh Smith – Content/Editorial
Kim Pifer – Content/Editorial
Suzanne Messina – Content/Editorial
Lauren Harris – Content/Editorial
Kelly Fish – Creative Director
Allison Williams – Web Applications Developer
David Schreffler – QA & Support Technician
Robert Alvord – QA & Support Technician
Thea Cox – Research & Technology Specialist
3C Marketplace
Developing wireframes and understanding the user flow for the 3C Marketplace was the first primary focus of this project.
Initial wireframes
Starting out the team envisioned the marketplace to be housed on a website separate from the main 3C website. This website would be built using a combination of a WordPress landing page, Woocommerce product description pages, and laravel for the main products page, login/register, and cart.
Finding a home
As development of the wireframes continue and further discussion occurred, the team decided to shift focus from having the marketplace housed on a separate website. Instead we brought it to the main 3cisd site which was a location that felt more understandable from a customer perspective.
Developing mockups
I continued to flesh out my rough wireframes to higher fidelity mockups for the team to review. Some of these include features discussed during meetings, such as the “My Account” view that would later be dropped.
We also began to explore how the marketplace would appear to those who have purchased items already with information on when their subscription would expire as well as a more direct access to their specific product dashboard.
This discussion led to asking how would a dashboard appear once a user has entered their purchased product. On a navigational level it proved a challenge. Adding another top navigation for the product (along with the 3cisd site and ecommerce navigation) cluttered the screen and led to concern on how someone would be expected to navigate the site without becoming frustrated. A need for an alert at the top of the page was also noted by the team to inform the user on the status of their training, yet also contributed to the information overload at the top of the page.
Putting a pin in the navigation issue, I refocused back on the product library continuing to refine the purchased products area or what was now called “My Interventions”.
Shifting back to the product dashboard, we worked on how a user would access training for the intervention they purchased, along with how to access their completion certificate. Considering how important the training is to properly administering the interventions, it was necessary to put it in front view as all time until the training was completed.
Rounding back to the navigation issue, we decided to drop the 3cisd main site navigation once a user entered a product. They would be left with the product navigation and their account navigation which helped in reducing confusion and clutter. In the account navigation we added a back to 3C products button which would allow the user to easily return to the main page.
Graphic assets
I gathering logos and other product graphics to populate the products page. In order to fit the product cards on the laravel pages, I cropped them to the appropriate size. Some logos also needed a visual clarification to help show the customer what the product did (or did not) include.
Product pages
Product pages would be accessible on the marketplace through two different paths; a learn more page that would provide further information about the product and a purchase page utilizing woocommerce.
Mockups
As I was developing wireframes for the marketplace, I included where the products pages would fit into the user flow. The layout for the “Learn More” page came together during the early stage of the wireframe development when the marketplace was envisioned as a standalone website.
Working with WooCommerce
I began doing tests in WordPress so I understood how to build the product pages. During these exercises I found that there was going to be a need for another product pages whose sole purpose was adding the product to the users cart. This wouldn’t be possible with the “Learn More” pages because they were being built as WordPress pages, not products. The reasoning for building the “Learn More” pages here was that they allowed me more flexibility in building out the UI than the product pages did. The “Learn More” pages would link to the product pages similarly to how they did at the top level marketplace with a “Purchase” button that would link to the WooCommerce page.
Working with the WooCommerce product pages proved to be a bit troublesome in the beginning due to the limited amount of customization available out of the box. However, working with one of my team members, we were able to discover a way to use Elementor to build out these pages with allowed for the customization that we were hoping for while maintaining the purpose of this page.
Building in WordPress
Once we working out the process of how to create the pages, I began building out the “Learn More” and WooCommerce product pages in WordPress. I also ensured that, on the backend, the “Add to Cart” buttons were linked to the correct product.
Updated products
The development of the new marketplace allowed the team the opportunity to take the products housed on the old marketplace site and reconstruct them in 3C’s latest version of its e-learning platform, DeLP.
Powerpoint templates
The video content in each product was developing using powerpoint slides and accompanying audio. I provided an updated powerpoint template that the course builders used to then reconstruct the video content with additional audio and visual changes. I also ensuring the colors and typography used in the powerpoints would be 508 compliant.
Resource centers
Each product had it’s own resource center, a centralized area where useful documents, links, videos, and other useful content can be found. These resource centers are customizable so I provided the course builders with branded UI and icons for each product to allow for a more cohesive visual experience.
Course players
Course players are the backdrop to where the video and interactive content for each product are presented. These are customizable so I provided a mockup with hex codes and graphic assets for each product.
Certificates
After completing the training, the users are presented with certificates which can be applied to their Continuing Education (CE) credits. These certificates were branded for each course and populated with the relevant information through the system.
