Designing for the Objective

When using software, all users have an objective and want to reach their objective as quickly and efficiently as possible.

What users don’t want is a lazy Sunday saunter through the fields. This means that our role as user experience designers is more like mission control than it is park landscape designer. The more we can design for the objective, the happier and more fulfilled our users will be.

All missions have an objective. Usually, this objective is broken down into smaller segments marked by waypoints or checkpoints. These waypoints provide information, measure progress, and point the traveller in the right direction. Waypoints in user experience design achieve the same things, but in our world these waypoints must be intuitive and are often unacknowledged by the user. In reality, the most effective UX waypoints get out of the way and require minimal “thinking” by the user. In order to help our users achieve their objective and complete their mission we must focus on three things:

1. We must understand our users
2. We must identify the objective.
3. We must design intuitive waypoints.

To unpack these concepts, we are going to look at our recent redesign of the Garbanzo teacher dashboard. Garbanzo is an online education app that teaches language learning through storytelling. After a year in production, we identified several areas we could improve the app, especially for teachers.

1. We must understand our users.

A critical component to a successful software product is an understanding of the product’s users. Any seasoned user experience designer will make sure this is part of the initial design, but a software product of any size requires ongoing understanding of user demographics, behavior, and goals.

In Garbanzo’s case, we conducted a lot of initial user interviews and testing with our teacher groups that helped us build a solid foundation for the application. After teachers had been using Garbanzo for a full school year, it was time for us to revisit those users and identify pain points and opportunities for improvement.

Garbanzo is built for teachers, and teachers have a lot on their minds. Perhaps the most important thing we could understand about our users is that we can’t, under any circumstance, make it harder for teachers to do their job.

Unfortunately, we uncovered several aspects of the Garbanzo teacher flow that were at best annoying, and at worst quite frustrating. Teachers want to be able to glance at their class list and quickly understand how their students are doing. They want to know who’s falling behind, who’s doing well, who needs to be talked to? Additionally, teachers need to easily assign lessons to students, and be able to monitor and manage those assignments as the semester progresses. Essentially, our objective is to make Garbanzo as easy to understand as a teacher’s gradebook.

User experience design tips:

• Create user personas and profiles as part of the initial user experience design. Revisit these profiles on a regular basis and adjust the design as necessary.
• Conduct real and regular interviews with a focus group or user group that reflects the primary demographic breakdown of the software app. We’ve found success establishing a Facebook group where we can collect ongoing feedback.
• If possible, watch users use your software so you can see where potential holes or UX breakdowns might occur. Give them objectives and see if they can complete the job efficiently and intuitively.

2. We must identify the objective.

Garbanzo is a utility product, a tool used to complete a mission. If we don’t accurately identify our users’ objectives, we won’t know if our product is helping our users or hindering them from completing their mission. And if we fail, our users will simply stop using the product which will result in decreased revenue and the potential of a failed business. By monitoring and soliciting feedback from our teacher group, we identified the following objectives and placed them in order based on priority:

1. Teachers want to create classrooms and add students to a class
2. Teachers want to quickly assess a class’ progress and identify any students who may be falling behind or having difficulty learning the material
3. Teachers want to assign lessons to a class and/or individual students
4. Teachers want to monitor and manage all assignments for a class and/or individual students

In our initial design, teachers were able to accomplish all of these objectives. The functionality was there, but we recognized that teachers would often have to take 3, 4, sometimes even 5 steps before they could complete an objective. Worse yet, some teachers couldn’t find information like lesson progress, which was buried several table views deep. This resulted in flustered and frustrated teachers.

To solve these problems, we recognized that the Class List view should be a top-level view, and that we should adjust the data in the table to reflect class and assignment progress. This helps teachers quickly ascertain how their class is doing.

As a primary objective, teachers can assign lessons to the whole class through our redesigned assignment modal. There is a lot of information contained in this modal, because teachers have to select a class, select date ranges, and assign lessons — we also had to support common behavior of assigning multiple lessons at once. View Modal in Action

As a secondary objective, teachers can quickly access all assignments for the class in a refactored sub-navigation, and can drill into an individual student’s profile by clicking on their name. They can then assign lessons to that student and view additional information specific to that student in their profile. By consolidating pages, or completely removing sub-pages altogether, we created a much simpler teacher flow that puts the main objectives at the forefront. This reduces user fatigue by creating a more intuitive user experience.

UX tips:

• Identify the jobs your users want to complete. Can your users currently achieve those objectives quickly and intuitively in the current design?
• Identify if new features need to be added, or if existing features can be refactored.
• What actions need to be moved to a higher level and/or what actions can be demoted or removed altogether?

3. We must design intuitive waypoints.

In user experience design, waypoints are most commonly navigation components or action buttons. Often, we designers try to cram too much into the navigation, or include ALL possible actions on the page. We don’t intentionally mean to be lazy, but this is just lazy designing. The result is a convoluted, unintuitive interface that requires too many steps to achieve the objective. Which, at the end, produces frustrated and fatigued users.

As we interviewed and empathized with more teachers, we understood that their primary objective is to understand how their students are handling assignments. What are the assignments, are students on track, who is struggling, who isn’t paying attention? Additionally, teachers’ primary action is to assign new content to their class. Both of these concepts are buried under drop-down navigation components combined with less important information in the table view.

In the redesign we sought to accomplish several things. First, we changed what information is displayed in the table view so teachers can quickly review class progress and status. Teachers can then view individual student progress by clicking on that student’s name. We removed all drop-down navigation and instead moved “View Assignments” inline — we determined that while this was an important action (as it allows teachers to view and manage assignments), it was not as important as the primary action and thus did not require the same hierarchical treatment.

We worked with our teacher group to identify the primary action as “Create Assignment,” which we refactored into the only primary CTA button on the screen. This fires a complex, but well designed modal that offers teachers all the functionality they need to assign content to their students. The functionality remains the same, but by refactoring the design we’ve created a much more intuitive flow that reduces user fatigue and helps teachers complete their objective faster. Win, win.

UX tips:

• Identify the PRIMARY action and make sure this button is presented as the most important element on the page. Often, this requires a refactoring of visual hierarchy within your design system.
• Identify the SECONDARY actions. Explore where they should live and how to visually represent them (that does not contrast with the PRIMARY components).
• Where possible, keep sub-navigation to <3-5 items
• Where possible, break out sub-navigation links inline instead of behind drop-downs

We are thrilled to be a part of Garbanzo, and love seeing both teachers and students thrive. If you have an EdTech software product or education website that needs design or development, we would love the opportunity to connect with you.