ROLE Product Strategy · Research · ideation · UX · UI (I'm half the UX team)
TEAM 3 Engineers · 2 Designers · 1 Content creator · Founder · CEO
METHODOLOGY Hybrid, Scrum+Kanban (full-time remote team)
TOOLS Figma · Hotjar · Optimal Workshop · Stark · Funkify
TIMELINE Q1 · Q2 2021
BACKGROUND
Small and mid-sized enterprises are an important factor in the global economy. The need for digital transformation is vital and the pandemic made it more urgent. Since 2018, Turingo has been helping entrepreneurs to start their digital transformation through online courses. I was part of an ambitious project to redesign the existing platform that will allow the integration of communities, giving entrepreneurs a chance to network, learn, and grow.
Small and mid-sized enterprises are an important factor in the global economy. The need for digital transformation is vital and the pandemic made it more urgent. Since 2018, Turingo has been helping entrepreneurs to start their digital transformation through online courses. I was part of an ambitious project to redesign the existing platform that will allow the integration of communities, giving entrepreneurs a chance to network, learn, and grow.
THE CHALLENGE
MISSING THE COMMUNITY ON OUR WEBSITE
MISSING THE COMMUNITY ON OUR WEBSITE
Turingo started as an online learning platform, but users showed the need to collaborate and interact. To help them network, we built an organic community outside our website. However, that affected the engagement and retention of the site because people were interacting outside of it. A few were part of the community, going 90% of the registered users out of it, losing the opportunity to build connections and develop new business opportunities for the users and the company.
GOAL
TIME TO PIVOT & REDESIGN
Pivot the existing paradigm and business model, integrating communities as our core, by redesigning the website to build the foundations for new interaction and collaboration features. The goal is to continue providing tools and skills through online courses and offer a community for entrepreneurs to learn, share, grow, and succeed, all on the same platform.
GOAL SETTING PROCESS
TIME TO PIVOT & REDESIGN
Pivot the existing paradigm and business model, integrating communities as our core, by redesigning the website to build the foundations for new interaction and collaboration features. The goal is to continue providing tools and skills through online courses and offer a community for entrepreneurs to learn, share, grow, and succeed, all on the same platform.
GOAL SETTING PROCESS
PROCESS
1 BIG GOAL, 3 PHASES
I led the design process end-to-end, working closely with another designer, 3 engineers, 1 content creator, 1 marketing strategist, the founder, and the CEO. We discussed the old and new business goals and user needs and prioritized the MVP definition, dividing this big project to integrate the community into 3 main phases. Due to the extensive scope, I will focus on the initial stage, Turingo’s website redesign.
1 BIG GOAL, 3 PHASES
I led the design process end-to-end, working closely with another designer, 3 engineers, 1 content creator, 1 marketing strategist, the founder, and the CEO. We discussed the old and new business goals and user needs and prioritized the MVP definition, dividing this big project to integrate the community into 3 main phases. Due to the extensive scope, I will focus on the initial stage, Turingo’s website redesign.
USER RESEARCH
WHAT DO WE KNOW ABOUT OUR USERS?
I helped to set up and lead the Research team in the company. I did 8 interview sessions and 2 surveys of 150 and 170 participants to know our users and their experiences with the platform and the community. Some of the outcomes are:
1 • Turingo has 3 main groups of users. Small business owners who want to start or grow their businesses. Freelancers who act as mentors, advisers, and contractors. And Investors and large companies who look to sponsor and create content for their clients.
2 • Users are willing to collaborate and have participated as speakers and mentors. They agree to be part of a new platform, have everything in one place and participate in an entrepreneur network.
3 • Small business owners feel alone in the entrepreneur journey and would like to network with people to share experiences and knowledge. In the community outside Turingo's platform, users create an ecosystem where they solve their needs through collaboration and interaction.
WHAT DO WE KNOW ABOUT OUR USERS?
I helped to set up and lead the Research team in the company. I did 8 interview sessions and 2 surveys of 150 and 170 participants to know our users and their experiences with the platform and the community. Some of the outcomes are:
1 • Turingo has 3 main groups of users. Small business owners who want to start or grow their businesses. Freelancers who act as mentors, advisers, and contractors. And Investors and large companies who look to sponsor and create content for their clients.
2 • Users are willing to collaborate and have participated as speakers and mentors. They agree to be part of a new platform, have everything in one place and participate in an entrepreneur network.
3 • Small business owners feel alone in the entrepreneur journey and would like to network with people to share experiences and knowledge. In the community outside Turingo's platform, users create an ecosystem where they solve their needs through collaboration and interaction.
WHERE TO START?
A NEW ARCHITECTURAL INFORMATION
We had to build new architecture not only from a design perspective but also from an engineering structure, rewriting from video-on-demand streaming to a post-based platform to allow users to create content once we implemented the new features.
A NEW ARCHITECTURAL INFORMATION
We had to build new architecture not only from a design perspective but also from an engineering structure, rewriting from video-on-demand streaming to a post-based platform to allow users to create content once we implemented the new features.
I did secondary research to find how other platforms organize their information. The 2 findings that inspired the new architecture design were educational websites related to online courses and how they display the info, and community platforms, related to how they design interactions to keep in mind for future integrations.
I did card sorting sessions to see how people categorized the website content, and I designed a sitemap and user flows for each section with its respective iteration. We implemented a left-right layout with a fixed left navigation and a dynamic right work area customizing it depending on the page and screen size to display the information better.
DOCUMENTATION FOR EVERYONE
BUILDING A DESIGN SYSTEM
The company was growing, and the need to have a design system as a common language to work as designers and with other multidisciplinary teams was demanding. We didn't have any consistent design documentation on our previous platform. That's why we decided to adopt a new design system instead of building one because we can optimize time in the short and long term. We can create better experiences faster and have more room and time for innovation.
BUILDING A DESIGN SYSTEM
The company was growing, and the need to have a design system as a common language to work as designers and with other multidisciplinary teams was demanding. We didn't have any consistent design documentation on our previous platform. That's why we decided to adopt a new design system instead of building one because we can optimize time in the short and long term. We can create better experiences faster and have more room and time for innovation.
We choose Ant Design because it is an open-source design system with resources and tools for designers and developers. It supports many languages and allows us to build a robust and customized UI system and code-based component library, reducing time and production costs and helping us to focus on creating a human-centered design.
FEATURE PARITY
ORGANIZING OUR EXISTING CONTENT
I transferred all our information into the new design in a repeated flow for 3 main sections, where users see the catalog of videos, choose content, go to the specific page, and play it, plus the contact and profile section.
ORGANIZING OUR EXISTING CONTENT
I transferred all our information into the new design in a repeated flow for 3 main sections, where users see the catalog of videos, choose content, go to the specific page, and play it, plus the contact and profile section.
For that, I kept in mind 4 principles:
1 • Simple visual language to not overwhelm the users
2 • Structured for a consistent layout
3 • Organized to make the content easier to find
4 • Understandable to follow the user's mental models
1 • Simple visual language to not overwhelm the users
2 • Structured for a consistent layout
3 • Organized to make the content easier to find
4 • Understandable to follow the user's mental models
CATALOG
The old design was incompatible with the idea of having unlimited videos. Users had all the catalogs on different carrousels on the same screen, plus their progress, confusing and exhausting their user's experience.
With the new design, the navigation is on the sidebar, where each category has its section allowing unlimited videos in the central column. It includes a search bar that optimizes users' time by displaying the results as the user types and tabs to separate the content available from the videos the user subscribed to, keeping track of their progress.
The old design was incompatible with the idea of having unlimited videos. Users had all the catalogs on different carrousels on the same screen, plus their progress, confusing and exhausting their user's experience.
With the new design, the navigation is on the sidebar, where each category has its section allowing unlimited videos in the central column. It includes a search bar that optimizes users' time by displaying the results as the user types and tabs to separate the content available from the videos the user subscribed to, keeping track of their progress.
INFORMATION PAGE
When users went to specific content, they had the essential info about it. Still, every time we needed to add extra information, the page length increased, affecting our mobile users and having more possibility of product abandonment.
To help them scan and make faster decisions, I organized this page by first clustering the related info, reducing the screen length, and bringing the relevant information to the top. Also, I considered room for future implementations, like reviews or comments.
When users went to specific content, they had the essential info about it. Still, every time we needed to add extra information, the page length increased, affecting our mobile users and having more possibility of product abandonment.
To help them scan and make faster decisions, I organized this page by first clustering the related info, reducing the screen length, and bringing the relevant information to the top. Also, I considered room for future implementations, like reviews or comments.
VIDEO PLAYER
It had the essential info, but because we were adding more new information without structure, and as users said, “the page started to look a little disorganized, and it was confusing to see repeated info in different places”.
With the new design, the video player maintains the information page structure with 2 columns, positioning the player and playlist first, helping users find the primary information quickly. I also added an extra block of info for additional resources to download.
It had the essential info, but because we were adding more new information without structure, and as users said, “the page started to look a little disorganized, and it was confusing to see repeated info in different places”.
With the new design, the video player maintains the information page structure with 2 columns, positioning the player and playlist first, helping users find the primary information quickly. I also added an extra block of info for additional resources to download.
TL;DR
After having content improvement, I transferred and balanced the design using blocks of text, grouping elements, and building patterns to help users scan, improving the site's engagement. The new platform is built in light and dark modes to meet the users' needs and preferences and in a responsive design with 7 different screen sizes.
After having content improvement, I transferred and balanced the design using blocks of text, grouping elements, and building patterns to help users scan, improving the site's engagement. The new platform is built in light and dark modes to meet the users' needs and preferences and in a responsive design with 7 different screen sizes.
Results:
• ⬆︎ 50% increase in certificate completion
• ⬆︎ 1.5 increase in session duration
• 90/100 CSAT (Customer Satisfaction Score) about our website redesign
• ⬆︎ 50% increase in certificate completion
• ⬆︎ 1.5 increase in session duration
• 90/100 CSAT (Customer Satisfaction Score) about our website redesign
USER INFORMATION
PROFILE & CERTIFICATES
Both sections were in different places, making them hard for users to find. The navigation wasn't friendly, reflected in low task accomplishment and poor engagement.
With the new design, people can complete their profiles and see their certificates in the same place, and we focused on requiring less personal information and more business related. We are building the foundations to allow users to interact with each other, and this section will be essential to start networking.
PROFILE & CERTIFICATES
Both sections were in different places, making them hard for users to find. The navigation wasn't friendly, reflected in low task accomplishment and poor engagement.
With the new design, people can complete their profiles and see their certificates in the same place, and we focused on requiring less personal information and more business related. We are building the foundations to allow users to interact with each other, and this section will be essential to start networking.
Results:
• ⬆︎ 20% more access to certificates and profile sections
• Contact email, phone, job position, and profile picture were the most edited options.
• ⬆︎ 20% more access to certificates and profile sections
• Contact email, phone, job position, and profile picture were the most edited options.
HOW TO COMMUNICATE
FREQUENTLY ASKED QUESTIONS
We had a basic contact form in the previous design without extra information. The design interface was poor, but it worked. People sent us many emails asking about the platform.
To make finding information more accessible and friction-free for the users, I created a Frequently Asked Questions (FAQ) section with a list of common questions our team receives. If they still can't find the info, they can send an email through an improved contact form, having all on the same page.
Results:
• ⬇︎ 50% reduction of emails received
• ⬇︎ Decreased our team time answering emails
• ⬆︎ We informed users about our platform better
FREQUENTLY ASKED QUESTIONS
We had a basic contact form in the previous design without extra information. The design interface was poor, but it worked. People sent us many emails asking about the platform.
To make finding information more accessible and friction-free for the users, I created a Frequently Asked Questions (FAQ) section with a list of common questions our team receives. If they still can't find the info, they can send an email through an improved contact form, having all on the same page.
Results:
• ⬇︎ 50% reduction of emails received
• ⬇︎ Decreased our team time answering emails
• ⬆︎ We informed users about our platform better
VALIDATION
QA & USABILITY TESTING
• We did 4 internal quality assurance events as a team to discover and fix issues before the release.
• 6 usability tests with registered users and team members, and all participants couldn't t complete the tasks in 3 of the 15 tasks, where we iterated to a new version to solve the problems detected.
QA & USABILITY TESTING
• We did 4 internal quality assurance events as a team to discover and fix issues before the release.
• 6 usability tests with registered users and team members, and all participants couldn't t complete the tasks in 3 of the 15 tasks, where we iterated to a new version to solve the problems detected.
LAST THOUGHTS
RETROSPECTIVE
We were a small cross-functional team building the new platform according to the new business model, living in constant ambiguity and time constraints, and being the first time building a hybrid platform as a team. Communication and collaboration are essential.
RETROSPECTIVE
We were a small cross-functional team building the new platform according to the new business model, living in constant ambiguity and time constraints, and being the first time building a hybrid platform as a team. Communication and collaboration are essential.
