Morphbots Website
Project Overview
The Product:
Morphbots leads in robotics innovation, providing intelligent and user-friendly robotic systems tailored for K-12 schools. The website serves as a direct access point to their curriculum, including the newly introduced Morphbots Arena where students can book sessions and interact with robotic cars, seamlessly integrating technology into their educational experience and at the same time learning the concepts of coding and robotics.
The Problem:
Morphbots is gearing up to launch ‘Morphbots Arena’ as its flagship product. With a current educational offering, ‘The Breadboard Game,’ they want to shift the focus to direct website traffic towards Morphbots Arena instead of Breadboard Game. In line with this strategy, they are actively seeking website enhancements and innovative ideas to retain and engage the current as well as new customer base.
The Goal:
While the current website layout functions adequately for the company, the founders are keen on implementing a new design that not only enhances visual appeal but also aligns more closely with the company’s brand identity. A primary objective is to refocus the homepage prominently on the flagship product, ‘Morphbots Arena.’ This strategic adjustment aims to create a more compelling and cohesive online presence that effectively communicates the essence of the brand while showcasing their key offering.
Project Duration:
4 months (July 2023 – Oct 2023)
My Role:
UX Designer / UX Researcher
Responsibilities:
User Research, Build Wireframes, Prototyping, Making Animations, and Mockups.
Design Process:
Understanding the User
User Research Summary:
The objective of the user research phase was to gather insights that would inform the redesign of the website, with a focus on improving the design, layout, and color scheme to enhance user satisfaction and encourage product engagement. As a part of the user research process, I conducted a series of in-depth interviews with 5 participants closely aligned with the company’s user base. The interviews aimed to gather opinions on the current website’s design, layout, and color, and to understand user preferences between the two main products, ‘Breadboard Game’ and ‘Morphbots Arena’. Moving on user feedback indicated that 4 out of 5 users preferred the website’s minimalistic design, but 3 out of 5 suggested a brighter background color. All participants favored the ‘Breadboard Game’ over ‘Morphbots Arena,’ signaling a need for better marketing. Common pain points included a cluttered design, poor background color, and ineffective product marketing. Proposed solutions include a brighter color scheme and a redesigned homepage to highlight ‘Morphbots Arena’ and boost engagement.
Pain Points:
Problem Statement:
Alex, an enthusiastic middle school student with a passion for technology, wants an easy-to-use website to learn concepts of coding and robotics due to limited resources in his town and a time constraint with his school studies.
User Persona:
User Flow:
For the user flow of the website, the emphasis is put on an easy and streamlined slot booking process. From the home page to the confirmation page, the whole process is streamlined with clear instructions on each page. The home page is also heavily influenced by the new product so that the user books a slot for ‘Morphbots Arena’ instead of ‘Breadboard Game’. This straightforward user flow ensures a hassle-free experience, making it easy for robotics enthusiasts and beginners to schedule and enjoy their time with the robots.
User Journey Map:
Starting The Design
Paper Wireframes:
For the paper wireframes, my primary intention was to convey the concept of integrating videos and GIFs as integral components for communicating information to stakeholders. These hand-drawn wireframes served as a preliminary visual representation of the envisioned website design, strategically emphasizing the dynamic and interactive nature that multimedia elements would bring to the user experience. By opting for this low-fidelity approach, the emphasis was on providing a conceptual framework that facilitated collaborative discussions within the project team and offered stakeholders a tangible glimpse into the planned user interface. These detailed paper wireframes acted as a bridge between conceptualization and execution, allowing for thorough planning and refinement before transitioning to the high-fidelity design phase.
Digital Wireframes:
For the digital wireframes section, my focus was on cultivating a more user-friendly and visually appealing website layout. The wireframes were developed to convey these changes effectively to my team and users and incorporated key enhancements, including a reduction in textual content and the introduction of dynamic elements like YouTube videos and GIFs for enhanced interactivity. Notably, I strategically shifted the content hierarchy by replacing information about the Breadboard Game with compelling details about Morphbots Arena on the Home Page. This decision aimed to streamline the user journey and capture the interest of first-time users, anticipating higher adoption for the Arena. Additionally, efforts were made to simplify the user flow, particularly in actions like booking slots for the Morphbots Arena, enhancing overall usability by minimizing unnecessary steps and complexities. These wireframes serve as a foundational blueprint for a more informative, user-friendly website designed to guide users seamlessly through their interactions.
Low-Fidelity Prototype:
For the low-fidelity prototype, I delve into the initial stages of translating conceptual ideas into tangible user experiences. The focus here was on rapid ideation and iteration, employing basic and simplified representations of the user interface. This phase allowed us to gather valuable feedback early in the design process, facilitating collaboration and refining key features before investing significant resources into high-fidelity prototypes. The low-fidelity prototypes served as a foundational sketch, providing a visual framework for the overall structure and flow of the Morphbots interface. This iterative and cost-effective approach played a crucial role in identifying and addressing potential design challenges, ensuring a more informed and user-centric evolution of the interface in the subsequent design phases.
Usability Study - Findings Round 1:
In the initial usability study conducted on the low-fidelity prototype, I engaged with five middle school students, representing our core user base. The primary objective was to assess the user’s preferences regarding the new layout and product preferences based solely on the homepage. Insights from the study informed crucial refinements to both the layout and functionality of the website prototype, enhancing user experience and ensuring alignment with user preferences.
The primary findings in round 1 of the usability study are:
- The top menu bar is not fixed and the user needs to scroll back up to access it which they feel is very annoying.
- Users felt that as the website hosts educational content so there should be a chatbot for help whenever the user is stuck at some stage of the Morphbots Arena game.
- Putting payment details and booking review information on one page will make booking simpler and more convenient.
Refining The Design
Usability Study - Findings Round 2:
In the subsequent usability study, I once again collaborated with a group of five middle school students, employing a high-fidelity prototype for evaluation. Distinguished from the prior study, this prototype incorporated design modifications to address concerns raised by participants in the preceding session. Additionally, notable enhancements, including the integrations of color schemes, images, and animated components were introduced. The objective of this study was twofold: firstly, to solicit valuable insights from the potential user base, and secondly, to ensure that the refined version aligns closely with their expectations of an educational website. This iterative process aims to fine-tune the user experience and deliver a product that resonates effectively with the targeted audience.
The primary findings in the round 2 of the usability study are:
- The plain grey background is very dull and is not preferred by the younger generation who like bright colors.
- The question mark in place of the chatbot seems very vague and something more eye-catching should be used.
Style Guide:
For the mockups, I used the 60-30-10 rule while selecting colors. I also used a bunch of icons as a symbol of universal language to help a diverse array of users. Lastly, I used the Roboto font throughout the website with 5 different sizes.
Mockups:
In the mockups, the focus was placed on refining the visual elements to encapsulate the brand identity cohesively. Notably, the incorporation of the company’s signature green color as the background served as a strategic decision to establish brand consistency and enhance visual recognition by the young audience which prefers bright colors. This specific shade was chosen for its association with the company’s identity, conveying a sense of innovation and freshness. The intentional use of the green hue aimed to create a visually harmonious environment that aligns with Morphbots’ overarching brand narrative.
Additionally, an innovative touch was introduced by incorporating the company’s mascot into the design as the chatbot button. This deliberate inclusion served a dual purpose – not only does it act as a functional element for engaging with the chatbot, but it also serves to pique user curiosity. The presence of the mascot in the chatbot button adds a playful and inviting dimension to the user interface, potentially fostering a more interactive and enjoyable user experience. By strategically infusing brand colors and incorporating a recognizable mascot, the mockups not only serve as a visual representation of the user interface but also contribute to a cohesive and engaging brand experience for Morphbots users.
High-Fidelity Prototype:
In the High-Fidelity Prototype, the evolution of design went beyond aesthetic enhancements. A critical aspect of this phase involved a strategic reduction in the number of clicks required to complete the booking process, optimizing the user journey for efficiency. The refined interface seamlessly incorporated the distinctive green color, reinforcing brand identity, while the interactive chatbot button featuring the company’s mascot added a playful touch to user engagement. Moreover, the prototype introduced an essential improvement by consolidating the information review and payment stages onto a single page. This streamlining aimed at simplifying and expediting the booking process, ensuring a more user-friendly and time-efficient interaction. The high-fidelity prototype thus not only visually polished the interface but also strategically improved functionality, creating a cohesive and efficient digital environment for users interacting with Morphbots.
Accessibility Considerations:
Takeaways
Impact:
The recent changes to Morphbots Arena, featuring a new layout for the home page, a chatbot functionality, an optimized booking process, have demonstrated a noticeable uptick in user engagement and satisfaction. This positive trend is supported by findings from recently conducted user trials on the Morphbots user base. The cohesive incorporation of brand colors and mascot, coupled with the streamlined booking process, has not only enhanced accessibility and usability but has also resonated positively with users, resulting in an overall more engaging and satisfying experience.
What I Learned:
Designing Morphbots Arena for the first time taught me not only the basics of creating a website but also provided insights into what design techniques resonate with the teen user base. Learning how to make things visually appealing and functional, such as incorporating a stylish design, a user-friendly chatbot, and simplifying the booking process, shed light on the preferences of our target audience. This experience was not just about mastering technical skills; it also deepened my understanding of tailoring designs to meet the expectations and preferences of the teen demographic, a valuable lesson for future design endeavors.
Next Steps:
Thanks:
Thank you for taking the time to explore my UX case study. Your engagement is greatly appreciated. If you have any feedback or questions, feel free to reach out.