Innota Technologies
2023
Overview
Innota Technologies is a high-tech start-up focused on creating educational software to enhance student learning. They aim to collaborate with universities and colleges to understand students' needs better and introduce effective software applications to the market.
My Team
This project was completed with a UX Designer, UI Designer, and UX Researcher. We worked with two stakeholders who represented Innota Technologies and attended weekly check-in meetings.
My Role
UI Designer: Wireframing, High/Low Fidelity Screens, Iteration, Prototyping
Define
Defining the Problem & Establishing Stakeholder Needs
The Problem
The goal for the design team is to create a comprehensive studying tool that caters to different learning preferences and prepares for the integration of AI technology to further enhance its capabilities.
Stakeholder Goals
Create an AI Summarizer that offers efficient text summarization through bullet points or paragraphs. The stakeholders wanted to include this feature in order to cater to alternative learning preferences.
The stakeholders knew they wanted a 2-panel framework with a PDF reader on one side and a notetaking canvas on the other.
Learn
Learning about User Needs & Prototype Testing
Prototype A
Existing Prototypes
Innota already had previous designs which were put together into two different versions below. Both had basic layout the stakeholders want, but there was a lot that needed to change.
Prototype B
A/B Testing
After defining the problem and goals for the company, the design team decided Prototype A would be best to test because it included more features that the stakeholders found useful. Our team tested with 5 participants to establish user frustrations and needs.
Some of the most common issues between participants were:
Deleting a document
Undoing/redoing actions
Confusion about the icons and what each button does
Linking notes together
Design
Creating the Information Architecture & Visual Structure
User Flows
To the right is the basic infrastructure design for the carbon footprint tracker, onboarding, and finding an energy company. This would act as the visual structure for the app.
Generate AI Note (left)
This flow allows the user to highlight text and generate a summary using AI. Then the user can add it as a note to canvas panel.
Add Quote Note (right)
This flow allows the user to generate a quote note from highlight text from the PDF.
Wireframes
It was important to establish the visuals through black and white wireframes. These wireframes were reviewed by the stakeholders and each image below outlines a specific issue.
Toolbars
The canvas toolbar lives on the bottom of the canvas.
Problem: The stakeholders had conflicting opinions on the canvas toolbar placement. One advocated strongly for the bottom of the canvas while another wanted it positioned on the right side. There also was no toolbar on the PDF side, leaving confusion on how the two sides relate to each other.
Solution: I moved the canvas toolbar to the right to see how it worked for the next version because of the conflicting opinions of the stakeholders.
Linking Notes
The user selects the link icon and linking anchors will appear around the perimeter of each note.The user selects which notes to link and a connector will appear between them.
Problem: The stakeholders believed there were too many clicks in order to link the notes.
Solution: I approached it more intuitively and used Figjam as a reference. The result allowed the user to drag the anchors from one note to link to another.
User Flows
To the right is the basic infrastructure design for the carbon footprint tracker, onboarding, and finding an energy company. This would act as the visual structure for the app.
