Author Heba Subeh Hyder’s Website Case Study
My role: UX/UI Designer + Researcher + Developer
Summary
This project’s aim is to design a website that serves as the author’s central hub. The client’s work is sold on Amazon and other stores in countries all over the world. She wishes to provide easy access to her books through her website for local and international buyers. In addition to that, the client offers appointment-based services like speaking events, and book reading events. The client’s goal is to sell her books, merch, and other services through her website. After being diagnosed with MS, she wishes to spread MS awareness through her platform.
Problem Statement
How can we create a ‘home base’, a marketing and networking hub to showcase the author’s work and services so that author can effectively communicate with potential clients. Encourage the clients to buy books directly from her publisher’s website and provide international clients with an international sellers list?
Prototype
Check out Author Heba’s website prototype
Design Process
-
Empathize
This Phase included understanding the problem, empathizing with the client and user, and looking for potential solutions.
-
Research
This phase was about research, understanding the competition, and interviewing potential users.
-
Define & Ideate
This Phase was about defining the solution. Figuring out the information architecture and creating wireframes.
-
Design & Prototype
This phase was about the aesthetics of the products, like the Mood board, color palette, and typography, creating the final screens, and testing the prototype.
Know The Problem
To get a clear picture of all the challenges in this project, I broke the problem/s into HMW statements and came up with their solutions.
-
How might we
Create a strong digital space for Heba, which represents her brand, displays her work, services, and the sellers carrying her books all around the world?
-
How might we
Direct the users to purchase books from her publisher’s website and also give the user the freedom to choose their preferred seller?
-
How might we
Make the initiating booking process simple for the client?
Solution
Build a website for the client, a marketing and networking hub that allows communication between an author/speaker and her potential clients.
A purchase process that directs the reader to the publisher’s website, however also gives them the option to choose their preferred store to make the purchase. Provide the users with clickable links to all the sellers carrying Heba’s books.
A separate BOOK ME page for the potential clients to access the services information provided by the author and initiate the booking process.
User Research
Keeping the above challenges in mind I decided to use the following three research methods.
Competitive Analysis
User 1:1 Interviews
Contextual inquiry
Competitive Analysis
I asked Heba the author about the websites she admires or the websites of her direct competitors. I did my own research and asked the potential clients of Heba about their favorite authors and selected these three authors to compare from the curated list.
-
Kazima Wajahat
Strengths:
Clean and easy-to-navigate Products on the home page with some description gives an instant idea about the books.
Option to customize merch Smooth appointment scheduling.
Quick and easy checkout process.
Weaknesses:
No order tracking options
No way to go back to the main website from the Merch section.
Not enough CTA’s on the Services page.
No reviews of the product
-
Taherah Mafi
Strengths:
Different and Creative
Fun to explore
Access to reviews about each product.
Easy checkout process
Weaknesses:
Creative but confusing CTAs
-
Ruqaya's Book Shelf
Strengths:
Real Images of customers enjoying the book with kids give a fun and catchy vibe.
The simple and easy design makes it quick to navigate through the website.
Donate book option enables the customer to donate the writer’s book to different locations.
Customers can leave a review of the book.
Customers’ reviews are available on the product page.
Weaknesses:
No order tracking option.
No confirmation message when an item is added to the cart.
No, remove/delete item CTA on the Cart page.
2. User Interview
A total of 4 participants were recruited ranging from ages 30 to 45. I mostly choose parents because my client’s target audience is mainly parents who are eager to educate their kids in a fun and creative way. A speaker event organizer was also recruited to understand the pain points of booking a speaker for an event.
Research Insights
-
The product page should have images of the book's illustrations, a table of content, reading level, reviews, and a description of the book on the product page. A link to share the book is a great feature to have on a product page.
-
Users would like to see speaker's availibility, the topics the speaker like to talk about, price, expectations, activities the speaker does during her workshops to engage the kids and parents and a downloadable template that the user can edit and use to invite the audience.
-
A sample or a clip of a speaker’s speaking events on the website will help the organizers make the right decision.
-
Clear display of deals, discounts and perks will be a good way to attract loyal customers.
-
Keeping the booking page simple yet informative will increase the number of bookings.
Design Features
In order to make the best decisions about design features, it was essential to take a step back and get a clear overview of the client’s goals, user goals, technical goals, and common goals. After a brainstorming session, I came up with goals in each category. Based on these goals, a list of design features to be included in the website was curated.
Site Map
With all design goals and features defined, it was time to gather all the CONTENT and organize it in the form of a SITE MAP.
Wire Frames
With Site Map in place now it was time to make some rough sketches and turn them into wireframes, I had drawn the navigation bar in sketches but forgot to wireframe them. They can be seen on the final screens below with all the solutions to our problems.
Brand Style Tile
Now it was time to DESIGN. I brought together a STYLE TILE to get the inspiration for the UI of Heba’s Website.
Major Final Screens
Home Page
I and Heba wanted to give an overall overview of the website on the Home Page. Home Page gives an instant introduction to the author, access to reviews of previous clients, and the number of successful sales. A summary of services is also shown on the home page. A gallery of happy readers and CTA to subscribe and follow author on social media are also provided.
About Page
About Page introduces the author to the clients and also highlights the most important parts of the author’s bio.
Books Page
Books Page showcases the authors books with price, reviews and an ORDER NOW CTA that takes the customer to the publishers website for purchase. There is also a clickable link to other stores carrying the authors books.
Product Detail Page
Product detail Page includes images, additional details of the book and reviews.
Book Me Page
Book Me Page displays the services provided by the author, Its pricing and a CTA to a client intake form to initiate the booking process.
Store Page
Store Page displays the clickable logo links to different stores in various countries carrying author’s books.
Usability Testing
3 participants were recruited for usability testing of the final prototype. All participants found the overall website experience smooth however 2 participants struggled to read the store’s name on the stores carrying my books page, revisions were made after usability testing. 3 participants struggled with finding their preferred store.
Names of the stores were added at the bottom of each store icon.
Since the writer wanted most of the traffic to go to her publisher’s website (PROLANCE), I changed the ORDER NOW to ORDER NOW FROM PROLANCE so the the user knows where the order now tab is taking them, and added an additional tab for more sellers.
Conclusion
Prototype
Check out Author Heba’s website prototype
