Using JTBD to design a better voting experience for the Kalasha International Film Awards: Part 2
I recommend reading this article and this one(Part 1), to understand the context of this one.
In part one of this series, I broke down how the JTBD framework could be used to better the voting experience for the Kalasha International Film Awards. I dove into it’s ins and outs and applied the 5 step method Valiancy uses to implement the JTBD philosophy.
Today we’re going to get down and dirty with UI elements and wireframes describing how the experience could be implemented. The following assumptions were made while designing the mockups:
- The solution will be a web app accessible via a web browser given the fact that the current solution resides on the web.
- The user will most likely be using a mobile phone to access the voting site.
Plotting the User Journey
We distilled the entire user journey to the following phases:
- Discovery: A users experience from clicking the link and what they meet as the first option. The moment they realise that voting exists and access the platform.
- Exploration: When a user has to view the contestants and identify whom they’re voting for.
- Promotion: The entire experience of voting for a contestant and leaving the platform.
These phases will give context to our visualisations and ensure that any features proposed go toward meeting a common goal.
Discovery Phase
The questions we struggled with at this point were
- Should we give a list of other contestants and allow the user to explore first? Or….
- Should we allow a user to head straight into a category and vote immediately?
One is great if someone just wants to explore, the other if a contestant would like to garner more votes from fans by giving them less friction during the exploration phase.
Landing Page
After a number of sticky notes and back and forth between team members, we settled that the elements on this screen which would allow the user to get the job done would be as follows.
- Probably a header indicating that this is the Kalasha awards voting for context purposes.
- A search button which would display a search page allowing people to search for a contestant.
- Listings of the nominees and their categories.
Search Page
We figured that people would search for a movie or an artist rather than a category. However, the movie or the artist is nominated for a category. So to make results contextual and relevant, we would have the results display the context of the term to help people find the category from which they could vote.
Exploration Phase
By this step, the user has already selected the category and would like to view their contestants category with the intent to make a decision. At a high level, the main visual cues here are the category title and the contestants view.
Since the contestants can only be an actor or a movie, their respective cards will display different meta but will share a similar layout.
Voting for actors
The top visual cues being looked for when voting for the actors are:
- Actor Name
- Actor Picture
- Picture of movie actor was nominated for
Secondary cues which may be great are:
- Their bio
- Movies they’ve acted in.
Voting for movies
The top visual cues being looked for when voting for the movies are:
- Movie Name
- Movie Cover Photo
Secondary cues which may be great are:
- A synopsis of the movie
- A trailer link to it.
Promotion Phase
This is the part where the user has to select a contestant. Our goal here is to:
- Ensure the vote is made quickly.
- Have the user verify their humanity to prevent dual voting.
- Provide a great post voting experience.
Ensure the vote is made quickly.
From the moment a user views the listings of actors and movies, the interface should clearly indicate where to Vote. The following suggestions came forth on how we could accomplish this:
- Have a Star icon with a vote label.
- Have an explicit ‘Vote’ button.
- Make the entire card a clickable entity and have a vote button slide from the bottom of the screen.
We ended up settling for the explicit vote button because we didn’t want people to guess what to do. Making the entire card clickable was down voted because the risk of having “mistake” clicks when scrolling would have been to high.
Have the user verify their humanity to prevent dual voting.
Now that the user has voted for their favourite contestant, they need to show human proof which includes submission of data which would both be:
- Hard to duplicate.
- Time consuming to duplicate.
Our choices were a combination of social login and phone number verification (for those who have the patience to input a unique digit code that would be sent to the phone number, and don’t want to link their social account with the site.)
Post-voting Experience
How should it all end? We could either decide to leave the user hanging or create a loop to keep them within the site for more exploration and have them leave at their own volition.
We decided the screen should allow them to:
- Explore more categories.
- Garner more support for the contestant they voted for by social sharing
A social benefit of this voting experience is that exploration would be a great way to improve the voters knowledge of the Kenyan film industry. Whether a contestant get’s voted for or not, the visual exposure would hopefully allow visitors to find out more about them.
Thanks for reading this far.
Sign up for our bi-weekly mailing list to receive a first peek on how to create an interactive prototype of the screens using Adobe XD.
Before you go
Clap 👏 👏 👏 if you enjoyed this article, so others can find it
Comment 💬 if you have something to say
Follow me Dennis Muthuri to keep up with my other articles
