Qtoniq

A unique way to read quotes

About the project

One day, one of our friends was feeling little low and needed a dose of Serotonin - a happiness hormone. He started browsing for apps on Play Store to read motivational quotes from famous people and movies/tv series. Based on the download counts and good reviews, he downloaded some of them. However, when he looked at all the apps, he could not find one which had a good user experience and quality content. He decided to take the challenge of developing it and he approached us for the help.

Project Scope

Mobile App Design and Branding

Timeline

6 months

Client Location

Hyderabad

Brand Identity

Logo Design

A good logo always transcends the right message about the company and its area of functionality. For this project, we wanted to design a simple logo without any convoluted curves or shadows. We sketched many ideas on the paper and finally decided something which was simple and intuitive. As our focus was on displaying quality quotes, we used the word Q inside the quotation marks with closing quotation mark on the right bottom.

It represents Quality Quotes.
The final logo looked like this on various backgrounds.
Typography
To remove all distractions, we selected a color palette with only 4 colors to make the interface simple and clean. We used Josefin Sans for quotes to give an elegant look and Cabin for other text for high legibility and readability.
Product Design
Competitive Research
At this step, we started learning about our competitors. We searched for similar applications on Play Store. There was a plethora of applications available doing the same thing we were planning to do. We filtered some of the applications based on the download count and started analysing them in terms of UX and UI. After complete analysis, some of the important insights we found which required immediate attention were:
  • Overload of content without focus on quality content
  • Poor user experience
  • Ads were not placed strategically
These issues resulted in decreased retention rate, more uninstalls and an unhappy user base.
The Problem
One thing was clear after the competitive analysis that there is a huge demand for an application that can motivate, inspire and humor people through its quality content.
But the problem with the current applications was —
Lack of good user experience and quality of content.
Ideation
By now, we had a clear definition of the problem we were planning to solve. So we started brainstorming. We discussed various solutions that can potentially address the problem. Some of the points came out from these sessions were:
  • Content is the king. Strive for the quality rather than quantity. People always stick to the applications which provide quality content.
    “Create a database of quality quotes and liners from famous people, movies and tv series.”
  • People don’t want everything on the screen. They come to read good quotes for inspiration. Overwhelming them with many options would result in low retention rate.
    “Design simple yet elegant interface which respects user’s need.”
  • Advertisements are always annoying irrespective of where they show up in the application. However, they are the best options for bringing revenue and keeping the application alive. Challenge was to find a way to use them without affecting user’s journey.
    “Incorporate advertisements in the design without distracting user’s attention and reducing efficiency.”
Design
With above points in mind, we started working on the designs. We conducted many design studios with the team and sketched various ideas on the paper. After continuous iterations, we decided to have a clean card view covering most of the mobile screen space having one quote on it at a time. This would help users to keep their attention on the content all the time.

Conventionally, to read a quote, users have to select a particular author or tag from the navigation which would show all the quotes as selected, and through swiping right/left or top/bottom they would see all the quotes. To select a different option, they have to follow the same steps again. To reduce this friction, we introduced spinner concept which would allow users to see random quotes on a single click.

Once all the screens were finalized on the paper, we converted them into high fidelity wireframes. Some of them are:
Tools and Technologies
Tools
Whiteboard, Pen/Paper, Trello for project management, Figma for wireframing, Illustrator for icons/graphic, Origami Studio for prototyping, Dropbox for storage and paper for documentation, Android Studio for application development, Android mobile for testing, Buffer for marketing, Vimeo for video storage, Slack for communication.
Technology
React and Ant design for Admin pages, Firebase for hosting, database and analytics, Java for Android application.