UX-UI CASE STUDY

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Problem Statement

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Possible Solution

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Project Duration

10

Weeks

6

Pages

14+

Screens

Tools Used

Figma
Adobe XD
Illustrator
Photoshop
InVision
Material Design

Process & Time

Design Process

Discover

User Research
User Interviews
Competetive Analysis

Define

User Personas
Empathy Map
User Journey Map

Ideate

User Flow
Card Sorting
Information Architecture

Design

Wireframes
Hi-Fi Designs
Prototype

Testing

Feedbacks
Conclusion
Future Concepts

Process & Time

Skope Of Work and Timeline

Discover Phase

#1 Discover Phase

Stakeholder Interview

Even after recieving a Creative Bref for the project, conducting a stakeholder interview is crucial. Becouse it helps to make the right decisions, avoid end moment disappointments, and changes to create the right product. Here are few quearions.

  • Q1. What Are The Goals, Values, And Vision Of Your Company?
  • Q2. What Are Your Growth Metrics For The Next 1, 5, 10 Years?
  • Q3. What Problem Does Your Product Solve And How Commercially Viable Is It?
  • Q4. What Are Your USPS (Unique Selling Points)?
  • Q5. Who Are Your Users? What Are You Trying To Help Them Achieve?
  • Q6. Who Are Your Competitors? What Do You Like About Them?
  • Q7. What Is The Research That Has Already Been Done?
  • Q8. Are There Any Design Constraints? If Yes, What Are They?
  • Q9. Are There Any Technology Constraints? If Yes, What Are They?
  • Q10. What Are The Deadlines For The Project? What Is The Process Of Approval For Design And Who Will Be Approving Them?

#1 Discover Phase

Design Strategy

Discover Phase

Design Strategy

1. Executive Intent

This project is all about making users order their desired books. Users can browse and also read the books of their choice. In addition to that, they can also get author’s information at the same time. Moreover, they can freely browse through books like they do in a library or a store.

2. Target Audience

Working professionals, students, Housewifes, basically all the active book readers, and bibliophiles. It also covers kids and teenagers who love to read fantasy stories or comics. (Male, Female, Transgender, Working & Non-working both, All Ages.)

3. General Tasks

The Major task is of selling books. Other than that users can browse through different sections and categories of books and can also read the Preface and Introduction of the every book online. Users can also create sign up to create an account to track everything.

4. Technology Constraints

Internet, Smartphones, are required. Small towns might have network issue.

5. Cross Channels

All Platforms: 105, Android and Web platforms. It can also work on TVs, Laptops or Tablets.

6. Marketing Goals

Increase Profits, Leverage Social, Publishing content, User referrals.

#1 Discover Phase

Competitive Analysis

Competitive Analysis is a strategic management is an assessment of the strengths and weaknesses of current and potential competitors. I did a research looking for similar products & compared 5 websites of which 4 of them are strong.

#1 Discover Phase

Qualitative Analysis

I Interviewed some of the friends and family members who love to read books & also people who are students, and passive readers. I interviewed them over video calls & phone calls by using zoom, Whatsapp & Google duo platforms. In total there were 9 participants with whom I got an opportunity to talk with & gather some insights about their challenges & motivations. Here are few general questions that I included in all the interactions.

  • Q1. Describe your typical day and what do you currently do?
  • Q2. How often do you read books?
  • Q3. Which is your favourite book? and why?
  • Q4. What type of books do you read generally (the genre)?
  • Q5. Did you buy books or rent it from a library?
  • Q6. How do you buy your books?
  • Q7. Which online platform do you buy books from?
  • Q8. What is that one thing you like the most about that website?
  • Q9. Are there any challenges you face while using the website?
  • Q10. Did you like to read Preface of the book while buying it or maybe details about authors?
  • Q11. Do you keep the books as a collection or sell it?

#1 Discover Phase

Quantitative Analysis

I did an online survey using Google Forms to observe any pattern and similarity in what the potential users may want. A total of 56+ people responded to the survey which assisted us in frame the problem correctly. Given below is the Google Form I prepared for the User research.

#1 Discover Phase

Analysis Of The Responses Recieved

I did an online survey using Google Forms to observe any pattern and similarity in what the potential users may want. A total of 56+ people responded to the survey which assisted us in frame the problem correctly.

#1 Discover Phase

Gathering Insights

I always like to buy new books evry month to increase my collection.

I use online shopping apps a lot to buy all the household products.

I have a habit of going to offline stores and read introduction of a book.

I like to have good offers and deals on the new books I purchase.

I always read news on new book publications and top books to read.

Books I want are not always available online, I always checking.

#1 Discover Phase

What Are The Paint Points?

No apps other than amazon available to buy books online.

I don't any good offers or discounts on the multiple purchase of the books.

