Readerhub: Max Hibbard, Anna Di Iulio
During these weeks we focused more on making a first step towards creating a finalized working prototype. We used Adobe XD to create a wireframe of what our website would look like, illustrating all of the functionalities that each page would feature. Once we were done with this step our peers performed a cognitive walkthrough using the personas we had previously created and gave us feedback on our wireframes.
Method
Wireframes show all possible interactions between the user and the program. A wireframe shows each possible page in those interactions in a basic way without any visual design.
Findings
The interaction on a wireframe made for social media interaction is complicated as there are a lot of factors to take into consideration. For example, the entire profile interaction is a complicated process as you need to let them see their book library, let them edit their profile, and post. The whole wireframe is involved in a complicated process in order to make sure all possible interactions are covered. As discussed above, each page might have a ton of possible interactions in order to cover social media content. When editing their profile, it includes editing their Bio, username, password, user photo, ect. Changing their password requires a new page to verify their current password and what they want their new password to be. Each page also features a menu at the top which can navigate through the wireframe.
Method
Cognitive walkthroughs let you get some user interaction and feedback on how to accomplish tasks. You take a persona and try to accomplish their goals through their perspective in a step-by-step interaction of the wireframes.
Findings
Cognitive Walkthrough - Caroline
The cognitive walkthrough for Caroline illustrated that our users will all have different goals and needs from our site. On the signup page, we asked for a first name instead of a username. The user wondered why the website would ask for a first name as the convention is usually a username. The interaction informed us that the search bar and the edit profile button were not identifiable for this user. Since the user was not able to identify the search bar, they could not access the search page and book pages. It informed us that the help page might be ignored in order to explore the site itself.
Cognitive Walkthrough - John
The cognitive walkthrough for John illustrated that users may have some confusion once on the homepage. It was not clear enough that to explore books, you needed to get to the search page. However, once there the user was able to correctly identify the interaction needed to search for fantasy books.
Overall these methods and tools allowed us to discover a lot about how our users are going to interact with the product, even if they only interacted with the wireframes for now, which are only the first step of how our final website is going to look like.
We decided to take into account the critiques that were made and use them to build something that is easier to interact with. For example, we made the buttons and the texts bigger in order to be easier to understand. This was done also with the search bar that is almost always present at the top of the screen since there seemed to be a bit of uncertainty about how it should be used. We also added a more clear “edit profile” button on the profile page since it was in a less evident location.
After the cognitive walkthrough, we realized that there were a lot of things missing from our wireframes, so we went through them again and added more details and artboards that would make the interaction a lot easier for the user.
There is another thing that needs to be brought to attention. It was decided that our final prototype will have minimal visual design since we are focusing on making the interaction smoother and easier for the users, given how complicated the workflow is. This means that the only visual design that is going to be added is the one that will help the users navigate our product better.