top of page
A platform to streamline voting flow of popular contests
The problem
Individual app/website for each program/TV show meant that the user had to download/login to multiple platforms to vote for their favorite contestant.
The goal
To design a responsive web application that provides a consistent and seamless experience to vote and track results of popular events, TV shows and radio contests.
My role
Being a solo project, I had to perform UX research, UX design, wireframing, prototyping and iterating designs.
Tools
Adobe XD
Adobe illustrator
Adobe photoshop
Jamboard
Preliminary survey
Research was conducted on several participants who were familiar with the concept of voting based competitions. It was assumed that the users would be most interested in having a consistent and easy to use platform for voting. Based on the research findings, the needs of the users were classified into two fictional personas.
Further a user journey map was created to outline the users journey, which is attached in the case study pdf.
User pain points:
1
Multiple logins
Almost all websites required the user to create an account to mark their selection.
2
Unwanted downloads
Sometimes a proprietary apps had to be downloaded by the user for a one-time process.
3
Result tracking
Result tracking was tedious as users were unable to obtain any other information apart from the final result.
4
Inconsistent UX
Some programs offered the ability to cast multiple votes by a single user, and the overall user experience would be different for each program.
Insights:
After the research, I came to know that apart from the initially anticipated use case, many users considered the ability to track the contestants and view the results in real time was a game changer and saved them a lot of time. This was another pain point that our app would solve.
Design Process
Sitemap
The main goal of the website is to provide a simple and minimal user experience.
low fidelity design
Paper wireframes
Tried various ideas for each screen and came up with several interface elements for both mobile and desktop website.
Digital wireframes
We aimed for a familiar and easy to understand layout, that offered the expected features in a clear and concise manner
Low-fidelity prototype
Based on the low fidelity mockups, we developed a low-fidelity prototype to test the functionality of the main user flow.
high fidelity design
Initial designs
The user needs and competitive audit report were analyzed and considered in the design of the initial high fidelity mockup.
This design was used to conduct a usability study. The usability study yielded certain crucial insights.
Insights
1
Color scheme
Users reported that the color scheme of the website was not intuitive.
2
Text
Some users felt that the text wouldn’t be accessible in the used color palette
Design revision
The mockups were redesigned with user feedback in mind and ensuring WCAG guidelines to ensure accessibility.
Before usability study
Prototype
The high fidelity mockups were connected together to build a prototype for user testing.
After usability study
Accessibility considerations
1
Color
The color palette has been carefully developed as per Web content accessibility standards and ensures required contrast levels.
2
Hierarchy
The heading size of each text element has been designed for compatibility with screen reader.
3
Minimal user flow
Simple user flow that enables the user to complete the intended task with very few clicks makes navigation easier.
Final design
The design choices of the final design was the result of the brand vision and ensuring accessibility constraints are met. Another round of user testing was done to ensure that the app met user expectations and offered a clear and concise user experience.
The details of the usability study conducted is included in the case study.
Designing for mobile
While designing for mobile, all the user and accessibility considerations were ensured along with brand aspects like consistency and content to ensure that the mobile website ensured an intuitive user experience.
Takeaways
Impact
Most users said the interface is much easier to use and would simplify the current system.
“This is a platform that I would definitely use and I really wish it would be a reality soon!”
- Annie (study participant)
What I learned
Throughout the project I have learned that if we design for users with accessibility needs, it really benefits all the end users of the product. Changing the interface conforming to accessibility standards definitely improved the end product.
Next steps
The user login can be simplified further with option to use social login, so that users need not create a separate account to use the website.
A separate results section would be a great addition. Because it reduces the number of steps to view result of each task, but would reduce simplicity.
An app design can further streamline the process. Frequent users can opt for the app which may have a slightly more advanced interface.
bottom of page