Quotel
Find Quotes that speak to you
Time Frame
6 months
Project Summary
Quotel is a quote-generating application from your favorite books. Quotel's designed for the avid reader who does not have the time to read. It removes the pain of sitting through countless hours flipping through pages.
Role: I developed the UI as a demo for potential investors, handling all aspects of brainstorming, research, design, and testing for the project's UI components.
The Challenge
How might we improve the reading experience?
How can the app produce profitable results?
The Solution
Quotel supplies users with three key feaQuotel provides users with three key features: discovering, sharing, and customizing their favorite quotes. The business requirement was to implement an ads-based concept.
The business requirement was to implement an ads-based concept
Browse for Qoutes
Users can browse for quotes through an exposed dropdown menu and select from different categories.
Search For Qoutes
Search query input allows users to quickly discover quotes from their favorite books.
Share Quotes
Users can quickly share quotes accross all platforms.
Editing Options
Users can customize backgrounds and select from a wide range of pre-built wallpaper.
Phase 1 + Discovery
Research + Interviews
Interviews
I chose this research method to learn more about how users feel about quotes, and how the reading experience can improve.
Insights
-
I interviewed 25 users
-
I was most curious about the number of time participants spend reading at home
-
33% of participants said that they enjoyed learning, gaining knowledge, and discovering information
-
Based on the insights I designed an app that generated the top quotes from the most popular books in the world
Approach
-
In general, would you say that you like reading?
-
Why do you like to read?
-
Why do you dislike reading?
-
If you had to guess, how much time in a day do you usually spend at home reading?
-
Can you give examples of the reading activities you do?
-
What do you read?
Phase 2 + Exploration
Personas + Competitive Analysis + User Flows + Wireframe
Personas
I decided that I need personas to encourage decisions based on real users' needs rather than those of a generic and undefined users.
Insights
The way the persona affected the design was the implementation of an The persona's influence on the design was reflected in the implementation of an exposed dropdown menu, which presents various category options for selection. dropdown menu that displays the different category options to select from.
Competitive Analysis
The purpose of using competitive usability is to see how the app performs in relation to competitors. I analyzed three competitors; Famous Quotes, Brilliant Quotes, and Quote Creator. I wanted to determine which features seem attractive, appealing, or appalling.
Insights
-
Exploring competitors apps allowed me to discover what is working well for them, mistakes to avoid, and different approaches to the same design
-
Insights led to the creation of customized editing options, brand reinforcement, efficient navigation, and visual balance
Famous Quotes
Where is the Search?
KappBoom?
Famous quotes offer over 53,0000 quotes which are accessed via author search; however, the search option is not easily located.
Brand Identity is not clear. I noticed KappBoom displayed throughout the app.
Too much Clutter
The interface is cluttered with actions that have nothing to do with quotes such as "Drink Recipes" and "Cool Facts".
Brilliant Quotes
Efficient Navigation
Users can easily search quotes by author, favorites, top 50 or categories located on the homepage.
No Editing features
Users do not have editing options
Top 50 Qoutes
Brilliant quotes has a rating system grouped daily, weekly and "All time".
Quote Creator
Excellent Editing Options
Users can select from a wide array of backgrounds, pre-built wallpaper as well as customize editing tools
Subscription Options
Quote, creator has a subscription service that increases the background options, removes watermarks and provides more Font options.
Quote maker Vs Quote Creator
Brand Identity is not clear. I noticed advertisements for Quote maker.
User Flows
I decided to make a user journey to demonstrate the usage process of the app.
Share
Insights
-
I chose search query input as the most important user goal to map based on persona.
-
Users like Victoria are looking for the fastest way to access their quotes.
Wireflows
-
Designed wire-framing to ensure realistic system response during testing and to refine the scope of work
-
I did low to high fidelity wireframes
-
I used just in mind to design wireframes
-
I produced 75 Iterations
Annotated wireframes
Phase 3: Testing + Validation
A/B Testing + UI Design
A/B Testing
Approach
-
To conduct an A/B test, first, define the goal or metric you want to improve.
-
Created two versions (A and B) of the element you want to test.
-
Randomly assign users to each group and measure their responses.
-
Finally, analyze the results to determine which version performs better, and implement the winning variant.
Insights
-
The main distinction between these versions is the Call-to-Action (CTA).
-
Version A demonstrated superior performance compared to Version B.
-
User feedback indicates that the UI of Version A is more favorable, suggesting potential for increased user satisfaction and interaction.
Typography
Heading 6
Heading 5
Subtitle 1
Button 2
Captian
Subtitle 2
Helvetica(bold) - 20
GeosansLight (Regular) - 20
Heiti SC (Medium) - 24
GeosansLight (medium Italc) - 16
Heiti SC (Medium) - 14
Helvetica (Oblique -10
Type Scale
Font
Weight
Size
Buttons and States
Created two distinct states for the buttons. A high-emphasis button as the active state accompanied with a medium emphasis button as the inactive state.
Overline
Helvetica (Bold) - 14
Helvetica (Oblique)) - 14
Helvetica (Regular) - 14
UI Design
Color Theme
I decided the default colors would be peach (primary) and green (secondary).
F29E9E
7DD892
0F7639
FFD0CF
BD6F70
4BA664
Customer Feedback
-
I am really proud of the card transitions, using a container transform transition pattern to reveal the entire quote and additional components
-
Users influenced the color profile duotone comprised of two less saturated shades of pink and gray
-
The design achieves business goals because it fit the mature and calm look
UI Approach
-
I was going for a simple symmetric balance display with few components
-
I looked to a variety of online resources for inspiration to get a feel for different app flows and minimal design methods
-
I followed Material design guidelines
-
I use design tools like Sketch and InVision
Logo
The logo is a consolidation of two concepts that strike both sophistication and serenity. The front object resembles a hotel building consisting of loose pages. Users were thrilled with the results.
What have I learned from this project?
Pros
-
The app can streamline the process of generating quotes, saving time for both the business and the customer.
-
With standardized templates and automated calculations, the app can reduce the likelihood of errors in quotes.
-
By using predefined formats and language, the app ensures that all quotes maintain a consistent professional appearance.
-
Depending on the features implemented, the app can allow for customization of quotes based on specific customer needs or preferences.
-
Users can access the app from anywhere with an internet connection, enabling them to generate quotes on the go.
Cons:
-
Developing a robust quote generating app may require a significant investment of time and resources upfront.
-
Building an app with complex functionalities, such as integration with other systems or real-time pricing calculations, can pose technical challenges.
-
Users may be resistant to change and prefer traditional methods of generating quotes, requiring effective marketing and training efforts to encourage adoption.
-
Regular updates and maintenance are necessary to keep the app functioning smoothly and up to date with changing business needs or technological advancements.
-
Storing and processing sensitive customer information within the app may raise security concerns, requiring robust measures to protect data privacy and prevent unauthorized access.