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 · Slack · 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 was vital long before the COVID-19 crisis, and the pandemic made it even more urgent. Since 2018, Turingo has been helping entrepreneurs and small businesses 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 for the next era of Turingo, giving entrepreneurs a chance to network, learn, share and grow their businesses.
FINAL PRODUCT RELEASED IN 2021
THE CHALLENGE
MISSING THE COMMUNITY ON OUR WEBSITE
Turingo started as an online learning platform based on video-on-demand streaming. After watching the courses or assisting in the online events, users wanted to keep collaborating and interacting. We built an organic community outside our website to help them network and grow their businesses. However, that was affecting the engagement and retention of the site because it wasn't inside of it.

Users watched online courses and left the site afterward. Just a few were part of the community, leaving +33,000 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

We decided to pivot the existing paradigm and business model, integrating communities as our core, by first redesigning the website to build the foundations for new interaction and collaboration features. We wanted 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
1 •  Design a new information architecture

2 •  Create a Design System

3 •  Feature parity 
PROCESS
1 BIG GOAL, 4 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 4 main phases. Due to the extensive scope, I will focus on the initial stage, Turingo’s website redesign, for this case study.​​​​
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 who our users are 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.

•  Users are willing to collaborate and have participated as speakers, mentors, and contributors to the blog. 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 on Telegram App, users create an ecosystem where they solve their needs through collaboration and interaction. 
WHERE TO START?
A NEW ARCHITECTURE 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 for mobile and desktop views. I tested the final designs, and the major improvement was moving the Frequently Asked Questions to primary navigation and changing the name "Help" because users related it to technical issues, not for writing a message or getting info.
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 better the information. Each section has its own specific place.
DOCUMENTATION FOR EVERYONE
BUILDING A DESIGN SYSTEM

We didn't have any consistent design documentation on our previous website. 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 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 customize to the tiniest detail, building a robust and customized system, reducing production costs, and helping to focus on creating a human-centered design.
FEATURE PARITY
ORGANIZING OUR EXISTING CONTENT

I had to transfer all the information we had into the new design. The main sections are Courses, Online Talks, Stories with purpose, Contact us, and Profile. 
For that, I kept in mind 4 principles:
•  Simple visual language to not overwhelm the users
•  Structured for a consistent layout 
  Organized to make the content easier to find
•  Understandable to follow user's mental models​​​​​​​​​​​​​​
CATALOG
The old design was incompatible with the idea of having unlimited videos. Also, users could see all the categories and their catalogs on different carousels on just one screen, confusing and exhausting their experience.
The navigation is on the sidebar for the new catalog, and each category has its section allowing unlimited videos. It also 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 already subscribed to, keeping track of their progress.

COURSE LANDING PAGE

The second screen is the landing course page, which I organized by clustering the related info and reducing the screen length, even when I added more content. This screen aims to inform the user about the course, so I bring the relevant information to the top, helping users scan and make faster decisions. I also considered leaving room for future implementations.

VIDEO PLAYER
The video player maintains the landing course page structure, positioning the player and playlist first, helping users find the primary information quickly. The playlist shows the progress with different UI styles for "watching now," "complete," "incomplete," and "remaining" lessons. I also added an extra block of info for additional resources to download.
Other categories such as Courses, Online talks, and Stories with Purpose follow the same structure, varying the information in each category.
I transferred and balanced the information with responsive design and the content improvement we had. I used blocks of text, grouping elements, and building patterns to help users find what they are looking for. This improved the engagement and scanability of the website. We also included light and dark modes in the settings to meet the users' needs and preferences.
Results:
• ⬆︎ 50% increase in certificate completion
• 90% CSAT (Customer Satisfaction Score) about our website redesign
• User feedback: "clean, organized, and easy to find the courses," "friendly," "innovative," and "I can understand better the info."
USER INFORMATION
PROFILE & CERTIFICATES

Both sections were in different places inside settings, making them hard to find for the users. It wasn't friendly navigation, reflected in low task accomplishment and poor engagement.
We are building the foundations to allow users to interact with each other, and this section will be essential once the profile and certificates are public and clickable. As a first stage, with the new design, people can access their profile from the navigation bar, customize it, and see their certificates in the same place. Also, we changed the content of the profiles, requiring less personal information and focusing on info that helps them network.
Results:
• ⬆︎ 20% more access to certificates and profile sections
Most edited option in profile: contact email and phone, followed by job position and profile picture
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, which the team answered collaboratively.

To make finding information easier 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, having more time to focus on other tasks
• ⬆︎ We informed users about our platform better
CONCLUSION
RESULTS & LAST THOUGHTS

  Improved user satisfaction (90% CSAT) with the website redesign and increased 50% the certification completion.
•  Created a new Frequently Asked Questions section decreasing user frustrations and informing them about our platform better
•  Built a new architecture according to the new business model, being the first time building a hybrid platform with the team.

• 
We were a small cross-functional team building the new platform, living in constant ambiguity and time constraints. Communication and collaboration are key


Back to Top