PROJECT Turingo, build a new platform and design system
ROLE User Research · UX · UI · Prototyping & Testing (I'm half the UX team at Turingo)
TOOLS Figma · Hotjar · Notion · Optimal Workshop · Colorbrindly · Funkify · Stark
DURATION  2020 · 2021 (10 months)
Small and mid-sized enterprises are an important factor in the global economy. They create 60% of employment, adapt to the globalization changes, and contribute significantly to GDP growth worldwide. The need for digital transformation has been vital for these enterprises long before the COVID-19 crisis, and the pandemic made it even more urgent. Turingo has been helping entrepreneurs and small businesses since 2018 to start their digital transformation through collaboration and continuous learning. In 1 year, we had a rise of 10x users in our platform from +46 countries and +610 cities. 
PROBLEM
Turingo started as an online learning platform based on video-on-demand streaming. Interaction and collaboration have always been the center of our community. But we were missing them in our platform because it was happening outside our site, in Telegram.​​​​​​​
GOAL
We decided to pivot our existing paradigm and business model, creating a new platform to integrate communities as our core. We want to continue providing the tools and skills entrepreneurs need to succeed in the digital world. Incorporating the community and collaboration aspect of it all into the same platform.
WHAT'S THE STORY BEHIND OUR COMMUNITY CHAT?
All this started after Turingo's Pitch day in 2019. The assistants wanted to keep interacting, so we created a Whatsapp group. When we reached the top of users, we migrated to Telegram, and now we are +600 members. With a group chat so big, it's hard for the members to follow up on all the conversations. Content gets lost, and they feel overwhelmed, but they don't want to miss the opportunity to collaborate with other entrepreneurs.
*Looking for other options, we tried Discourse, but our users had poor interaction on it. Mighty Networks was a good candidate, but it didn't support the Spanish language.
1 BIG GOAL, 4 STAGES
I led the design process end-to-end along, working alongside another designer. As a team, we discussed the business goals, and we set the objectives and the MVP definition. We divided this project into 4 main phases with respective releases. ​​​​​​​​​​​​​Due to the extensive scope of this project and since it is currently in production, for this case study, I will be focusing on Phase 1.​​​​​​​
WHY A NEW DESIGN SYSTEM?
We didn't have any design documentation in our previous platform. We tried to reutilize elements in every new requirement, but we improvised and created new ones, too, taking more time. We are growing in the company. We need to have a common language to work as a design team and with other multidisciplinary groups. We choose 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.​​​​​​​
WHY ANT DESIGN?
It is an open-source design system with resources and tools for designers and developers to build a robust system. Support many languages, and we can customize to the tiniest detail and focus on creating a human-centered design. Our goal is to have this tool and customize it according to the company's needs.
WHAT DO WE KNOW ABOUT OUR USERS?​​​​​​
Small businesses owners and freelancers are willing to collaborate. They've participated as speakers in our forums, mentors in our courses, or contributors to our blog. They appreciate what they've learned, the connections they've made, and the support they've received in this solo entrepreneur journey. Partners are companies aligned with our vision who sponsor our courses, forums, and stories. With our content, they train and empower their own communities.
Since I started at Turingo, I created and led the Research team. And some of the research methods we have done to know more about our users are: online surveys, interviews with the community, usability tests, and analyzed our users' behavior through Hotjar, among others. We also interact with our users via Chat on Telegram, email, and social media. The entire team participated in our results presentations, including the CEO and Founder.
WHAT CAN WE FIND IN THE MARKET?
We analyzed the market, and we got inspiration from 2 different worlds. The first is educational platforms related to the content we create and how we deliver it to our users. These sites can have free content, required one-time payment per course, or monthly o yearly subscriptions. Users can write reviews, get certificates, watch videos in many languages and choose from a wide variety of courses, among other features. Some of them are Platzi, Masterclass, Linkedin Learning, Crehana, Domestika, Coursera, etc. 

The second one is community platforms. Where people interact with each other daily, building digital communities. They all have different features focused on the company's purpose. They can send messages to one or more people, create groups, have a personal timeline, and follow other people. Some of them are Facebook, Linkedin, Mighty Networks, Discord, Discourse, etc. Still, they follow almost the same patterns in information architecture, mental models, and interaction.
HOW WAS OUR PROCESS?​​​​​​​
ARCHITECTURE INFORMATION
I did card sorting with my team, and we searched how other platforms organize their information. We decided to divide the site content into 2 categories. Our products/services on the sidebar and the user account settings on the navigation bar. The idea is to create an effortless understanding when searching for specific info and not breaking our user mental models. We explored the layout and we decided on 3 columns for the desktop view, varying between 2 or 3 columns depending on the screen, leaving the center column for the main content.
USER FLOW
After many product meetings with the stakeholders and the MVP definition in mind, I started with the user flow. I did it for mobile and desktop for each feature we had in mind, including those coming in the future. After analyzing each flow, we decided on the ones accepted for the first release. Wireframe flows helped us be aware of missing screens or components, guide us as a team, and know how it will look for our users and if it will be easy to navigate.
WIREFRAMES
I started the paper prototype as a rough idea of the new platform. I designed having in mind the upcoming features, preparing the platform for the interaction. We audited the components of the new design system, and we created our own, exploring and customizing it for light and dark mode. Each feature has its own section making it easy to find navigate and find the content. 
RESPONSIVE DESIGN
We were designing for desktop and mobile view. We had to decide the breakpoints and the design of each screen, adapting their respective components. Working with structured blocks of content helped us rearrange our different screen sizes following an organized pattern.
TESTING THE APP
We did a usability test a few days before the public launch. We tested it with 6 users of our platform: entrepreneurs and freelancers, our Founder, and CEO. We recorded the sessions, and our research team documented the tests, delivering the results to our Development, Content, and Design teams. We also did 3 Quality Assurance (QA) at Turingo, where we fixed the bugs within a few days. We will keep doing usability tests to check if our users understand, like, and use our platform.
*We did the usability test and the first QA for the desktop version in light mode. The next QAs were done for mobile and desktop versions, light and dark mode.​​​​​​
HARD TO FIND THE "CONTACT US" SECTION
All the users were confused and couldn't find the "Contact us" section. They explained they usually look in the footer or the sidebar for it. And the name "Help" is more when they have technical issues, and they wouldn't think of finding the "Contact us" it inside "My Account" options.
What did we do?, We changed the section name to "Frequently questions," and we put it on the sidebar. Inside, they can find a list of helpful information to clarify some questions. We also add a specific section to contact us if they don't see what they need. In the sidebar, next to the social media icons, we added an email icon where they can access directly to this section.
THE NEED FOR A HOME SECTION
When testing the app, users looked for a "Home" section. They want to know about our news or any new content. This need was repeated many times and way before our platform redesign.
What did we do? Unlike the external landing page, and with a different focus, we created a "Home" section for our registered users where they can find our news and available content.
GETTING LOST AND QUESTIONING ITEMS 
Users got lost and didn't know which lesson they were watching. Also, some people weren't certain of the certificate's purpose or what they can do with it. 
What did we do? We added the lesson's number next to the title, the status "watching now" and a breadcrumb to show users how they got to that screen. And we added an explanation of what they can do with the certificates.
MENU COLLAPSE
Users didn't find the utility to maintain the full sidebar on some screens. They asked for the option to minimize the sidebar and have more space for the info they wanted to see. 
What did we do? We give them the option to collapse the menu when they want it.
FINAL DESIGNS​​​​​​​
CATALOGUE 
After registering, users could see a catalog with all the content we had only on one screen. The old design didn't allow integrating the community into the platform. Also, it won't work when we have a vast catalog of courses, forums, stories, and more. 
We created a section for each feature to create unlimited content for the users, with a tab to save the subscribed videos automatically. We design considering the coming features in the future.
CONTACT US
We created a "Frequently questions" section, with a list of common questions our team often receives. This helps decrease the user's frustration and time trying to figure out something and optimize our Turingo teams' time when answering users' emails. We also bring a screen with a form where they can contact us.
WATCHING TURINGO'S CONTENT
With almost the same information, we changed the structure and made it look more organized and clean. In our new platform, we want to give a better experience when consuming our content. The new design opens the opportunity to have future reviews in our courses, forums, and stories.
MY PROFILE SECTION 
We are building the foundations to allow users to interact with each other. And the profile section is essential. Users will see others people's profiles; they could send messages to people and do networking. Now, users can only see their profile, customize it, and see the certificates in the same place. Also, they can select the area they specialized in, opening the opportunity to a new directory for networking.
CHALLENGE AND CONSIDERATIONS
• Working with a new Design platform. It was our first time as a team creating the foundations for a hybrid platform end-to-end. Communication and collaboration are key.
Ant design system integration. The documentation for designers was in Chinese. This took us more time to study, understand its logic, and apply it to our new process and designs.
We have a debt with accessibility. Although the design team was conscious of accessibility, we didn't focus on it. We tested some screens with Stark, Colorblindly, and Funkify plugins. Some of our videos have transcripts and translations, and our Content team is aware of inclusive writing, but still, we have a lot to do.
OUTCOMES
• We release this project in the last week of July 2021. We can't add any detailed metrics yet.
• The only metric we have is the
satisfaction of our users from a survey in progress on our site. In 4 days, we have 142 responses, where 98 of them have the maximum rate for the new design. Some of the comments are "Innovative," "Modern," "Easy access," "Very interesting," "clean, organized and easy to find the courses" "I can understand better the info."
WHAT'S NEXT​​​​​​​
• After launching, we need to research and know if people can navigate easily. If they have issues, acknowledge what they are and understand how and why they navigate our site.
• We have to keep iterating the existing design and work on the following releases as a team.
Back to Top