Topeka - a platform to

help teachers teach.

An internationally recognized nonprofit partnered with Artefact early 2019 to create Topeka - a platform with curated resources and AI-powered tools to help teachers teach argumentative writing. I led the design enhancements efforts from inception to launch.  

Main Contributions

+ Design led 

+ Visual Design 

+ Video Production
+ Project Management 

Year

Client

2019 

Internationally Recognized Non-profit

An ongoing partnership

This project was with a non-profit headquartered in the US, that Artefact has worked with for many years.  Within the United States, the foundation is dedicated to expanding educational opportunities in order to lower poverty. 

The project originally started in early 2019 - to envision the future of what an AI-supported writing tool can look like. The first phase of Topeka launched in March 2019, and soon after the enhancement phased of the project kicked off. This program (the enhancement phase) had 2 key objectives.

1

Complete UX and UI enhancements based on teacher feedback from initial launch.

2

Create and execute 2 animated videos that highlight the value prop of Topeka for teachers and students. 

Part 1 of 2  

UI & UX Enhancements

Based on teacher feedback from Topeka's initial launch the enhancements included:

Landing Page

The current landing page (shown below) had useful, but very dense information. From our initial launch, we saw that teachers were not spending the time to read all the text. I saw that there was an opportunity to reduce the amount of text and to use elevate visuals to quickly show our visitors what they can expect from Topeka. 

What we heard

  • There is a lot of text, and information is not scannable. The page takes a long time to read.

  • After reaching the bottom of the homepage the viewer still doesn't have a clear sense of what they can expect with Topeka.

What I did

  • Updated features section so that each key feature is shown with an image of the actual product with simplified UI.

  • Each feature is described in short, benefits-oriented copy. 

Previous Landing Page 

Partners Section

The partners' section was placed at the top of the landing page - although this information is important it should appear after the features section which is more important to our user. 

Features

The features section used icons to represent the actual feature. This was confusing to viewers because after reading the section they still didn't know what the actual Topeka product looks like. 

FAQ

Towards the end of the landing page, the user is quite overwhelmed by information. The FAQ will be much more useful when displayed in just the FAQ section so that the viewer can focus on understanding what Topeka is at this point in their experience. 

Navigation

We heard from teachers using Topeka BETA that the existing navigation did not do a great job representing what the actual page includes. For example, when teachers clicked 'Teach Writing', they were not expecting to see any resources for teaching - which is what the page is actually about. 

What we heard

  • Teachers reported that they were not sure what to expect from each tab from just reading the labels. 

  • The 'Meet Teachers' tab took up precious real-estate and took clients to a page not crucial to the platform (yet).

What I did

  • Reduced the number of tabs in the navigation to just include the most important features on Topeka. 

  • Tabs 'Teach Writing' and 'Browse Prompts' were re-labelled so that the visitor has a better sense of what they can expect from each link.

  • A fly-out menu was added in order to clearly show users what is available beyond each page. 

Old navigation with 3 tabs

Teacher's Assignments Page

When updating Topeka we focused on items that were low development effort but created large customer impact. The teacher's assignment page, where teachers can see open assignments was an ideal place for small, but impactful improvements. 

What we heard

  • When teachers re-assigned an assignment they were not able to tell which assignment was the previous one, and which one was the current one because they had identical names. 

  • The main action in each tile changed depending on the open or closed status of the assignment which led to frustration for some teachers. 

What I did

  • All re-assigned assignments are automatically re-assigned with a date attached to the end of the title. Additionally, teachers will now have the option to re-name their assignment to anything they'd like. 

  • There is now a new edit feature that will allow teachers to add notes to a published assignment, or re-named a published assignment. 

  • All assignments are grouped by prompt and will be displayed in their own section. 

  • The main call to action per tile is just Open Assignment or Close Assignment. 

Existing Teacher Assignments Page

Main Action Button

The 'View Report' button is the same color as 'Close Assignment', this is a small detail that's' been frustrating to teachers. In the update, the main action per tile is either Close Assignment or Open Assignment. 

Re-assigned Assignments 

On default re-assigned assignments take on the exact same name as the previous assignment. This led to confusion for teachers because they were not sure which assignment is the latest one. 

Final Designs

Landing Page 

The updated landing page carefully addresses how Topeka can help teachers.  The main body of the page shows features included in Topeka, and UI of what the features look like. 

How it Works Page 

The two videos produced for Topeka are shown on the How it Works Page. To see how the videos were designed and produced, please see Topeka Videos. 

Navigation

Brand new navigation flyout clearly described the contents in each tab, and also previewed for the viewer the breadth of materials available.

Assignments Page

Every time an assignment is assigned, it is grouped by their prompt. A teacher has the ability to rename an assignment they'd like to re-assign. The main action on each tile is Open or Close assignment. 

Accessibility & Inclusion 

Accessibility in all of the designs were carefully considered throughout the entirety of this project. From color contrast ratios, font legibility to button sizes. All components used in design meet WCAG AA standards. 

Touch Targets

WCAG suggests that touch targets such as buttons should we at least 44px tall. 

Color Contrast

The minimum requirement for large text on a coloured background is 3:1.

Metadata on screen-readers

Metadata should be descriptive for users using screen-readers.

Responsive Considerations

The scope of this project was to focus on a desktop experience. On the hero pages that required more care in order to make responsive screens work we spent more time outlining the page. 

What the team learned 

1

There's only so much churning and iterating a designer can do - nothing beats using user validation to understand if a design is working or not. 

When addressing UX enhancements it's easy to start thinking about designs that are outside of the scope of 'low hanging fruit'. Before investing time on items that were never outlined as a low hanging fruit it's crucial that there is user feedback first - just so we are not re-designing something that might have worked perfectly before.

2

There is no such thing as over-communicating (for the most part). 

On this project, we had partners located in Boston, DC and Seattle. In order to keep everyone informed on the progress that design, dev, and management were making all parties were kept in the loop via email, conference calls and stand-ups. All parties frequently attended each partner's stand-ups to ensure that communication was ​excellent and no partners were unaware of where we were at on the project.