Educational Product Marketplace
Search, discover and adopt next-generation course content.
Overview
A branded search and discovery platform allowing educators and students to easily find, add and access new digital content used in their college and higher education courses.
A one-stop-shop for educational resources.
Ongoing development of an Enterprise Software Solution that enhances capabilities to meet user needs.
including search bar intelligence, dynamic Product Page templates, robust Filtering, and related Product and Ad placement opportunity.
Scalable onboarding for next-generation products, including Courseware, eTexts, and Learning Apps.
The platform's scalability will allow future additions of other product lines as they become available.
Roles and Responsibilities
My Role
Senior UX Lead, Interaction & Visual Design, User Testing, Wireframing, Prototyping.
The Agile Team
Product Manager, Lead UX Designer, Junior Designers, User Research Specialists, UX Visual Design lead, Overseas Dev Manager and Development Team.
The Tools
Sketch, Adobe Creative Suite (Diagrams, Charts, Wireframes, Prototypes).
InVision, Zeplin (Clickthroughs, Testing).
The Timeline
Project start: May 2015
Releases: January 2016 - December 2018
Subsequent releases: Ongoing, Iterative
Scope & Constraints
Resources for research were limited to a single analyst for the larger UX team supporting 5 other projects.
Only one other UX designer was offered intermittently as bandwidth allowed.
The new Visual Design System was continuously being updated with new patterns.
The Problem
Prioritizing the long and short-term iterative release goals based on the research data that defined user needs and expectations collected in the previous testing.
Design and iteratively release an Enterprise Software Solution with enhanced capabilities including search bar intelligence, dynamic Product Page templates, robust Filtering, and related Product and Ad placement opportunity.
Scalable onboarding for next-generation products, including Courseware, eTexts, and Learning Apps.
The platform's scalability will allow future additions of other product lines as they become available.
The Plan and the Brand
Design, test, and iteratively release new search and discover features and capabilities using tested and approved UX patterns.
Search Engine Results Pages (SERPs) - Provide type-ahead and auto-suggest, navigation by product type, and relational recommendations.
Product Detail Pages (PDPs) - Agnostic, data-driven templates to display product types including Courseware, eTexts, and Learning Apps.
Recommendations and Ad Placements - Sidebar, carousels, and inline page elements to create awareness and drive revenue.
User-specific Page Displays - Provide specific product information based on user-profiles including distinct student pricing.
Filtering - Adding settings for users to refine search results.
Recap of Previous Research
Interaction design was found simple, user-friendly, and familiar.
Search and Navigation preferences were split. Both need to be represented in the UXUI.
Product Detail Pages (PDPs) will focus on Product Image, Title, ISBN, and Student cost as primary page elements.
PDPs will be tailored to the user’s specific university profiles and student pricing contracts.
Release Schedule
Search Engine Results Pages (SERPs) - May 2016 - January 2017
Product Detail Pages (PDPs) - January 2017- December 2017
Recommendations and Ad Placements - December 2017 - October 2018
Filtering - December 2018- July 2019
Iterative Design Releases
Individual case studies on the evolution and timeline of the enterprise software solution
1. Search Engine Results Pages (SERPs)
May 2016 - January 2017
Problem
Improving the educator search and discovery experience by adding product-specific navigation, type-ahead search capabilities, and new product lines.
Ideation on new features
Working with the Visual Design (VisD) Team, I updated the current UI to reflect the current design library patterns.
I created wireframes to illustrate new user interactions, including type-ahead search functionality and product-type navigation filters.
Partnering with engineering, the platform would be re-developed using React components.
Prototyping
I created high-fidelity prototypes using Sketch.
Using Invision, I created click-throughs used for presentations and testing of the workflow sequences.
I presented the final design recommendations to the Product Owner, Stakeholders, and the Development team.
Forgoing testing, for the moment
I recommended starting coding sprints based on comparative analysis showing the updated features as familiar and expected user behaviors.
The interaction and visual design had already been successfully user-tested.
Designs were approved for release to Development.
Going to press
I created and shared the new design specs and redlines with the dev managers to be put into production.
I attended bi-weekly sprint demos to ensure pixel-perfect rendering of the new designs and communicated feedback accordingly.
Release - The updated design was successfully released in April 2017.
2. Product Detail Pages (PDPs)
January 2017- December 2017
Problem
Creating reusable PDP templates for next-gen Courseware, eTexts, and Learning Apps that meet the page features' broader product goals and measurable objectives.
Research
I led meetings with the respective Product and Marketing teams to prioritize features as it applies to the benefits and value provided to the user.
The goals
Understand the Product Vision.
Review the requirements of the individual PDP needs based on their previous research.
Meet the broader product goals and measurable objectives of the page features.
Determine highest value features.
Establishing why the features ultimately matter to the customer.
Identify issues and bottlenecks.
Ideation
User stories were written for timely deliverables of design proposals.
I created wireframe mockups to illustrate the individual page layouts and to provide accurate design recommendations.
The individual pages were presented to the product teams for review.
Final adjustments were made to wireframes to meet the goals of product requirements.
Prototyping
Using Sketch, I created high-fidelity renderings of each PDP type.
I collaborated with product team production designers to assemble graphical assets needed to display thumbnails, logos, and product UI screenshots.
Testing and results
Collaborating with Research Specialists and Product teams, user tests were scripted to meet the goal of validating the prototypes.
5 instructors were interviewed and presented the 3 Product Detail Pages.
Observations included:
Impression testing (5-second test)
Tone and style
Readability
Organization and content comprehension
Net Promoter Score
Results
100% of the subjects thought the pages were pleasing to the eye and well structured for readability and comprehension.
Content organization responses were mixed on the hierarchical stacking of page content.
100% of subjects stated the page layouts and content met their expectations for matching the individual product types.
The Net Promoter Score (NPS) averaged 9.5. Instructors would recommend the products to their peers.
Challenges
The display of Learning Objectives, a top user expectation, was not currently supported in the product database.
Constructing a new database that connected to the product records was not in scope.
All next-generation products currently in development and only a few were released. Final product UI screenshots were not available for use in the templates.
Sollutioning
The pages would render based on the available assets.
If any assets were not present in the product record database, the page would still be compiled, hiding the page elements from the user’s view.
Releases
Courseware PDP - September 2017
eText PDP - February 2018.
Learning Apps PDP (1) - April 2018
3. Recommendations and Ad Placements
December 2017 - October 2018
Problem
Developing back-end capabilities to drive the data-driven display of related products and marketing blocks to create awareness and drive revenue.
Ideation
I created whiteboards and wireframes to illustrate the possible sidebar, carousel, and inline page elements taking advantage of available page real estate.
Collaborating with engineering, a recommendation engine was built to display other products relational to the search queries and selected products.
I scheduled meetings with the Marketing teams to introduce all possible real estate blocks to be used for ad placements.
Prototyping
Using Sketch, I created high-fidelity renderings of the SERPs and PDPs to illustrate the page layouts with the recommended products and ads in place.
A variety of page layouts were mocked to illustrate where recommended products and ads could be dynamically displayed.
Testing
Acceptance criteria for the back-end feeds were tested to ensure an accurate display of relational data was properly passed into the components.
The pages containing product recommendations and marketing ads were shown to 7 instructors to measure their general reactions to the page elements.
Results
The data transfers worked as designed.
All of the instructors found the product recommendations useful in determining other content options for their courses.
80% of the subjects would click on the ads if they pertained to their specific content needs or in some way sparked their interest.
Challenges
Product owners were concerned sharing the space with other products would affect their bottom line.
Marketing was unresponsive in taking advantage of Ad spaces.
Releases
The completed code supporting data-driven product recommendations and ad spaces was released to production in October 2018.
4. Filtering
December 2018- July 2019
Problem
Adding settings for users to refine search results by selecting Disciplines, Product types, and Status.
Defining User Needs
Partnering with a User Research Specialist, an unmoderated poll was created to prioritize user filtering needs from high to low.
The poll was completed by 18 users. Results showed Product Type and Discipline to be highest ranked as filters.
5 instructors were interviewed using card sorting exercises.
The results determined the order of importance to be Discipline, Product Type, Version, and Availability.
The institution filtering component would be moved from the main UI to the filtering component to meet business needs.
Ideation
I created wireframes to illustrate the filtering mechanism.
A/B versions were explored using the filtering stack determined by the user testing.
A fixed, left side display of the filters
A slide-out drawer, using trigger element the opening and closing of the filter drawer.
Trigger design treatments were explored using iconography, a “Filters“ label, and a mixture of both.
A mix of accordion-style dropdowns and checkboxes were designed to accommodate filtering types
Broad filtering such as Product Types used checkboxes, long lists of Disciplines used dropdowns determined by page real estate.
Prototyping
I created high-fidelity static versions of the wireframes.
A/B screens were mocked into an InVision clickthrough to simulate live interactions with the filtering mechanism to be used in user testing.
Alternate versions of the trigger mechanism were mocked to determine users had a clear understanding of the interactions.
Testing
Partnering with a Research Specialist, a usability test was scripted from the interactions simulated in the InVision clickthroughs.
5 instructors were scheduled for moderated task-based testing.
The original interview questions were repeated from the original test on the wireframes.
The filter icon was used as the indicator for accessing the filters to prove my hypothesis that a literal label was not needed.
Subjects were challenged to condense search results down to an area of study and a product type.
Participants were then asked to locate a specific product title from their condensed search results.
Results
The original interview question matched the results of the previous test.
4 out of 5 subjects easily used the three-bar filter icon to open the filter drawer.
3 out of 5 participants were able to easily use the filters to condense their search results.
2 out of 5 were unfamiliar with the product lines, but after explanation understood the filtering choices.
There were mixed results on fixed vs slide-out filtering, but all agreed that the ability to keep it opened or closed according to their own preferences made the most sense.
An important observation
Interestingly, the most common response to the original task was “I would just type it in”.
Release
Search FIltering release was scheduled for December 2020.