Roles & Accomplishments
- Facilitated 5-day design sprint that resulted in a usability-tested prototype
- Stepped into the role of lead designer, producing all 75+ frames in Figma
- I was the lead software engineer on this product, owning the full stack and contributing over 250 commits to the frontend Github repo
- Conducted over 25 usability sessions, featuring educators: our end-users
- The platform has 300+ users and will grow at an accelerated rate in fall 2023 as teachers switch from the Canvas (our legacy offering) to this new product
Tech Stack
The goal of the architecture was to have an intuitive set of tools that we could use to iterate with quickly, so I leveraged tech that I'm proficient and comfortable with.
Frontend
Language: Typescript
Framework: React, with functional components and hooks
State management: React Query
Components & Theming: Material-UI, React Hook Form
Styles: CSS-in-JS
Others: Storybook, Cypress, react-pdf
Backend
Language: Typescript
Framework: Feathers
Database: PostgreSQL, with Knex database adapter
Dev-Ops: AWS: RDS, Elastic Beanstalk, EC2, Cloudfront, S3
Timeline
- Fall 2022: Design sprint
- Winter 2022: Product development begins
- Spring 2023: Product launched
- Summer 2023: Fast-follow features, tech debt work
Features & Key Takeaways
While Synapps is the internal-only, management platform for Ellipsis Education curriculum, the CDP would be the teacher-facing portal for that same curriculum.
So, development of the CDP had a few essential requirements:
- It had to be easy and immediate, so that educators could quickly gather what they need, and focus on what really matters -- teaching
- It needed to run smoothly on a Google Chromebook: the small, underpowered device that a majority of teachers use
- It had to be at least as good as the LMS Canvas, which is how Ellipsis Education had been delivering their curriculum up this point
- Flexibility and potential for a number of features like analytics and SSO, which would give us opportunities that Canvas could not provide
Immediate + Streamlined UI
There are effectively just 3 pages in the platform, with the hierarchy: Courses > Course > Lesson
This simple structure means:
- Most pages can be reached with a single click
- Necessary info can be accessed from more than one page
- Users can get what they need quickly
Lotsa Usability Testing
By the time we launched the CDP, nearly everyone at the company had been through at least one round of usability testing. It was not only a lot of fun to collaborate across departments, but provided rich feedback that guided the entire final month of development. The most effective structure for gathering insights was to do two separate calls: one for introducing the product and doing usability testing, and one the next a week later to ask in-depth questions.
Here are the usability-focused tasks that I asked in the initial call:
- Check your email for an invitation to access the CDP and click “Get Started”
- Complete signup by providing a name and password – feel free to just use Password1 if you want!
- Log in using your Codelicious email address and the password that you just set
- From the courses page, view the Syllabus for your CS Foundations 2 course
- Navigate to the CS Foundations 2 course and view the Standards Map (By Standard)
- Open the Exit Ticket for Day 2’s lesson “You Are A Computer Scientist!” from the course page
- Navigate to Day 3’s lesson “Space Adventure” and open its lesson plan
- Go to Day 22’s lesson “Website Wonderings” and open its lesson plan
- Navigate back to the main courses page while on the lesson page
- Navigate to the Account page
- If you’re stuck and have a question about Ellipsis curriculum, where could you go for help from within the CDP?
And here are the deeper, follow-up questions that I asked after the user had time to try out the product on their own:
Design & UX
- How satisfied are you with the overall design and layout of the platform?
- What features of the platform did you find most useful?
- The lessons in a course are split up by day of instruction. Is this structure helpful for daily instruction?
- Would you feel confident using the platform throughout the school year? Is there anything about it that would make that difficult?
- How satisfied are you with the training course and support documentation provided within the platform?
Performance
- Did you experience any technical issues while using the platform?
- Did the platform meet your expectations in terms of performance and speed?
Improvements
- How does this platform compare to other similar platforms that you’ve used? (i.e. Canvas)
- What improvements or changes would you suggest to make the platform more effective and user-friendly for teachers?
- What additional features or functionalities would you like to see added to the platform?
This gave us confidence that we built the right thing, and that there weren't pitfalls of edge or use cases that we didn't expect.
PDF Generator 2: Electric Boogaloo
The platform needed to generate a teacher-ready syllabus, pacing guide, and standards map on-the-fly. I used a custom Feathers service to gather the necessary data on the API, and react-pdf on the frontend to dynamically paint PDFs with over 100 pages. However, we began to see slow and inconsistent performance as older and less powerful devices attempted to render large PDFs in the browser!
The solution? Move PDF generation to the API, and let the app servers do the work, since we can control their scale and memory. This yielded faster and more predictable load times for the bigger curricula that we have to deliver. Adding a loading UI with a whimsical animation of the Ellipsis Education logo and cycling computer science quotes didn't hurt either!
.gif)
