Organizing a colorful universe: redesigning the Tris Website
Industry: Stationery
Tools: Figma, Illustrator, Photoshop, Clarity
Overview
“Tris” is a school supply brand that offers a big variety of products to make the school, office and study routine more fun, colorful and creative.
On this project I was responsible for the web and mobile prototypes on Figma. It started with a draft of the main page, created by a former colleague, which was refined by me and served as the main visual concept for the rest of the pages.
Main goal
Bringing the printed catalogue “spirit” to the website: exploring the products’ colors, shapes and patterns throughout the pages, reinforcing the brand’s identity on its online presence.
As I left the company before implementing the website on WordPress, some changes have been made to the original project.
Research
In order to understand user behavior, I analyzed around 1 year of data (October/2022 – October/2023) recorded through Microsoft Clarity. There was a total of 94.518 sessions on this period, a great database to understand the experience of consumers while navigating the website.
With different type of data, like absolute numbers, heatmaps, sessions recordings and scroll depth of the main pages, I was able to define key points of change to improve the user experience on whichever device they use.
94.518
website sessions (all pages)
53,84%
average scroll depth
1 min
average active time
Some stats about the website displayed on Clarity
Scroll depth
The analysis of average scroll depth of each page implicated that users scrolled less on pages that had a bigger wall of text, with the majority of them leaving before reaching the products grid
Sessions on sub-brand pages
An interesting number of sub-brand pages were among those with the most sessions, indicating that this brand architecture was well established with consumers and deserved more attention
Mobile vs. desktop sessions
Even if some of the pages had balanced mobile and desktop views, mobile devices accounted for 80% of the total sessions on the website, showing the importance of responsiveness
Main changes
Product categories: same quantity, more diversity
The 8 product categories were reshaped to include all 30+ types of school supplies, including new ones and those who didn’t fit the previous organization.
- Erasing & Sharpening;
- Playing;
- Coloring;
- Cutting & Gluing;
- Decorating & Organizing;
- Marking;
- Writing;
- Stapling & Measuring.
Even if data showed that the brand architecture seemed well-established, reorganizing the categories was a step toward consumers that are not used to the sub-brands, thus enhancing the discoverability of Tris products.
Sub-brand pages: more attention to details
All Tris sub-brands, like Vibes, Mega and Holic, got new pages: with a distinct visual concept for each one, these pages show the products under each sub-brand, briefly showing their most important attributes.
They also have different visual elements, similar to their packaging, setting the vibe for each one of these small universes.
Product pages: organization and scannability
The product pages were revamped for a better experience on mobile devices, bringing more details and organizing the elements to display more information above the fold.
The product gallery (1) and the product name (2) switched places, giving more attention to the visual presentation. There was also an addition of icons and short-sentence attributes (3), improving the understanding of the benefits and cases of use of each product.