Moods App UI design

Moods Overview

Voting App would be catering to users who are interested to do surveys, quickly. Users post the questions on the application in English (default language) or the language of their choice. Other users will respond to those questions by upvoting or downvoting and can see the results of these questions on their application. The application is intended to be built on Android and iOS platforms while a WebApp will be built for Administration purposes.

The Challenges For Us

The challenge that we would like to highlight is ensuring that at every given point in time, there were zero cognitive loads for our users. Being information and data-heavy site with modules such as voting questions, user management, question, and answer management; we needed to create a logical information structure and data grouping to ease understanding.

Define

It was extremely critical for us to do on-ground user research and understand the real emotions, motivations, pain points and triggers of our users. Being a mass application, the logical question was a grouping of the users; hence, after intensive research, the team came up with a logical grouping based on the interests that users took into cricket. Research also showed that users had higher player eccentricity. Next, we worked on the user journey and flow of the voting app. What was important was to consider that we do not overload the data to users and at the same time serve each user group at every given touchpoint.

Design

We have opted for a card-based layout to provide a clear understanding of different types of information. Also, since its a data-heavy app with different questions and information its easier to guide users with a card-based layout.
To ensure the scalable design we have maintained strict grid lines across the mobile and web app version. This has helped us to reduce the development time and allows the team to plug and play the cards across the platforms while maintaining design consistency. This approach also allows the moods app to scale their data sets in the future without being dependent on an external design agency.

The overview of the design is shown below :

Typography

We have used the following font sizes for designing the moods app :

16px – absolute minimum for text-heavy pages

18px – a better font size to start with. You’re not printing out a single-spaced Word document;
you’re writing for people sitting a couple of feet from their decade-old monitors

20px+ – may feel awkwardly large at first, but is always worth trying out in your design app.

Wireframes

Conclusion

We spent a lot of time understanding users and discovered there were many small things and multiple pain points that were not catered to. Team Hybrowlabs, helped transform those pain points into features and we have received a lot of appreciation and positive feedback.

 Final design is available for review at: https://www.figma.com/file/wj9f7yJbV3ZuwrtNYk2ipi/voting-app-ui

Subscribe To Our Newsletter

Get updates and learn from the best

Other Case Studies

small_c_popup.png

Awesome!

Submit Your Profile