RNN - Edu.bot
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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Our client, RNN, needed a responsive web application that would provide a chat service tutor to general learners. However, they had no definitive branding, UX/UI design, or development done. 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
We created Edu.bot, a responsive web app offering personalized AI tutoring. It features a user-friendly dashboard for goal tracking, progress review, subject exploration, chat history viewing, and profile management. Its chat function delivers personalized, contextual responses for an engaging, effective learning experience.
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
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.
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 dashboard and chat pages for the responsive web app. Through a few collaborative iterations, we created the user flows below.
WIREFRAMES
After familiarizing myself with the current platform and industry standards, I used Figma to create mid-fidelity wireframes. In our five-person team, we aimed for a cohesive design and responsive interfaces for all devices, involving many wireframe revisions and team collaborations. I was entrusted with designing the dashboard and chat screens.
STYLE GUIDE
We developed a style guide for design consistency, encompassing elements like color palette, typography, and button layouts. It evolved through initial UI versions, team feedback, and client input. The final color scheme offered light and dark modes, with school-friendly pastel hues and gradient accents in the RNN wordmark for a tech vibe. The text remains clean and geometric.
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 four 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 requested a color change for the banner and CTA, resulting in a technological-feeling blue and blue/purple gradient.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
"The UX is perfect and it is gorgeous; my compliments to the team." - Client
RNN - Edu.bot
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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Our client, RNN, needed a responsive web application that would provide a chat service tutor to general learners. However, they had no definitive branding, UX/UI design, or development done. 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
We created Edu.bot, a responsive web app offering personalized AI tutoring. It features a user-friendly dashboard for goal tracking, progress review, subject exploration, chat history viewing, and profile management. Its chat function delivers personalized, contextual responses for an engaging, effective learning experience.
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
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.
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 dashboard and chat pages for the responsive web app. Through a few collaborative iterations, we created the user flows below.
WIREFRAMES
After familiarizing myself with the current platform and industry standards, I used Figma to create mid-fidelity wireframes. In our five-person team, we aimed for a cohesive design and responsive interfaces for all devices, involving many wireframe revisions and team collaborations. I was entrusted with designing the dashboard and chat screens.
STYLE GUIDE
We developed a style guide for design consistency, encompassing elements like color palette, typography, and button layouts. It evolved through initial UI versions, team feedback, and client input. The final color scheme offered light and dark modes, with school-friendly pastel hues and gradient accents in the RNN wordmark for a tech vibe. The text remains clean and geometric.
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 four 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 requested a color change for the banner and CTA, resulting in a technological-feeling blue and blue/purple gradient.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
"The UX is perfect and it is gorgeous; my compliments to the team." - Client
RNN - Edu.bot
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.
ROLE
UX/UI Designer
TOOLS
Miro, Zoom, Figma, Slack
PROCESS
Research, Ideation, Wireframing, Hi-Fi Mockups, Developer Handoff
PROBLEM
Our client, RNN, needed a responsive web application that would provide a chat service tutor to general learners. However, they had no definitive branding, UX/UI design, or development done. 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
We created Edu.bot, a responsive web app offering personalized AI tutoring. It features a user-friendly dashboard for goal tracking, progress review, subject exploration, chat history viewing, and profile management. Its chat function delivers personalized, contextual responses for an engaging, effective learning experience.
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
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.
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 dashboard and chat pages for the responsive web app. Through a few collaborative iterations, we created the user flows below.
WIREFRAMES
After familiarizing myself with the current platform and industry standards, I used Figma to create mid-fidelity wireframes. In our five-person team, we aimed for a cohesive design and responsive interfaces for all devices, involving many wireframe revisions and team collaborations. I was entrusted with designing the dashboard and chat screens.
STYLE GUIDE
We developed a style guide for design consistency, encompassing elements like color palette, typography, and button layouts. It evolved through initial UI versions, team feedback, and client input. The final color scheme offered light and dark modes, with school-friendly pastel hues and gradient accents in the RNN wordmark for a tech vibe. The text remains clean and geometric.
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 four 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 requested a color change for the banner and CTA, resulting in a technological-feeling blue and blue/purple gradient.
HI-FIDELITY DESIGNS
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.
ANNOTATIONS & MEASUREMENTS
TAKEAWAY
"The UX is perfect and it is gorgeous; my compliments to the team." - Client