To start the process I interviewed some coworkers, classmates, friends and family members which were are all students. Interviewing them allowed me to notice some important patterns concerning the research and disposal of books after their utilization at the end of each university session. This patterns gave me the information I needed to proceed to the next phase of the UX research.
subsequently, I started identifying the user’s preferences and pain-points. Once I did that, I wrote them down on post-its and grouped them in an affinity map which helped me pinpoint recurrent themes and issues. I selected the most recurrent themes or problems from the interviews to be the focal points of the mobile application.
Based on the affinity mapping I did and the 5 interviews I conducted I created two user personas of my potential mobile application user.
Defining the main pain-points
After the user interviews, the affinity mapping and the user personas I was ready to start the definition phase and tackle the main pain-points :
Now that the main pain-points where defined I had to identify the solution to the problem:
Before doing mockups for the high fidelity prototype, I decided to create a simple user flow in sketch. With this, I was able to better understand how the user would interact with the app to perform the tasks he needed to.
Right after finishing the User Flow I was ready to start prototyping my low fidelity wireframes of the app on paper.
For this part of the process, I was only able to conduct two user tests with the paper wireframes. However, even with two user tests, I was able to pinpoint some elements I needed to iterate in order to proceed with the high-fidelity prototyping phase.
One of the testers mentioned that the home page looked too crowded, indeed it was showcasing way too many books at the same time to the user.
This critique leads to a diminution in the quantity of books presented in the high fidelity version of the app home page. Because of this, I went from showing 12 different books to only 6 books.
I was also signaled that I didn’t include text describing each book showcased in the homepage which I also corrected in the High fidelity mockup adding the location, the price, the rating, a “more info button” and other important elements.
Due to a shortage of time and loss of users engagement when reviewing the paper wireframes I decided to start prototyping the high-fidelity mockups.
User-Testing with the High-Fidelity Prototype
Jumping into the high-fidelity mockup resulted in an increased user engagement when testing this more visually attractive prototype.
Nevertheless, even if I had discovered and fixed some issues with the feedback collected from the user test of my paper wireframes when I conducted new tests with the high fidelity prototype, new problems surfaced.
The most obvious issues were present on the login page and the home page and they were related to content layout, elements consistency, colors, typography, spacing and other design issues.
The Login page
With the high fidelity prototype, the first issues appeared on the login page. It’s well known that when you design you can get too consumed by your work and forget to look from the lenses of the user and I wasn’t the exception to this known phenomenon.
For example, it was obvious to me that putting only the words “email” and “password” would indicate clearly enough to users that they needed to make an input on each field. On the other hand, this wasn’t what most testers thought about it.
In fact, as I discovered, users are habituated to seeing boxes or lines indicating inputs. Knowing this I opted for the lines option in order to keep my login as simple as possible.
The home page content
Just when I thought that the homepage was beginning to look decent, from the UXUI standpoint, user reviews highlighted several other issues…
For example, the number of books was still a concern as users considered that too many books were shown to them all at once. Most users also mentioned that same for the descriptive text. I was clearly oversaturating the home page with information.
In order to fix those problems, I resolved to only show four books and diminished the amount of descriptive information about those books.
I also changed the “more info button” for tags allowing quickly data search and detection as I realized that most users were tapping on the image of the book in order to see more complete information about the book.
The CTA and the research bar
After watching users interact with the prototype I came to realize that the “sell book” and the “Donate Book” CTA buttons where not standing apart enough from the other elements in the home page.
To solve this problem, I replace them by two rounded yellowish buttons to which I added a subtle drop shadow and this clearly made a difference.
While redesigning the buttons I decided to add a filter icon inside the research bar as it’s something that most users really appreciate it as it helps them narrow down the data increasing research accuracy.
Redesigning the CTA buttons made me realize that I hadn’t maintained a good consistency around all screens making it hard for users to identify and recognize these UX elements in the app.
Also, the spacing between letters, the drop shadow as well as the font weight was not adequate in all buttons across screens so I made the changes here too.
Icons + text
Watching users interact with the prototype it came to my attention that some of them didn’t get the meaning of the middle icon designated to the scan feature.
Being the case, I resolved to use copy together with the icons in order to decrease the risk of misunderstanding and increase the accuracy of interactions
The tab bar icons
The tab bar icons are arguably the most used elements in an app reason why I had to make sure that they were as clear and consistent as possible. I got positive feedback when it came to the clarity of their meaning and I’m not surprised as they are all well know and used in other apps. Nevertheless, I realized that I had to make changes here too.
In fact, the weight of the lines forming the icons wasn’t consistent between each of them. Also, icons size was also a problem as the home icon and the message icon appears bigger than the others.
Getting inspired by facebook
When it comes to designing I always get inspired by well-established brands that revolutionized the design industry and create delightful user experiences and this time I got inspired by facebook
In apps, hamburger menus are traditionally placed in the upper right and left corners but numerous analysis discovered that placing it in the tab bar is more user-friendly and it increases speed and perception of speed. This argument and the fact that this technique is used by a company I admire got me completely sold. This last iteration concluded the major changes I had to do for the high fidelity prototype.
Study case future improvements
t the end of this project, it came to my attention that I hadn’t put enough emphasis on showing how I was solving the initial problem with my app concept. Instead, I solely focused on showing user feedback collected from the user tests and the iterations of my UI and UX.
Even though users made me know how I managed to solve the initial problem with the app prototype I definitely feel that I should have included and explained this aspect in my study case.
This being my first UX study case, I learned a lot of things through the process. I came to realize the importance of user feedback through user tests but most import I learned about how crucial iterations are to reach the best possible product.
After reading several UX case studies, seeking to find the perfect methodology, I realized that nobody’s project reaches perfection and I’m pretty sure that mine is not the exception.
For this reason, I’d really really love to have feedback from you guys whether is on my methodology, my writing or any other thing you think I should improve.
Thanks a lot in advance for the feedback and for your reading! 🙂
About the Author
Yanick Jimenez is a current student at Laval University, Canada, Graphic design programme. The project is its first self-imposed project. Before attending this programme, Yanick studied business for two years and a half before finding his passion for design. On his spare time, he specializes in UX and product design.
His design works and methodology can be viewed on his social media platforms