PrestaShop Academy Course Catalog – Website redesign
UX writing, content design, copy
Project
PrestaShop provides inclusive e-commerce solutions that allow merchants all over the world to create and manage their own online stores. Their Academy offers a catalog of courses, which can help merchants of all technical levels improve their skills. However, their catalog was overly confusing and difficult for users to navigate.
For this project, they were looking to:
- Optimize the course catalog search structure and information architecture to help users find what they’re looking for
- Detangle the confusing navigation, which required users to jump from page to page
- Promote elements of their offerings to encourage merchants to sign up for more courses
- Rewrite copy to be clear, concise and consistent
Team
Academy website: 1 project manager and 7 UX writers
Course catalog: 2 UX writers
Duration
8 weeks, Oct 10-Dec 12, 2023
My role & collaborations
I acted as the team leader for the course catalog. I also set up separate meetings about the final presentation and structured a GoogleSlides template for all three teams. This gave cohesiveness to our work and made it easy to present to the client.
UX writer interns were split up into three teams. We worked intensively on our own pages but also came together every week to share ideas and explorations. This was a great chance to not only get feedback but to improve on work by using suggestions implemented by other teams.
Things to keep in mind
The majority of the audience was non-native English speakers from Europe and beyond. The copy had to be clear, concise and easily understandable.
The content design for the catalog had to fit within the rest of the structure, with close attention to the user flow.
Brand voice: PrestaShop’s voice is professional but approachable, positive, and empowering. We aimed to include this sense of positivity throughout the site.
Research
The research was split between UX writers across the team. I performed a direct and indirect competitor analyses to understand how other companies handled the organization of lots of searchable content. This included:
- What competitors called certain elements of their searches, particularly direct competitors
- How they handled the organization of large amounts of searchable content.
We also did an analysis of PrestaShop Academy’s current catalog, which had been created as needed by developers who were not UX designers. Our analysis included:
- the breadth of content
- the most pertinent information
- what was clear and what needed work
- what the overall process of finding a course was like
Examples
General Navigation
BEFORE
GENERAL NAVIGATION PAIN POINTS
Courses lived on 3 separate pages (Create, Grow, Improve) in what looked like 3 separate catalogs. Users would have to not only understand what those terms meant, but which one they were looking for.
Navigation between catalogs was overly complicated. Switching required the user to click <Home> in the breadcrumbs and then scroll down to choose another section.
From the site audit, I noticed there were two products in the footer not mentioned elsewhere: Subscriptions and Live Trainings. The PrestaShop project manager explained that subscriptions referred to paid courses and live trainings were special, one-time events.
They were having difficulty differentiating between paid and free offerings. According to some previous user research, there was great confusion about Academy offerings. Some users didn’t go to the Academy at all because they thought all courses were paid only.
OBJECTIVES
Consolidate the information to fit into one easy-to-navigate structure.
Communicate the difference between paid and free content.
AFTER
CATALOG START PAGE STRUCTURE
Banner:
We designed the banner to align with the look and feel of the rest of the PrestaShop branding.
The header was friendly and reassured users they were in the right place.
The subhead uses empowering and encouraging language to stay on-brand and lets the user know what they can find here.
The third header level (a structure often found elsewhere at PrestaShop) communicates the user can expect some classes to be free and some not. This quickly addresses one of the pain points for the user.
The search bar makes use of ghost copy to give the user a hint of how to use it.
Basic structure:
Some of our indirect competitor research (namely retail, which often has to organize large offerings) informed the decision to use a horizontal filter format. Progression from the intro is natural, providing a visual separation from the catalog content and guiding the user in an expected way.
Because the user’s preferred language is generally set on the homepage, the language filter has been preset with the option of changing, if desired.
In the original version, the language filter was set, but there were no visual cues and often there were discrepancies in the courses shown.
SOLVING THE SEPARATE PAGE ISSUE – version one
Because this catalog didn’t exist in a vacuum, I had to consider the entry point on the homepage. The original entry point used the terms, “Create, Grow and Improve” to guide the user into the corresponding section of the catalog. I tried to keep that structure, giving it clearly defined language to differentiate between the sections.
In this draft, all three pages are represented as tabs within the catalog start page. They would be better defined according to what the user wanted to accomplish and all subsequent information would be shown below.
AHA! MOMENT
This attempt at compromise wasn’t elegant. It also took up a lot of space and still seemed unclear. However, through the process of creation, I realized that we were looking at were steps in the learner’s journey. The project team and other stakeholders agreed. Fortunately, I crafted another version that worked better.
SOLVING THE SEPARATE PAGE ISSUE – version two
In this version, the 3 pages are consolidated into filterable levels: Basic, Intermediate and Advanced. Our direct competitor research confirmed these choices, however we liked “basic” better than “beginner” because it felt more encouraging.
The supporting text defines these terms in relation to where the learner may be in the process the learner may be.
If the user entered the catalog by choosing one of these levels on the homepage, the corresponding filter would also be preset, just like for the chosen language.
This was the team’s and the stakeholder’s preferred solution.
DIFFERENTIATING FREE VS. PAID COURSES
I added a course type filter to differentiate between free courses, subscription courses and live courses.
This reemphasizes that some courses are free and gives the user the opportunity to explore at the desired level.
I renamed the subscription service “Academy Plus,” to make it feel more like a special, exclusive benefit.
PrestaShop wasn’t sure exactly what they wanted to do with the live courses, so I gave them 2 options. “Events” would be more general and “Workshops” more specific and dependent on offerings. They could feature one or both, presented together or as two separate entries.
Filtering
BEFORE
FILTERING PAIN POINTS
The filters are not intuitive.
Some wording, such as “choose one or more value” lacks human quality.
The topics list is long and difficult to understand
Language use is inconsistent—sometimes in French, sometimes in English, regardless of which language the user chose as their preferred language.
Only one topic can be chosen at a time.
The placement of active filters makes it difficult to notice. If the user’s eye travels along an F shape then they are already past the spot where the active filters will show up by the time they’ve chosen a topic.
OBJECTIVE
Create a more intuitive filtering system that allows users to easily find what they are looking for.
AFTER
FILTERING: CHANGING THE TAXONOMY
I considered what the user would be interested in learning about at any specific point during their PrestaShop journey. Then I broke courses down into categories: Getting started, Product configuration and Shop management. Beneath each of these would be more specific subcategories. This allows the user to find what it is they want to do without having to read through a huge dropdown list of items.
The ultimate language would depend on a complete audit of the content and would have to be tested for usability. Here we used only the content from the “basic” (formerly “create”) level.
Course Cards
BEFORE
COURSE CARDS PAIN POINTS
The content is dense and hard to skim.
Titles are often too long.
The body is text-heavy.
The cards all look the same.
Some essential and potentially useful course info is missing.
It is not clear that some courses are paid and some are free.
There is no clear CTA.
There’s no way for the cards to be sorted.
OBJECTIVE
Design card templates with useful information to help the user find what they need, encourage them to look at the course descriptions and sign up.
AFTER
COURSE CARD TEMPLATE
I wanted to provide a course overview by displaying practical information such as duration, language, level and version.
It is clear what category and subcategory this class belongs to by the text at the top left.
To further emphasize the free courses, “FREE” is in all caps and highlighted. It is still small, so it only stands out among that level of information.
The bookmark is a common and expected way to save content for later.
The short description language is empowering and verb-led, emphasizing course benefit.
The user knows what to do next with a clear “Read more” CTA that leads them to a more detailed descriptions page.
COURSE CARD VARIATIONS
A: Topic categories would feature a matching icon, or there could be unique icons for each class, but this may be a lot of work for the graphics department.
B: Cards change color with hover to communicate clickability.
C: Cards for subscription courses have a visible difference from free courses. This could be presented in colors or outlines. A graphic designer would help to define this.
D: Badges indicate subscription and live-course offerings.
Results
The project was presented by all UX team members in December 2023. Feedback was positive and enthusiastic and most of the PrestaShop team agreed with our analysis. Some of the suggestions and specific language, such as “Academy Plus” to differentiate between the free and subscription versions will need to be explored further. Because we were encouraged to design as if there were no technical limits, the PrestaShop developers indicated that implementation would depend on what they have the capacity for.
Takeaways
As someone who loves organizing complexity into clear, easy-to-maneuver structures, this was a really fun project for me.
What I enjoyed most was taking mental snapshots of the user journey in order to understand what the user would need to know/see at what point.
Thanks to this project, I’ve become better at researching, asking the right questions, and collaborating. It also boosted my confidence and made me realize that I have great potential in this area. I took on the lead role for my team and contributed a lot of language to the other teams as well. Both of the other teams used my footer structure on their pages and implemented the vocabulary terms I created to create uniformity across our pages.