UX Research
Part 2 — User Testing, Final Website, & Future Improvements
Hold on… have you read Part One of this blog? If not, I suggest reading it first and then coming back here and it has some really good research and will provide insight for the content in this blog. Click here to read part one.
Content:
Usability Testing
Testing Methods
For the user tests, I utilised methods from a user test type called ‘Moderated Testing’. This included introducing the user to the testing setup and what they should expect. I then gave them some tasks to complete in the website prototype, which I recorded and have made observations on. After the user completed the tasks, I asked some questions to gage how they felt about their experience in order to gain feedback on how our product could be improved upon.
The developing website application was also tested, where I checked the pages, routing, authentication, and API end points to ensure development was on track. It was.
Testing Goals
The first version of the prototype was tested by eight different users in order to help us achieve the following testing goals:
- Test whether the product is intuitive, with logical mapping, and follows website design conventions, in order to ensure minimal cognitive load.
- Identify specific issues with the design in terms of layout, functionality and aesthetic that we otherwise may have missed.
- Get feedback directly from users to discover how they feel about the website and how we can improve the user experience.
Participant Profiles
The eight different users can be seen in the table below.
User Tasks
The tasks the users were asked to complete emulate the flow and experience they would have if they were to use the app in a real life situation, from start-to-finish. These were:
1. Sign up for an account
2. Go to the profile page and add a profile picture
3. Generate a new character
4. Randomise the third personality trait
5. Type in a new job for the character
6. Write some notes about the character
7. Save the character
8. Create a new story with the character you just generated
9. Give the story a title
10. Write notes about the story
11. Save the story
12. Find where your notes are compiled
13. Sign out of the webpage
Post-Test Questions
1. How would you describe your overall experience with the product?
2. How difficult are these test assignments? (From very easy to very difficult)
3. What was your favourite aspect of the product?
4. What did you like the least?
5. What was the most confusing part of the test?
6. If you could change one thing about this product, what would it be and why?
Results
The results for each section of the website are summarised below.
Improvements
Character Generation Page — Improvements:
- Increased the size of the dice icon (and included guides explaining the feature to first time users of the character generator.)
- Introduced a ‘Randomise All’ button, a lock function, and drop down lists so that users have more options and control over how they select character details.
- Character ‘Qualities’ are now visualised in a radar chart, so that users can view the qualities quicker and to make the page more visually appealing.
- Removed the ‘Edit Mode’ feature and made the details permanently editable.
- The location element is less specific, focusing on the environment instead of a city (for example Egypt vs the desert), and the location is now linked to the background image so that the narrative is consistent.
Story Notes Page — Improvements:
- Tab that isn’t active colour changed from yellow to black so that it is more visible and accessible for all users.
- Added story detail inputs (like genre, setting, point of view, and tone) to help guide the user to define the story further.
Notes Page — Improvements:
- Changed ‘Notes’ page to have separate tabs for ‘Stories’ and ‘Characters’, rather than indicating this difference with a smaller versus larger sticky note— recognition over recall.
- Increased amount of detail that user can input for each story. The initial design simply included the title and a description, and there is now a picture to indicate the setting of the story, and a date to indicate when the user created the story.
- ‘Edit’ interactive button changed to yellow arrow, to prompt the user where to click and reduce cognitive load.
Final Website Prototype
Here is the final website prototype in Figma. Feel free to have a click around and explore the depths of the design.
Live Website Application
Click here to check out the live website!
Or copy and paste the following URL: https://bibiliofile.netlify.app/
Future Potential
Improvements & New App Features
- Add the ability to map out relationships between characters in a story.
- A prompt feature for coming up with new ideas for stories.
You have reached the end of the part two! Thank you for reading this far and feel free to leave a comment to let me know what you thought about this project. I hope you have a nice day :)
