Project OverviewProject RundownProject OutcomeResearchCompetitive ResearchInterviewPersona & NeedsDesignIdeationUser FlowFuture State Journey Map Lo-Fi Prototype  Principles & System CreateSite Map & Service MapFinal Product Final Thoughts

Knack

OVERVIEW
Knack is a remote learning tool for college students, built for the modern classroom setting: online. As a platform, it features many collaborative tools to help students remain connected, organized, and confident in their daily tasks.

This project was guided by two preeminent IBM Distinguished Designers Gorham P and Patricio S in their capacity as Lesley College of Art and Design educators, who shared and encouraged the use of IBM's Design methodologies from the beginning to the end of the project.
TIMELINE

Spring 2022

role

- UI/UX Designer
- Team Project

project highlights
UI/UX Design
Desktop App Design
project link
Figma
TEAM MEMBERS
Justin Liu, Marissa W, Sydnie D, Kevvaughn E
Project rundown
What's Knack?

Knack:
“an acquired or natural skill at performing a task.”

“ The ability to do a certain task successfully ”
I.e. “ You have the knack to do something ”
It's kinda like
A learning tool where students can connect during class time, and interact with teachers, and classmates.
The person/group who uses it is
College Students & High School Students
Currently they struggle because
of the inability to focus, do tasks, and turn in work due to the isolation of online learning.
In a perfect world, they would be able to
stay engaged, and gain knowledge in a stress-free remote learning environment.  
PROBLEM STATEMENT
How might we create a more effective remote learning
experience for a mature learner?
THE SOLUTION
A collaborative space where students can take classes, complete tasks, and communicate.
Information at your fingertips
  • Students can easily join the class without a link.
  • Students can preview class materials before joining, which provides previous class notes, and activities.
  • Feature calendar and recent used tools to help students access tools quickly.
Start engaged, Remain engaged
  • Students can confidently ask questions anonymously.
  • Students can take notes during the class, and save them for later.
  • Students are encouraged to interact more with classmates and teachers through interactive features.
A platform built around collaboration
  • Students can communicate as a group or with individuals at any time.
  • Students are able to assign an individual task for a group project, and receive notification if a teammate has completed a task.
  • Students can quickly and easily access any files they or their teammates have shared.
Research.
COMPETITIVE RESEARCH
What do competitors offer for students?
  • Workplace video conferencing / collaboration focused platforms .
  • Ease of user interface has made the product easy to use for diverse users.
  • Can easily join the class from a computer, browser, and mobile device.
  • Offer many useful features for class use, such as screen sharing, file drop, and chats.
  • Google has a large family of different tools that can be helpful for remote learning, such as Google Drive, Google slides, Google Calendar, and more.
  • Students can upload their assignments on the application for grading.
  • Teachers can grade and give feedback to students on their work on the platform.
  • Is useful for both teacher and students.
  • Workplace suite of collaboration-focused platforms.
  • Has tight integration with the entire family of Microsoft cloud-based products, including Outlook, Powerpoint, OneDrive, and more.
  • Supports a broad but shallow range of use cases through existing product workflows.
KEY FINDINGS
Business opportunities for Knack.
  • Only Google Classroom is specifically designed and developed for students.
  • Google Classroom has the advantage of the interconnecting suite of products, but lacks of some useful tools for some majors student.
  • Students who aren’t tech-savvy may still have a hard time adapting these apps.
INTERVIEWS
The interview process is a great way to validate our assumptions by listening to what students have to say. We interviewed 4 college students through Zoom.
Ask the right questions.
We understand listening is important. We also think asking the right question is extremely important for our interviews. As a team, we came up with about 10-15 questions for the interview. Below are our main questions.
  • What tools do you use for remote learning?
  • Is/are any changes/features you think can make remote learning better for you?
  • Does remote learning allow you to access resources easily? (school faculty, books, etc.)
  • What do you like, and dislike about remote learning?
  • What challenges do you experience the most with remote learning?
  • Do you think you learn better via remote learning or in person? Why?
  • Is there anything that you would normally do or ask in person that you aren't comfortable doing remotely?
  • Has your mental health changed since the start of remote learning?
PERSONA
Meet Luca.
Age: 19
Role: Freshman
Major: Psychology
Remote Learning: 2nd year
Luca is a first-year student who prefers in-person learning, but all of his classes are currently online. As a freshman transitioning from high school to college, he found it more difficult because there were many different circumstances from high school. He is hoping there are ways to improve his current remote learning experience.
Paint Points
  • Losing focus & getting bored
  • Overwhelmed by online structure
  • Questions being ignored/skipped
  • Confused but afraid to ask
  • Not enough social activities with classmates
  • Absorbing class information
Goals
  • Have a stress free remote learning structure.
  • Stay focused during class time, and be able to get help when confused or lost.
  • Ability to make new friends
  • Better tools for collaborative projects