Have to search for the reviews about a book on different websites.

Don't have much options to choose from, many of them are out of stock.

Takes too much time to deliver, or recieve them in a bad condition.

Payment gateaways never feel safe on these websites, which I never heard of.

Define Phase

#2 Define Phase

User Personas

I created two different User Personas based on the target user group and all the information gathered by the research. I was able to create two fictional characters who represent the target user groups of the website.

SANJA PETROVIC

 

AGE                         34
EDUCATION           Graduate
STATUS                   Married
LOCATION              Belgrade
OCCUPATION        Designer

{

“Passionately enthusiastic about books, books are better than Social media or digital media”.

Personality

Introvert Creative Caring

Professional Organised

Bio

Anisha is Interior Designer and working independently, she loves to read books and has a huge book collection. She always buy book from offline stores.Because of her work load, she is unable to visit offline stores.

Motivations

  • Get physical books whenever required rather than e-books
  • Reading physical books gives more satisfaction
  • Once the book is finished get another one
  • Likes to read all category of books, but mostly design books
  • Likes to know the detaliled description of books.

Goals

  • Get physical books online at a low cost
  • Get recommendations of new books in market
  • Should be able to buy multiple books at one time

Pain Points

  • Visiting offline stores to buy books everytime is not possible
  • Browsing categories in offline stores is difficult
  • Buying books everytime is expensive and get no discounts
  • Do not get any book recommendations or new books info.

MILOS SRECKOVIC

 

AGE                         34
EDUCATION           Graduate
STATUS                   Married
LOCATION              Belgrade
OCCUPATION        Designer

{

“Books are the quietest and most constant of friends; they are the most accessible and wisest of counselors, and the most patient of teachers”

Personality

Lively Positive Ambitious

knowledgeable Helpful

Bio

Milos is a teacher in high school and loves to read books on daily basis, he loves all the categories but books of wisdom knowledge and positivity are his favourite categories. He also encourages his students to read books.

Motivations

  • Likes to be a member of readers community
  • Likes to ask feedback about books and also like to give them
  • Loves to explore more about new books
  • Belives in learn ing new everyda by reading different books

Goals

  • There Should be a platform where you can read news related to books
  • Get more suggestions according to the categories
  • Can be able to pickup books from off stores once ordered online.
  • Can get notifications on the stock of the books wishlisted

Pain Points

  • No proper details available of the book online
  • No place to read news about the book readers world
  • Not able to recieve books early
  • Not able to read reviews of the fellow readers about a particular book

#2 Define Phase

Empathy Mapping

In order to get a deeper understanding about User Behaviours and decisions, I used Empathy Mapping Method. An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. It externalizes knowledge about users in order to:
1) Create a shared iderstanding of user need.
2) Aid in decision making.

Loves her work & provide design solutions to her clients following the time- line given to her

She keeps her body healthy and fit by regular exercise & healthy eating habits

Watch online documentaries and look out for new books and magazines to read

Reads novels and magazines regularly and buys them on monthly basis

Loves her work & provide design solutions to her clients following the time- line given to her

Likes to drive & take long drive with her loved ones, also like to do shopping sometimes

Reads Blogs and articles on different websites in her free time

Always checks for good deals and discounts on the products she shops online

What does the user?

SAY & DO?

What does the user?

SEE?

What does the user?

THINKS & FEELS?

What does the user?

HEAR?

She tries to control her expenditure and think of how to save money to buy valuable products

feels Frustrated about losts of social issues that are currently happening in the country

Hears about complaints from her family to spend less money

Listen to podcasts on spotify

Feels concerned, about the health of her family and friends and takes good care of them

Always thinks that she need to be more focused and organised in her work

Hears reviews about different books and articles from her friends

Hears about what social media influencers talk about design and style

Likes to volunteer in different projects and social activities

Spend a lot of money on shopping prodcuts and need to reduce the amount of products that he can buy

Browse through lots of apps daily to maintain his fitness and manage time accordingy

Reads news and articles online and offline as well

Like to utilize his time in doing productive things and keep himself busy

Likes to teach his students and encourage them to spread the knowledge gained more

Visits library daily to read and browse through books categories

Reads blogs and articles for wisdom and meditation to keep him mentally healthy

What does the user?

SAY & DO?

What does the user?

SEE?

What does the user?

THINKS & FEELS?

What does the user?

HEAR?

Its Irritating for him to see high prices and no discounts on the books he wants

Tired of waiting for the books he wants in his nearby library and gets no updates on the same

Thinks about how to give his students his best to share his knowledge with them

listens to podcasts and music in free time

Peace of mind is important and always thinks about different ways to keep him mentally positive

Thinks about how to give his students his best to share his knowledge with them

Hears about different apps and articles from his friends and family

