Digital world has so much influenced all of us in such a way that reading books and searching books are not exception. People choose to go with digital books, audio books, similarly online reviews, audio reviews etc. When I was new to design it was difficult for me to find out design resources at a single place. Same problem was found out by a start up company called ‘Design Practice’ and they wanted to help the design people. I was lucky enough to get assigned into this project.
About Design Practice:
Design Practice is a new UX enthusiasts startup, based out of Bengaluru, India. The team strongly believes that the “Design is one”. One of the best practices to create better designs is through learning good and bad UX’s in the current market. Design Practice is establishing in the market through its unique way of “Design reviews”. It is allowing new design users/students to learn through its remarkable user experience called “good UX and bad UX”. You can visit their website at https://www.designpractice.io/
Problem statement:
People who are new to design, always find difficult to search the right resources to start with. After finding the right resources, it is not easy to decide the priority order to go through the resources. So, Design Practice want to help people who are new to design field by providing a section in their website for “book review”. The Book review section will have all the needed information related to design books. This will help the user to make a list of “good reads” according to their interest. This will also help to decide the priority order to read the books.
Design challenge
“How might we help design interested people to select and prioritise the books for their ‘to read’ list?”
Project Goal:
To design a responsive ‘book review’ section for Design Practice, in order to help its users to browse and read the interested design books.
Assumptions and Hypothesis:
‣ Right now, there is no place where a user can find all design book details at one place.
‣ There is no place where a design user can see in detail reviews about all design books.
‣ There is no place where a user can decide where to start with depending on his interests and knowledge level.
‣ There is no place where a design user can see in detail reviews about all design books.
‣ There is no place where a user can decide where to start with depending on his interests and knowledge level.
Scenarios:
1. User is new to design and no idea on the books/authors.
2. User is new to design and has idea on the book to read OR has idea on the authors to read with.
3. User is not new to design field. Would like to increase the current knowledge by exploring new books/authors through reviews.
KPI (Key Performance Indicators):
1. Bounce rate of ‘Book Review’ page.
2. How much time people have spent on the page
3. How many people write the book review.
4. Search engine (Eg: Google, Bing etc) traffic to the “Book Review” section.
Research
Secondary Research:
Right now no where user can find all design books at single portal with details. So, there are no competitor websites/organizations for this project. A research plan was formulated to determine the users, their needs, expectations and what drives their motivation; Analyze the scope of current review industry; assess competitors market positioning and analyze their website functionalities/features; Identify pain points of users and what difficulties they face when deciding the book to read. With the knowledge of preliminary guide I created an interview guide and empathy research was conducted by interviewing users who are new and experienced in design industry to understand their struggles from a personal standpoint.
Define
Synthesising User Research
From the research findings, participants inputs from contextual enquiry, research data were analyzed to identify similarities/patterns in user behavior and preference. A persona was built that resonates with their goals, needs and frustrations. A story for the persona was created to resemble interviewees current lifestyle.
Following Persona, an empathy map was developed using patterns observed from inputs provided by participants from user research. Few of the most observed pain points from the research data were chosen as underlying problem to create a scenario for story board. It was observed that lot of participants hesitate to check online reviews, afraid of the reviewer qualification. The story depicts a situation where the persona “Anita Stumpf” would face a similar problem and how using “Design Book review” would help her overcome her presumption about book reviews.
Establishing Project Goals
Overall research findings (goals and pain points of both business and users) were defined to establish project goals.
Product Roadmap
A competitor feature matrix was done for indirect brand competitors (since there is no direct competitors). It helped to analyse the cost and value of implementing features and services to find which will be profitable and easy to execute with the most gains; identify which features are available/not available in competitors website. A feature roadmap was developed using inputs from secondary research and interviews. Must have MVP features requested by participants as essential to a review website were given high priority. Typical features in a book review website was added along with the way which would help users in their book selection process.
Information Architecture
After creating the product road map, I have worked on sorting the features and prioritising the listed features. I created the work flow thinking how may a user can use the portal. Below is the Information Architecture I came up with.
Design
Wireframes
Before beginning to design wireframe, various paper sketches were made to build variations to establish a basic structure with the use of sitemap. Then, a low fidelity wireframe was designed using Figma for all the pages.
Brand Identity
A UI kit was created for the colors, fonts, buttons, and icons used.
Responsive web and mobile wireframes were designed and was further polished using UI kit to create a high fidelity prototype.
Prototype
Prototyping with Figma
An interactive high fidelity prototype of website was created using Figma. The prototype functionality is limited to two major task flows.
Task 1: Explore Design books
Task 2: Add Review to HCI design Book.
Evaluation
Usability Test
To determine the level of efficiency of design and usability within the user interface of the interactive prototype, remote usability testings were conducted. The test plan was devised were to understand user preference, memory and identify potential navigation issues within the task flow. From the usability test findings, a list was prepared using findings in navigation & usability; content and call to action, suggestions from participants and recommended course of action. From the UT results, it can be deduced that the prototype is success for the defined workflows.
Observations:
1. Users were very happy to know about a portal, which has only reviews for design books.
2. There were no errors during all work flows performed with the new prototype.
3. Time taken for the workflows were very minimal.
4. Users most liked the ‘adding review’ flow.
5. All users expected to have total number of reviews next to reviews on book list pages.
6. Users found book list pages on mobile are too long to scroll down.
Concluding Remarks:
Some of the key learnings from usability testing were:
1. Long list of items on mobile screens bothers users.
2. Users prefer easy eye catching informations in the design.
As part of redesign/improvements to the designed prototype, we considered following changes -
1. Adding total number of reviews on book list pages.
2. Adding versions of the book on book detail page.
3. Long list of items on mobile screens will redesigned for better user experience.
Next Steps
Based on the priority level 1, above design has emerged. There is a scope for improving design and features considering the next level priority features. This design will be updated once after the design enhancement done.
