9 weeks, June – August 2021
Figma, Adobe Illustrator, Miro
Research, UX/UI Design, Prototyping, User Testing
Pitch deck and high-fidelity desktop prototype
“Angus & Robertson has been a major player in the Australian book industry since 1886. After became an 100% online business in 2011, Angus and Robertson is now turning toward improving the user experience of the website.”
1. Close the gap between users buying and becoming inactive in their system.
2. Create a gamified experience to boost organic content and reach in turn boosting sales.
3. Create an environment where users are encouraged to:
- Leave and like reviews.
- Create and share booklists.
- Follow and connect with other like minded users.
- Have and participate in a badge and rewards system.
Reward system cannot be a monetised reward (i.e. discounts or financial benefits for participating). No user-to-user social interaction elements (i.e. chat or other means of communicating with each other as this opens up risks regarding abuse & moderation).
HOW MIGHT WE
- Create a gamified community to incentivise users for their interactions?
- Highlight the visibility of verified trusted reviews and recommendations?
- Let users create and customise their booklists?
- Enhance user control over privacy on the content they create?
- Let users create their reading note?
I changed the layout and navigation bar of the user profile page to keep consistent with the whole site. The layout is changed from full-width to boxed width, and the navigation bar is changed from drawer to tab. The new profile page is more personalised, gamified and community-based. It also enhances user control over privacy.
User is able to personalise their profile by changing profile photo and background image. By adding self intro and favourite author/genre, user is easier to find and connect with like-minded people.
User can view the profile as a visitor by clicking the visitor mode toggle.
GAMIFIED REWARD SYSTEM
I design a gamified reward system with a set of badges that aims to encourage users to generate reviews, booklists, book recommendations, and reading notes, in return for increasing user engagement and UGC.
The community page displays the updates of interested topics and activities of the following users.
The review page displays the reviews that user posted and liked. User can write a review instantly on this page.
The booklist page displays the booklists that user created and liked.
The booklist recommendation system at the bottom enables the user to explore more content that is interested in.
User can create a booklist instantly on this page with full control of the cover, title, content, and whether it will go public or remain private.
The reading note page displays the reading note that user wrote and liked. It responses to the user need that records the inspiration during reading.
User can write a reading note instantly on this page with privacy control whether the note will go public or remain private.
Same as the user profile page, the new product page incorporates the social and gamified attributes. I also unified the layout by aligning Review, Booklist, and Reading Note with the original tab navigation bar.
A new feature in the book information section shows the popularity of the book within the website (community), by showing the numbers of users "Want to Read", are "Reading", had "Read" the book.
The user can put the book into "Want to Read", "Reading", and "Read" booklists by clicking the corresponding status. Based on different statuses, the system would then encourage the user to either invite followers to read the book together or write a reading note/review.
The review section highlights the visibility of verified trusted reviews and in two ways. First, priorities the reviews are written by the following users. Second, enlarge the display of the identity and badges of the user who left the reviews.
In addition, users is able to filter the reviews with spoiler before browsing.
BOOKLIST & READING NOTE
The booklist section enables user to explore similar content from
The reading note section allow users to express their feelings about a sentence or paragraph of the book and resonate with each other. It also provides user a digital platform to centralise the reading notes.
RESEARCH & DEVELOPMENT
The design process was based on Design Thinking methodology.
20 participants were interviewed. 15 of the participants are identified as female and 5 as male, aged 21 - 55.
The focus of the interviews was to establish reading, book purchasing and reviewing habits as well as identifying reward systems likes, dislikes, wants and how gamification could increase user engagement.
Synthesising the interview transcript
So I created a positive persona and a resistant one to synthesis. Enthusiastic Selina, who enjoys interacting with other readers has the potential using the reward system. Whereas, busy Stephany, has less interests in user interaction but utilises bookstore website as a tool to optimise the exploration on books.
I walked through the current user journey using Selina and Stephany's persona to uncover any pain points and see where can what possible solutions be implemented.
By balancing the business goals and user needs, below are the UX opportunities I defined for the project. And the MVP was developed on the original website and consisted of three parts: redesign current product page, build a reward system and a new user profile page for community usage.
The IA describes the functions based on the MVP.
PROTOTYPE & ITERATION
I created prototypes and iterated the design based on insights from user testing.
1. Improved the header and put the account access icon at an obvious place.
2. Only display community-related figures at the profile information bar instead of book reading status.
3. Seperate the user intro and favourites from the profile information card which was clunky.
4. Enlarge the user information (avatar/badges) at the interaction sections (review, reading note).