Hears about different courses and skills to learn from his friends and colleagues

#2 Define Phase

User Journey Mapping

Based on the User Research I have created a Customer journey Map is to better understand the crucial Pain Points, challenges, mindset and overall journey which user may encounter while buying a book. And list down the opportunities.

Finding a Software

Purchasing

Post Purchase

#1 Awareness

The need for a software tool

#2 Research

Finding the right software

#3 Compare

The best solutions on the market

#4 Choose

Buying the most suitable solution

#5 Feedback

Best marketing is a good referral

  • Are there any new books that I like?
  • Are there any new books that I like?
  • Can I get a book of a particular Genre?
  • I’ll Quickly look for the book that I have in mind particulary
  • I’ll Quickly look for the book that I have in mind particulary
  • What other books will I be interested?
  • Which books are the best sellers
  • Do I have any coupon code to get discount?
  • Why do need to sign in?
  • Can I purchase it as a guest?
  • Are there any discounts on any particular payment method?
  • Are there any options to get delivery faster
  • Are there any gifting options
  • Can i pick up the item at Store?
  • Can’t wait to recive the books
  • I hope I haven’t made any mistake.
  • Where is my delivery?
  • Why I still havent recieved my order?
  • I hope the package doesnt get damaged
  • Finally new books added in my collection
  • New books to read and gain knowledge
  • Unsure about what new books are there
  • Unsure about the price of book
  • No suggested books or best selling books displayed
  • Can’t find the book
  • No proper search filters to narrow the results
  • Site is diificult to browse
  • Over cluttered website
  • Can’t find any result on the Out of Stock books
  • Cant apply an existing coupon on the order
  • Unaware of price added to the order total.
  • Unsure why do I need to sign in?
  • Too many steps for oredering books
  • No discounts on payment options
  • Not many options for payments
  • No Free Delivery
  • No alternative delivery methods
  • No fast or same day delivery
  • Not sure what to do next
  • No proper information of the estimated delivery or the track order option
  • Unsure about the delivery status
  • No notifications of the delivery
  • Delivery arriving late
  • Wrong book recieved and no option to return the book
  • No clear information to give a feedback
  • Regularly Update users on new books, bestsellers, Offers etc.
  • Visual book suggestions based on common search queries
  • Provide additional search filters
  • Provide suggestions according to keywords
  • Customised book recommendations on homepage to reduce the need to navigate
  • Reorganise layout
  • Reduce the number of CTA’s to provide aesthetic experience
  • Provide detailed information about the total amount, including the taxes
  • Suggest reasons to Sign in or Sign up for an account
  • Create a simple and relevant Checkout process
  • Promote membership options to get discounts on every order
  • Give ore number of payment options and suggest which is used frequently
  • Keep the process simple & trustworthy
  • Offer free delivery options
  • Also offer offline store Pickup
  • Offer same day delivery options / early delivery options
  • Inform clearly about the delivery date to the user
  • Allow users to make changes in the order
  • Records user preferences to personalize book reccomendations
  • Display delivery status when user visits the website
  • Provide notifications about the step-by-step delivery status
  • Follow up on users feedback and reviews of the books
  • Offer return visit voucher
  • Provide options to return or replace book if user wishes to return the book

#2 Define Phase

Brand Attributes

Brand Attributes are the core values that define the overall nature of the company and represent the essence of the brand. They are the set of unique fundamentals and characteristics that identify the physical, character, and personality traits of the brand in the market and in the minds of the customers.

Culture

Customer

Voice

Benefit

Value

Diversity

Friendly

Discipline

Positivity

Hospitable

Spontaneity

Fun

Fascination

Grounded

Adventorous

Social

Exploration

Evolution

Perception

Change

Intelligence

Knowledge

Harmony

Personal development

Patience

Integrity

Connection

Enthusiasm

Resourcefulness

Inclusive

Quality

Satisfaction

Trust

Uniqueness

Happiness

Ideate Phase

#3 Ideate Phase

How Might We Statements

How Might We (HMW) questions are the best way to open up Brainstorm and other Ideation sessions. HMW opens up to Ideation sessions where you explore ideas that can help you solve your design challenge.

How might we gain the trust of the user in this product?

How might we create a thriving collaborative space in this tool?

How might we create a clear, easy to consume UI?

How might we develop a site that helps them be productive and not waste valuable time?

How might we develop a good content strategy to make the tool’s information relevant?

How might we improve the search function to accommodate the use cases that are relevant to users?

How might we encorporate news section into the product?

How might we create a minimal experience to get the information they need quickly?

How might we make the user come back to use the product again?

#3 Ideate Phase

User Flow

User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product.

Scenario: User had heard from his friend about Bookista online book store for online books shopping and decides to try out & Buy some books.

Scenario

