TradeUp LMS - User Experience & Interface Design
The Problem
Many employers face difficulties in finding the right Learning Management System for their teams due to issues such as complexity, poor user experience, limited customization and scalability, which hinder their ability to effectively manage employee learning and development as their business grows.
The Solution
To address these challenges, I designed an intuitive and customizable LMS platform that prioritizes the user experience of managers and employers, providing a platform that is capable of scaling with their business.
My Role
User Research, UX Design and UI Design
Materials Used
• Pencil and paper (sketches)
• Adobe Illustrator (wireframes, user flows, data visualization)
• Figma (interactive prototype)
Many employers face difficulties in finding the right Learning Management System for their teams due to issues such as complexity, poor user experience, limited customization and scalability, which hinder their ability to effectively manage employee learning and development as their business grows.
The Solution
To address these challenges, I designed an intuitive and customizable LMS platform that prioritizes the user experience of managers and employers, providing a platform that is capable of scaling with their business.
My Role
User Research, UX Design and UI Design
Materials Used
• Pencil and paper (sketches)
• Adobe Illustrator (wireframes, user flows, data visualization)
• Figma (interactive prototype)
Timeline
1. Research
The research phase is crucial to the success of the product. By understanding the target audience, conducting a competitive analysis and creating a user persona, I was able to identify the key objectives for TradeUp and create a product that meets the needs of the users.
1.1 Define Audience & Key Insights
Before starting the design process, it was crucial to identify the target audience and gather insights to understand their needs and pain points. The research was conducted through analytics, surveys and interviews. This helped in understanding what these users were looking for, what features were most important to them and how they currently used similar products.
1.2 Competitive Analysis
A thorough competitive analysis was conducted to understand what other products and services were available in the market. This analysis helped in identifying areas where TradeUp could stand out and provide unique value to the target audience. The analysis involved studying the interface, features and user feedback for competing products.
1.3 User Persona
Based on the research conducted, a user persona was created to represent the target audience. The persona included information about their demographics, goals, pain points and values. This persona helped in keeping the user's needs at the forefront of the design process and creating a product that meets their needs and expectations.
1.4 Identify Objective
The research helped in identifying the key objective for the project. Based on the insights gathered, it was clear that my main objective was to create a user-friendly product that provided a seamless user experience while also addressing the needs and pain points of the target user.
2. Design
To create a product that's visually appealing and meets the needs of its users, I developed a visual language and design system, created wireframes, visualized user flows and built a high-fidelity prototype for the target audience to test.
2.1 Develop Visual Language & Design System
Once the key insights and objectives were identified, I began my design process began by developing a visual language and design system that would be used throughout the product. This included guidelines for colors, typography and other design elements that would create a consistent and cohesive look and feel.
"Wait, why did you make those decisions?"
Iconography
I used the initial shape of the icons from the Royco Design System, which is built on the principles of Atomic Design. I altered these icons as needed to better suit the specific needs of TradeUp and to appear more visually consistent with each other, as well as the tone of the brand.
I used the initial shape of the icons from the Royco Design System, which is built on the principles of Atomic Design. I altered these icons as needed to better suit the specific needs of TradeUp and to appear more visually consistent with each other, as well as the tone of the brand.
Color Palette
Psychologically, blue has a tendency to instill a feeling of trust and stability, making it the perfect color choice for the primary branding of an LMS.
The secondary color is orange. The specific value of this orange is the direct complementary color of our primary blue. This color combination is visually pleasing and helps the user distinguish between opposing elements of the interface.
The red I selected has a touch of green and blue to lighten it up, causing it to appear less harsh than a pure RGB red. Even though red is not a direct aspect of the branding, it will still appear occasionally throughout the product, so choosing a color that works well with the branding was a must.
To prevent excess levels of contrast, I chose a black for text and forms that's very light, but still maintains readability. There is also a slightly darker black for use on darker backgrounds, such as menus and widgets.
Psychologically, blue has a tendency to instill a feeling of trust and stability, making it the perfect color choice for the primary branding of an LMS.
The secondary color is orange. The specific value of this orange is the direct complementary color of our primary blue. This color combination is visually pleasing and helps the user distinguish between opposing elements of the interface.
The red I selected has a touch of green and blue to lighten it up, causing it to appear less harsh than a pure RGB red. Even though red is not a direct aspect of the branding, it will still appear occasionally throughout the product, so choosing a color that works well with the branding was a must.
To prevent excess levels of contrast, I chose a black for text and forms that's very light, but still maintains readability. There is also a slightly darker black for use on darker backgrounds, such as menus and widgets.
Typeface
Alright, I never said that I'm the most unique person in the world. I chose Inter as the primary typeface because it's simple, clean and highly-legible. For learning management systems, a professional (if not boring) typeface is ideal.
Alright, I never said that I'm the most unique person in the world. I chose Inter as the primary typeface because it's simple, clean and highly-legible. For learning management systems, a professional (if not boring) typeface is ideal.
2.2 Make Wireframes
Using the design system as a guide, wireframes were created to outline the basic structure and layout of the TradeUp interface. This helped in visualizing the product's functionality, as well as identifying areas where improvements could be made. The wireframes were created using user feedback and were refined over multiple iterations to ensure they would meet the needs of the user.
2.3 Visualize User Flow
After the wireframes were created, the next step was to visualize the user flow. This involved outlining the steps a user would take to accomplish a specific task within TradeUp. This helped in identifying areas where the experience could be improved and ensured it was easy and intuitive to use.
2.5 Build High-Fidelity Prototype
Once the user flow was visualized, a high-fidelity prototype was built based on the visual language, design system and wireframe architecture. The prototype included all the design elements and functionality to accomplish the goal of the user flow. This prototype was tested with users to ensure that it met their needs and expectations.
3. Test
I was able to identify potential issues and obtain valuable insights through usability testing and user feedback. A/B testing was conducted to compare different variations of the TradeUp interface, ensuring that the most effective version was selected. The insights gained from both testing methods were used to make informed improvements, resulting in a refined product that aligned with the project's objectives. The design and usability of TradeUp were refined until they successfully met the needs of the users.
3.1 Usability Testing
The prototype was tested with users to identify any usability issues and gather feedback on the overall user experience. The feedback was used to make improvements to TradeUp and ensure that it meets the needs of the target audience as best it can.
3.2 A/B Testing
A/B testing was conducted to test different variations of the TradeUp interface to determine which version was most effective in meeting the key objectives. This helped in identifying areas where improvements could be made and ensured that the final product was the most effective version.
3.3 Insights
Based on the feedback gathered from usability testing and A/B testing, deeper insights were gathered and used to make improvements to the experience. These insights helped in identifying areas where the user experience could be improved and ensured that the final product met the key objectives.
3.4 Revisions
Based on the insights gathered during the testing phase, I made revisions to the design to improve usability and address any remaining pain points. I also reviewed the design system to ensure consistency and make any necessary updates.
I conducted additional testing to confirm that the revisions had a positive impact on the user experience. I continued to iterate on the design until I was confident that it met the needs of the target audience.
I conducted additional testing to confirm that the revisions had a positive impact on the user experience. I continued to iterate on the design until I was confident that it met the needs of the target audience.
Conclusion
In conclusion, the TradeUp LMS project presented an opportunity to address the challenges faced by employers in finding the right Learning Management System for their teams. Through extensive research, user-centered design and iterative testing, I successfully designed an intuitive and customizable LMS platform that prioritizes the user experience of managers and employers. By understanding the needs and pain points of the target audience, I was able to design a product that not only meets their expectations but also scales with their growing business.
The development of a visual language, wireframes, user flows and prototypes ensured a consistent and cohesive user experience. Through usability testing, A/B testing and continuous revisions, I made iterative improvements to the design, resulting in an optimized user interface that fulfills the key objectives.
The development of a visual language, wireframes, user flows and prototypes ensured a consistent and cohesive user experience. Through usability testing, A/B testing and continuous revisions, I made iterative improvements to the design, resulting in an optimized user interface that fulfills the key objectives.
All names and images from Community are owned by Sony Pictures Television.
Thumbnail image mockup by aleksandr_samochernyi on Freepik.
Thumbnail image mockup by aleksandr_samochernyi on Freepik.