NEEDS STATEMENT
What are Luca needs?
Luca needs a way to feel comfortable collaborating in class so that his questions can be answered by peers as well as the teacher.
Luca needs a way to socialize with his classmates in remote learning so that he can get feedback and make friends.
Luca needs a more engaging structure so that he can remain focused and motivated to participate in a virtual setting.   
Design.
IDEATION & FEASIBILITITY
Everyone has a voice.
What happens when everyone has a great idea in the team? We voted, and we used the below 2 by 2 chart methodology to determine which idea has the most impact on students with the highest feasibility.
Our final conclusion: Options A & C, a collaborative platform with the ability to ask teachers questions anonymously.
  • A: Questions for Teachers
    A way so students, with name or anonymous, can send questions to the teacher.
  • B: In Class Games
    A way so students can play games together, be more social and make friends.
  • C: Collaboration
    An integrated platform with all collaboration tools. 
  • D: Monitoring
    A way to encourage students to turn on the camera but still maintain students privacy.
The solution
A collaborative space to learn, communicate, and complete tasks.
USER FLOW
Time to tell the story.
The future state journey map is a prediction of how Luca may interact with Knack. We envisioned there are three phases: Before class, During class, and In Between classes.
1
Reminder  (Before class) 
Luca is working on his homework. He gets a reminder from Knack that a class is starting in 10 minutes!
2
Launching Knack
After clicking the reminder, Luca was brought to the main dashboard where he can see all his classes at glance.
3
Preview Class
Luca feels a little nervous about joining the class, so he decided to preview the class first which shows his previous activity and notes. Now he feels more prepared to join the class.
4
Interact with the Class
(During Class)
During class, Luca is confused about instructions for his group assignment so he decided to ask the teacher anonymously.
5
Interact with the Teammates
Luca was just assigned a task for his group project. He needs some help to work on documents. He seeks help in the chat and searches for the files that he needs and successfully completes the task by using Knack tools.
6
Finish Task
(In Between Classes )
Luca finishes his tasks, and shares them in the group chat.
Now he feels accomplished and organized in each of his classes.
He now feels more confident in remote learning.
FUTURE STATE JOURNEY MAP
Luca's remote learning journey with Knack.
The future state journey map is a prediction of how Luca may interact with Knack. We envisioned three separate phases: Before class, During class, and In Between classes.
  • Before class:
    Luca will launch the app, and prepare for class.
  • During Class:
    Luca will ask questions and take notes.
  • In between classes:
    Luca will collaborate with his teammates through group chats and use Knack tools to complete his tasks.
Journey Map by Justin L
LOFI-WIREFRAME
Before bringing design to digital, we sketched out our wireframes and tested them out. We asked the users to go through the steps by providing them with some tasks. We received some valuable feedback and marked them for improvement.
What worked well?
We used the 2-by-2 chart's methodology to discover what worked well, and what we could improve later.
  • Missing some buttons, icons.
  • The layout is a little too busy.
  • Make finding class easier.
WIREFRAME
Principles
Define Knack.
Defining our principles at this stage is a critical step to move forward to the design phase. It helps us to envision how users will think and feel while using the product.
We took a step back to look at the persona and learners’ pain points to define Knack's principles.
Transparent
Open and honest communication leaves everyone feeling clear on expectations and intentions. Reliable and dedicated to providing the best outcome tailored to the clientele.
Convenient
Provide a collaborative platform to deliver a sense of ease to users. Painless design that is meticulously thought out and pays attention to small details. Research and design based on users needs. 
Inclusive
All content should aim to be works that are accessible and usable by as many people as possible. Strive to create an environment where people of all backgrounds and abilities feel welcomed, seen, and heard.   
Effective
Clear and concise design that is productive for the users. The design/platform delivers what the users need in an efficient manner. Uses all techniques available to optimize peak design performance. 
Brand idenitity
Brand Logo by Justin Liu
Brand Logo by Justin Liu
Brand Icons by Marissa W
STYLE GUIDE
Style Guide by Justin L & Marissa W
Create.
SITEMAP
The Sitemap helped us to finalize the platform's structure.
It includes four main functions: Classes, Group Chat, Tasks, and Tools.
  • Classes: Where students can join the class meeting, ask questions, take notes.
  • Group Chat: where students can communicate and collaborate.
  • Tools: A single place for all the needed applications for students.
  • Task: Where students can have a better way to organize their tasks. 
Sitemap by Marissa W
BLUE SERVICE PRINT
Service blue print by Justin L
final product
Prototype by Justin L
Final Thoughts
What did i LEARN?
Do more research.
As we began the ideation and design phase, we felt that additional time spent doing more research and more interviews would have been beneficial.
The experience of working as a team.
This was the first experience doing a UI/UX team project together. We did not assign roles, so it was all voluntary. I believe we got a lot out of it by leaning on each other's strengths, supplementing each other's weaknesses, and working together towards a common goal.
More awareness of accessibility and hierarchy.
Our first version of the final prototype had some accessibility and hierarchy issues. This feedback helped to raise awareness of our deficiencies in the design, and informed our roadmap moving forward.
More projects
CarPro - App Design
Collegies - App Design