User had heard from his friend about Bookista online book store for online books shopping and decides to try out & Buy some books.

#3 Ideate Phase

Card Sorting

Card sorting is a UX research technique for discovering how people understand and categorize information. Card sorting creates a foundation for robust information architecture which allows for the creation of a navigation system that matches users expectations.

Homepage

Category

About Us

Navbar – Menu, Search, favourites, Cart, account

Hero section -Best sellers, statistics, CTA (browse collection)

Filters (Genres & Editors pick should be at top)

Sort by icon, list & grid view icons, number of books

Hero section giving two lines of info about the store

Missions & Goals

Company features tab, or services

Trending books this week or month section or bestsellers

Book front page & two liner information

Discounts & offers, CTA to add to cart or view book

History about the company

Customer reviews or testimonials

News section showing atleast 3 news

Testimonials section & subscribe to newsletter & discounts

Books on sale list or similiar books section

Books on sale list or similiar books section

locations of the offline stores

Services or features & news section

Product Page

Cart Page

Checkout Page

Gallery of 3-4 images of the book

Bold price & offers /discounts

List of all the books in list view

Mention offers/discounts applied, also free delivery if applicable

Add the Buyers info (name & Address)

Payment options (buttons) / CTA to place order

Detailed description, author name, publication etc

Multiple select books button & Add to cart btn

Add option of entering a coupon code

Detaiked description of price breakdown

Including inormation on safe and secure payments

Services & features

Product details & customer reviews tab

“people who buy this also buy these” section

Gift wrap option (making as a checkbox)

Option of delivery at home or offline pickup

#3 Ideate Phase

Information Arhitecture

information architecture is the practice of deciding how to arrange the parts of something to be understandable. Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort.

Design Phase

#4 Design Phase

Lo-Fi Wireframing
(Paper Sketches)

Once I organised all my insights from the Ideation phase, I began to design the website. To start this process I began to sketch several of the site’s main screens, using my user flows as a guide. This allowed me to quickly explore several concepts for the website layout. I then tested this with 3 participants to validate whether these solutions addressed both the user and business needs.

#4 Design Phase

Hi-Fi Wireframing

Based on the feedback and personal insights I learned from the sketching phase, I began to design my first wireframes using Figma. I made sure to prioritise the features that would best address the needs of the users throughout the website.

Home page Wireframe

Catalogue page Wireframe

Payment page Wireframe

My Cart page Wireframe

Catalogue page Wireframe

About Us page Wireframe

#4 Design Phase

Design System

A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. The primary benefit of design systems is their ability to replicate designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements over and over, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

Color

Typography

Grid

#4 Design Phase

Hi-Fi UI Design

On the basis of all the User research & analysis, I created the final UI Design prototype. Below you can find my initial explorations into how this visual style might look. It is a MVP( Minimum Viable Product). I wanted the visual design to emphasise these core values: simplicity, creativity, and tradition. I created a Mobile Responsive version as well to keep in track with the current Design Trends.

Testing Phase

#5 Testing Phase

User Feedbacks

I used the prototype to conduct a test with our users in our target demographic. Participants were able to use the app with ease and happy with the design. There were few Positive & negative feedbacks. This helped me uncover opportunities to improve the overall user experience by building an effective, efficient, and enjoyable experience for my users.

Negative Feedbacks

Menu should be visible upfront, its difficult to find at one go.

I don't like the colors, its overwhelming me.

I didn't find the About us button, where I can read about Bookista & locate the stores.

Editing address or name shouldnt be a priority on the payment screen. It can be previous or next step.

Positive Feedbacks

I like the way everything is easily accessible, none of the online book stores provides such experience.

I love how all the information is provided of every book, i don't need to go to other website.

Adding news section is great. I love that idea.

Colors look fresh and website feels modern. Also has all my fav categories listed.

#5 Testing Phase

My Learnings

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

It was a fun yet quite challeging experience working on this project, also thanks to all the people who agreed to give me their valuable time for my research. Learnt lot about diversity of opinions which eventually taught me the Importance of User Research.

Various new concepts got added to my UX process, such as Customer Journey Mapping, User Flow, Card Sorting, and Information Architecture. I learnt all of them during the process, & it added lots of value to the research data I collected. It narrowed down the process a lot.

I Learnt the importance of Stakeholder interview, It actually minimizes the pressure and anxiety during designing & lets me think about Users needs and goals clearly.

I Learnt importance about asking appropriate questions to users, to get the correct data. And not getting too much confused.

Also learnt different tools like Miro, Figjam, Notion etc. They played an important role in gathering and sorting down all the required data and ease the process.

Also learnt lot of new features and tricks with figma which can definitely improve my work on the next project I will work on. And can make the process faster in future.

And most importantly I learnt “no design is perfect, there is always a room for improvements”.