RNN - Edu.bot
AI Conversational Educative Web App
RequestNeural.Net (RNN) is a startup developing AI solutions. Edu.bot is their new concept exploring GPT-3's conversation abilities in education.
PROBLEM
Our client, RNN, approached us with a problem. They needed a responsive web application that would provide a chat service tutor to anyone interested in learning for academic, work, and personal enrichment. However, they had no definitive branding or working process, and no development, UX, or UI design had been done.
As UX/UI designers, our task was to create a concept from scratch, making sure the interactions and flows were seamless, intuitive, and visually pleasing. The client had not yet determined the features to be included, so we worked closely with them to help them architect the product and define its key functionalities.
SOLUTION
Our solution was Edu.bot, a responsive web application that provides reliable knowledge worldwide through an intuitive use of an AI education chat service. Edu.bot connects students and general learners with personalized, interactive tutoring.
We developed a user-friendly dashboard that allowed users to track their goals and progress, explore subjects through AI chat, view their chat history, and manage their profiles. The chat feature was designed to provide personalized and contextual responses, making the learning experience more engaging and effective.
MY ROLE
UX/UI Designer
TIMELINE
Overall: 6+ weeks
Design & testing: 6 weeks
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframes
Design, Hi-Fidelity, Prototype, Developer Handoff
01/ DISCOVERY
KICK OFF MEETING
My team and I started our process with a kickoff meeting, during which we became familiar with the current platform, conducted competitor research, and brainstormed additional questions for the client. We identified current user pain points through questions and research. The key takeaways from the client were:
. The current site has a clean design, but is too empty; lacks illustrations, color differentiation, and complex functionalities.
. The site should be designed to target education for varied age groups
SCOPE OF THE PROJECT
1. Based on selected user stories and the user flow, additional features will be designed for a (desktop and mobile responsive) web application (hi-fidelity).
2. Develop a final UI for client hand-off.
COMPETITOR ANALYSIS
While researching for RNN, I evaluated the competition, including ChatGPT, Skooli, and Upchieve. In terms of a more personal and user-friendly interface design, competitors such as Chat GPT fell short. Users must login to use the service, but it feels incomplete because there is no profile or function other than creating new AI chats. Upchieve as a whole is more in line with the client's request, but it is exclusively designed for students, whereas Edu.bot is designed for general learners, therefore the design should be more universal.
02/ IDEATE
USER STORIES
User stories most vital to the MVP for the client were submitted to the project manager. These involved some of the basic functions of the application. Further development would be built on the foundation we set.
As a user, I want to be able to personalize my profile such as age, school level, and goals.
As a user, I want to be able to create my own chat account.
As a user, I want to be able to log in to my chat account.
As a user, I want to be able to create a new conversation.
USER FLOWS
We examined the current navigation based on the user stories we received from the client. Each member assigned themselves to a user flow. I worked on flow #4 and focused on developing the mobile dashboard and chat pages for the responsive web app. Through a few collaborative iterations, we created the user flows below.
WIREFRAMES
I began by becoming acquainted with the existing platform and industry standards. Then, I utilized Figma to develop mid-fidelity wireframes for our user stories. Despite working in a team of five, it was essential that the product look to have been designed by a single individual. It was also essential that the interfaces were responsive across mobile and desktop platforms. We went through various wireframe iterations and collaboration sessions to accomplish this. As a member of the team, I was responsible for designing the following screens:
STYLE GUIDE
To ensure design consistency throughout the project, we created a comprehensive style guide. This guide covered fundamental design elements such as colour palette, typography, button layouts, and components, and it serves as a framework consistent design decisions. We began constructing the style guide based on our first UI versions and team feedback. Throughout each iteration, we edited the guide based on the clients input. We ultimately selected a colour scheme with both a light and dark mode, with the light mode employing more pastel, school-appropriate hues and the dark mode employing the same colours as highlights against a dark background. The RNN wordmark and banner use a gradient to convey a more technological vibe, while the text is clean and geometric.
03/ DESIGN
UI ITERATIONS
Each team member created their own version of the Dashboard Page for the UI Iterations. The team then conducted a comprehensive review of all designs before settling on the top three for further development. UI Iteration #4 was approved after several rounds of review, including a final review with the client. The client liked the fourth iteration but wanted to change the color of the banner and cta from yellow to an alternative color. We eventually decided on a blue and a blue/purple gradient because it feels more technological.
HIGH - FIDELITY DESIGN
The style guide helped us transition into hi-fis and finalise our screens. I worked on selecting the appropriate color combinations for the "Dashboard" and "Chat Pages". Instead of using IOS chat features, I redesigned the message to fit the RNN style for the chat screens. Additionally, I made the dashboard and side navigations mobile-friendly.
04/ DEVELOPER HANDOFF
ANNOTATIONS & MEASUREMENTS
To wrap up our project, we wanted to provide the client with all the necessary information and tools for a seamless development process. We incorporated annotations for designated functions, CTA paths, and element spacing measurements to minimize confusion for developers and stakeholders. Our annotated screens serve as an example of the level of detail we included to minimize any potential confusion during development.
05/ REFLECTION
TAKEAWAY
Collaborating with Request Neural.Net on their responsive web app was an incredible opportunity to showcase my skills as a UX/UI designer. However, working with a remote team was a unique experience that presented both challenges and opportunities.
Communication was a crucial aspect of the project, and it was essential to establish effective channels for communication and feedback. As a designer, I prioritized frequent updates and progress reports to ensure that everyone was on the same page. I also found that visual aids such as wireframes, prototypes, and mockups helped to communicate design concepts and receive feedback from the team.
For my portion of the project, I focused on creating a dashboard and chat page that was responsive, user-friendly, and effective for healthcare and education. I enjoyed the process of iterating on design concepts, conducting research, and testing the design with the target audience.
The outcome was a successful responsive web app that exceeded the client's expectations, as evidenced by their feedback: "The UX is perfect and it is gorgeous; my compliments to the team."
Working with a remote team taught me the importance of communication and collaboration, as well as the need to be adaptable and flexible throughout the design process. I'm eager to continue working on challenging projects that allow me to grow as a UX/UI designer and professional.