Angus & Robertson
UX Project

Built a reward-based user community with gamification elements for Angus & Robertson online bookstore to improve the user experience which in turn boosting sales and retention rate. The project was initiated by Harness Project, a project-based UX bootcamp. I was in a team of nine UX designers but we conducted research and developed design solutions individually.

Project Period
9 weeks, June – August 2021

Tools
Figma, Adobe Illustrator, Miro

My Role
Research, UX/UI Design, Prototyping, User Testing

Deliverables
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.”


CHALLENGES

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.


CONSTRAINS

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?




SOLUTION 01


PROFILE PAGE

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.


PERSONALISED PROFILE


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.





USER COMMUNITY


The community page displays the updates of interested topics and activities of the following users.










REVIEW


The review page displays the reviews that user posted and liked. User can write a review instantly on this page.





BOOKLIST


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.










READING NOTE


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.




SOLUTION 02


PRODUCT PAGE

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.



BOOK INFORMATION


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.





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
like-minded people.

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

DESIGN PROCESS

‍The design process was based on Design Thinking methodology.






USER RESEARCH

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






RESEARCH INSIGHTS






PERSONAS

Based on the user interviews, I found that there were two main groups of readers, who are positive/resistant in terms of user engagement and gamification system.

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.






USER JOURNEY

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.






UX OPPORTUNITIES

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.












INFORMATION
ARCHITECTURE


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).



FINAL INTERACTIVE PROTOTYPE