2014

DUVERGER TABLET APP 

Can we create an engaging learning tool that simulates possible electoral outcomes?

Role

Product Designer

Team

3 Product Designers
Product Manager
Subject Matter Expert
QA analyst
3 Developers

Responsibilities

Research
User Experience
Visual Design

Overview

Duverger is a side project that I worked on with 8 friends. Our design team was responsible for UX and Visual Design as well as the identity of the application. Project Duverger is an instructional app for exploring the relationship between voter preference, different types of electoral systems, and the outcomes of legislative elections. By manipulating different variables, users are able to observe the effects of different electoral rules and voter choice on electoral outcomes. Project Duverger (named after Duverger's Law) serves as both an in-class teaching tool and an out-of-class learning tool. A prototype was released in January of 2015 and was presented at various political science conferences.

Goals

Product Goals

1. Provide an in-class teaching tool for instructors to use to complement studies on electoral systems and voting behaviour.
2. Provide an engaging out-of-class learning tool for students that would allow them to recognize relationships that may be beyond their ability to describe mathematically, but which are nonetheless important for understanding the impact of electoral institutions on voting behaviour and election outcomes. 

Research/Brainstorm

After reading the detailed documentation and hearing a lecture by our subject matter expert (SME), we brainstormed ideas for the app and sketched the stronger concepts. As we didn't have direct contact with users, we worked closely with our SME to understand the core use cases and how he envisioned the tool would be used by lecturers and students.

Below are images from our initial brainstorming session and some initial paper prototypes.

Wireframes

From the paper prototypes, we created rough wireframes in Sketch. Some of the key features we needed to include were the various party choices (their top choice along with preceeding options) as well as a visualisation showing the results and a clear indication of the winner. We also knew early on that an onboarding experience would be necessary if we wanted students to explore the app out side of class. 

Branding

The design team worked in parallel, creating wireframes as well as developing the visual branding. I was responsible for the colour palette and UI components while another designer created the logo design and another, the type styles and icons.

Below is our style sheet. 

User Testing

Before getting bogged down in adding more features we applied the visual design in order to have a prototype to show teachers and students. We ran an unmoderated test using Google Forms which participants accessed via a link in the app. We asked them to completes a series of tasks and answer a set of questions.  

Below is the main design we tested.

We tested 17 users and were fortunate to have a good range of demographics across gender, age ranges (from 17-50 years old) and institution types. Of the roles, we had 6 teachers, 2 teacher's assistants and 9 students. This provided us with some interesting insights and patterns.

1. While the majority of participants were able to complete the tasks set there were some users who struggled, specifically with tasks requiring the information tab. Looking further into this we found 5 of the 17 participants found the app challenging to use without reading the instructions first and of these 2 participants (a teacher and teacher's assistant) couldn't find the info tab at all.
2. 6 users (all students) were confused by the percentage value when adjusting the number of voters. They expected to adjust a number, not a percentage. After consulting our SME we decided to make this change in the final design. 
3. All bar 1 participant understood which initial represented which party. This was common knowledge in their field and feedback we incorporated back into the final design. 

Notable quotes:

"Duverger is very easy to navigate, and is simple to understand assuming the user has basic knowledge of elections."  –STUDENT

"I find it very interesting. There are a few things that need to be fixed. But having played around with it for five minutes - and I am not good with these things - I got it!"  –TEACHER

"Tried to look for instructions about the app or basic information - I could not find it."  –TEACHER

"Pretty fun to play around with different random numbers of votes and see how a majority election would turn out."  –STUDENT

"A little difficult to use at first. I think that websites that use videos to help explain how things function are more effective than just descriptions with pictures. "  –STUDENT

"I really like this project and think it's a smart idea and a really great tool for instructors."  –TEACHER'S ASSISTANT

Final Design

Below is the final design. Notable refinements to the layout were:

1. Removing the party names and just using the initials as concluded from our user testing.
2. Removing the sincerity slider. This wasn't necessary for the MVP and was a feature we postponed to version 2.
3. Changed percentage of voters to number of voters to reduce user confusion as per user testing results.
4. Added the mechanism for changing the number of voters to include arrow buttons, also triggered by the keyboard.
5. Added a clearer indication of the formula applied and the total number of voters.
6. Changed the winner indication to a disc which eliminated gender bias and allowed us to include the party initials.
   

Info Panel

As mentioned earlier, a key piece of our MVP was the information panel. In order to make the panel more prominent for first-time users, it was expanded upon launching the app. This would only happen when you opened the app for the first time, after that the panel would be collapsed by default. We also changed the styling on the tab trigger so that it was more noticable in its collapsed state. 

Below is a slideshow of the different states of the information panel.

Next Steps

Duverger was shown in 2015 at the Annual Meeting of the Midwest Political Science Association in Chicago IL and in 2016 at the American Political Science Association's Teaching and Learning Conference in Portland, OR. Our subject matter expert received a lot of positive feedback and (naturally) a list of feature requests!

While the team is currently taking a hiatus, planning has been done for version two as well as some preliminary designs.