PROJECT SUMMARY
Role:
UI Designer
Project Manager
Timeline:
2 Week Sprint
.png)
Deliverables:
Research & Synthesis
Presentation & Pitch
Prototypes
Mockup
Team:
Jenny Park
James Walsh
Peter Kim
Doreen Tenenblatt
.png)
Tools:
Sketch
Photoshop
Miro
Whiteboarding
Prototyping
Invision
CLASSCALC WEBAPP
ClassCalc's goal is to revolutionize math education and bring the classroom to the 21st century with its customizable web app. ClassCalc has the functionality of both a graphing and scientific calculator and the ability to lock students onto the calculator while taking a test. They approached our team having identified the user experience for teachers on their web app to be limiting.
THE CHALLENGE
ClassCalc pinpointed their aesthetics and visuals to be the main contributor to the users' poor experience.
THE GOAL
To validate the stakeholders' hypothesis regarding the aesthetic
and visuals
To identify other pain points for teachers by using various
UX methodologies
RESEARCH
Using heuristics analysis, C&Cs, and interviews, we explored our users' experience with the current existing web app.
HEURISTICS EVALUATION
According to the LEMErS heuristics evaluation:
The web app has missing functionalities that are not built out or are missing
The graph is difficult to use without any guidance
There is a lack of hierarchy due to the amount of information on one page
•
•
•
C&C Summary
C&C ANALYSIS
What do teachers use in their classrooms? How does it differ from the existing web app? What do they think about ClassCalc?
INSIGHTS
On the current ClassCalc web app teachers are unable to communicate directly with students, unlike other applications they currently use in the classrooms
Other applications had a simple, easy, and direct sign-up as well as an onboarding tutorial.
Most applications enabled teachers to customize and personalize their account.
•
•
•
“I'm not sure what to do on this page. What's the purpose of this graph and why does it take up 70% of the page?”
.jpg)
USER INTERVIEWS
We interviewed 4 math teachers, ages ranging from their 20s to their 40s to find out what the users liked and disliked about the current ClassCalc teacher panel.
INSIGHTS
New users wanted contextual help to guide them through the capabilities of the web app.
Users were confused by the purpose of the teacher graph if students couldn’t see it.
Users raised concerns about technical difficulties they might encounter, such as a scenario when the wifi connectivity drops off after the teacher has locked their students phones.
Users wanted a way to communicate with students through their ClassCalc apps.
All users clicked Start Free Trial when trying to set up a new account.
•
•
•
•
•
SYNTHESIS
Gathering from our research, we synthesized our findings into an affinity map and created personas and journey maps to create our feature prioritization.
AFFINITY MAPPING
We created an affinity map to better align the goals of our stakeholders with the pain points of our users.
The three major takeaways from our affinity map were: flow, content hierarchy, and learnability for teachers to learn the web app intuitively.
Overall Affinity Map
PERSONA 01
Our first persona is Mathwhiz Maria, who is a 29 year old math teacher in Boyle Heights, Los Angeles teaching Algebra 2 and Pre Calculus.
She wants to provide an equal opportunity learning experience for her students by using ClassCalc and increase student engagement.
PAIN POINTS
Maria’s school does not provide enough resources for her classes and the internet can be spotty at times, creating a problem with the connection to ClassCalc.
Not all of her students have access to the latest technology
She struggles to communicate with her numerous students and keep them engaged during classes
•
•
•
Persona & Journey Map
Persona & Journey Map
PERSONA 02
Our second persona is Mathematician Mark who is a 63 year old math teacher at a private high school in Westwood, Los Angeles.
He has taught at the same school for the past 30+ years and struggles to keep current with all the available technology in his classroom.
PAIN POINTS
Mark struggles to integrate technology into his classroom despite having all the resources available to him
He gets easily frustrated when technical issues arise
He relies on the help and tutorial to get him situated with
the new technology
•
•
•
REDEFINED PROBLEM STATEMENT
We learned that issues with the UI were independent of the lack of flow, content hierarchy, and learnability for the users. How might we redesign the teacher panel and dashboard to improve usability for current and future users?
FEATURE PRIORITIZATION
Our feature prioritization was broken down into Must, Should, Could, and Won’t by referencing the MCSW chart. All features highlighted in teal were incorporated into our final design.
We put “improve sign-in flow” in the should since all users struggled to sign into the web app, but since it was out of our scope, we did not include it in our design.
MSCW Chart
DESIGN
Design Studio In Process
DESIGN STUDIO
We started by holding a design studio where we individually created and shared with one another our ideas before collaborating on one version we thought to be the solution; thus creating our paper prototype.
PAPER PROTOTYPE
We conducted an A/B test with 6 teachers to determine which paper prototype worked best for them. We compared the existing flow with all elements on one page versus our ideated version which separated the teacher panel and the graph.
PAIN POINTS
All 6 teachers liked elements from both versions of the A/B test
The pop out icon was helpful but not intuitive for teachers, many in fact skipped over this feature entirely
The iconography and terminology on our simplified global nav were unclear and left teachers confused
•
•
•
LoFi Usability Testing
MIDFI PROTOTYPE
We took our findings from the paper prototypes and created a digital midfi to test with teachers. At this point we checked in with our client where we shared our midfi, and he informed the team that there was more than one calculator available for teachers to use on the webapp.
We solved this problem by creating a dropdown menu separating each calculator page from graphing to scientific to the matrix calculator with room for growth as he asked. We then tested with 9 teachers the newly improved MidFi prototype.
INSIGHTS
The location of the timer on the test panel seemed like a button to users and did not inform them of its purpose
Wording on the modals and pop-ups were not concise and directive in leading users to the task
Iconography such as the home button on our graph page confused users about its functionality
•
•
•
REDOING THE PAPER PROTOTYPE
After the results from the first round of usability testings, we went back and held another design studio, where we created a new paper prototype combining both the proposed and current web app layout from our previous paper prototype, then tested with 4 more teachers.
PAIN POINTS
•
•
•
All users thought the simpler, streamlined process was more intuitive and appreciated the separated teacher panel and graph for clarity.
They mentioned that they would want a separate page for account settings to change their personal information for security purposes rather than changing it on a dropdown
They wanted to know the basic functionalities of the web app prior to starting the test.
MidFi Usability Testing
HIFI PROTOTYPE
With the insights from our MidFi usability tests, we took our mood board and designed our HiFi prototype, which we then tested with 10 teachers, 1 developer, and 1 current existing user.
INSIGHTS
The copy elements were too small and difficult to read on the modals especially for teachers like our persona Mathematician Mark, so we took into account the accessibility of the site by making it more legible.
The visibility of the start button on the teacher panel was too low and hard to notice, so we made it more dynamic and placed it higher on the page in our final prototype
Our student calculator was not intuitively understood for the teachers which led us to create another modal when arriving at the student page to inform users of the functionality of the site.
•
•
•
MOODBOARD
We aimed for a clean, minimalistic design with unobtrusive colors and patterns. We chose blue and grey for the simplistic clean palette while relying on its color psychology of calmness, stability, and reliability to create a straightforward design.
The ordered stacks of the abacus shaped the grid-like structure of our design while the sharp clean minimalistic lines of the washing machine and graph lines influenced the clean academic aesthetic we strived for.
HIFi Usability Testing
NEXT STEPS
EXPAND IT
We want to expand the capabilities and functions of the web app to include the teacher's graph to be displayed on the student app for instructional purposes
BUILD IT
We want to work with developers to oversee the feasibility of the design with its locking and graphing functions.
REDESIGN IT
We propose redesigning the marketing home page to allow for a better and smoother sign-in flow for teachers.
