The Challenge: Designing the IA of a digital information environment (e.g. website, online store, Intranet, mobile/ desktop app. etc.) in our chosen domain, aimed at addressing requirements.
Target Users: University students.
My IA project was based on creating a website that accommodates second-hand book exchange among students of the same university.
I came up with this idea upon discovering a Facebook group (created by people from my previous university in Istanbul) in which students were trying to sell other students their old textbooks. The Facebook group seemed chaotic; therefore I wanted to explore solutions to make book exchange easier for students.
I carried out semi-structured interviews as a part of my user research. I spoke to the former chairman of a Turkish bookstore chain, and four university students. The chairman explained to me the customers’ mindset; how they wish to see books categorized in a physical or online store. He also talked about how books might be presented to the buyers from the business perspective. My interviews with fellow students helped me understand how they categorize their courses and course books. The interviews also illuminated the concerns students have regarding book shopping, especially if they are purchasing second-hand items.
INITIAL SKETCHES FOR EACH DESIGN DELIVERABLE
- Domain Model
- Sitemap
- User Journey
- Wireframes, Labelling & Navigation
THE DESIGN PROCESS
After my research, I designed a domain model with 4 main entities: Books, Students, Courses and Online Shopping— basically four concepts that construct my domain.
Upon producing my domain model, I conducted an online, open card sorting activity to gain further information about users’ preferences in categorizing books. 15 participants sorted 23 cards, each with a book name and an author. The majority chose to categorize books based on subject matter or genre.
My findings from the user research implied that most students would go on my site with a specific book on their minds to purchase. Other observations implied that a large group of students would be going on my site to sell their course books from previous years. For the former group, trying to find known items had to be a quick process, a task that should be resolved in a heartbeat once they land on the site. For the latter group, the path to selling books had to be immediately visible.
- SITEMAP
I wanted to provide a quick service. This led me to design a simple, task-based global navigation that emphasized the circulation of books via buying or selling. Users would either ‘Shop Books’ or ‘Sell Books’. Apart from those two items, users would be able to refer to ‘FAQ ‘ for their concerns. In addition, the shopping cart, and account utilities would always be accessible via global navigation.
One of my main purposes was to enable the user to browse books by a variety of ways— therefore creating multiple paths for them to get to the same place. Knowing that the mental model of users was based on sorting books by category, I emphasized ‘browsing by category’ as one of the main options that a user could choose while shopping books.
However, looking for a specific textbook by genre or subject matter would be very exhausting, therefore it had to become a secondary option even though users wanted to see books categorized that way. My interviews showed me that while shopping for their course materials, most students browsed books by course (code), which was a prominent element in my domain model. This encouraged me to create the ‘Browse by Course’ path within my sitemap, which contributed heavily to the depth of my diagram. In the end, I came up with an extensive browsing hierarchy under ‘Shop Books’. Users would be able to browse books by course, category; view featured items or special offers.
- USER JOURNEY
I based my user journey on a findability task: I demonstrated at a basic level how shopping for a specific course book works on my website.
- WIREFRAMES
For the wireframes, I created a local sidebar navigation, which allowed for the exploration of a variety of ways to browse books.
There was one interviewee who mentioned that he wouldn’t want to bother browsing for any book, and that he wished to find whatever he was looking for on the main page. This information led me to create the ‘Shop For Your Current Courses’ feature on the homepage, tailored differently for every user according to the courses they are taking. The ‘Shop For Your Current Courses’ feature on the homepage as well as the global search bar, are meant to offer the user a fast track. In contrast, the ‘Shop Books’ section would provide the user with lists of familiar terms and categories but would offer a longer, exploratory path.
For such a large content set like books, users would need the support of an extensive filtering system to locate what they are looking for. Faceted navigation was the most appropriate choice to utilize. The metadata I gathered from the domain model helped me come up with three categories of facets; enabling users to refine book results by course properties, book category or publication properties.
THE EVALUATION PROCESS
I opted to conduct the evaluation process with active user involvement. I performed a face-to-face, moderated IA-focused user testing with 2 participants, by using paper prototypes. I asked participants to walk me through the wireframes I printed out; I gave them scenarios and asked them to show me how they would expect to achieve their goal. I encouraged them to think aloud as they performed the tasks.
One task that the participants had to perform was to find a book for a course (MAVA102) starting from the homepage, which has been covered in my user journey. One participant opted to use the ‘search bar’, and the other wanted to use the ‘Shop for Your Courses’ feature on the homepage.
Both of those paths turned out to offer quite high findability, because they are two very direct routes to finding a particular course book. The third path in my user journey is browsing by choosing ‘Shop Books’ from the main navigation, which takes longer and is a more extensive browsing option. Since I didn’t have the wireframes for a number of pages on that route, I felt that I couldn’t really explore the level of findability/discoverability the path offers. In the future, I would like to gather more information on the flow that the ‘Shop Books’ section covers, because it is a very rich path in terms of IA.
Labeling was mostly clear to participants, except some usage of jargon. For example, the “Buy the Essentials” section wasn’t clear to one participant; she wasn’t sure what “essentials” meant in the website’s context. The other participant was confused upon seeing the ‘Properties’ tab on the book details page, and had no idea what it contained. Both participants concluded that book properties should be displayed as a priority, over book description. I made a note to gather more data to see whether aforementioned labels are confusing for other users. I think the presence of annotations would make functionalities of the website more clear, but I had to leave them out, naturally, for testing purposes.
Most problems that were pointed out were related the use of icons. For instance, the magnifying glass icons on course images on the home page were meant to signify the option to quick preview. It turned out that the icon had an entirely different connotation for the participants, like “zooming in”. My main takeaway is that perhaps I included too many visual elements; I got carried away designing the UI. When designing IA in the future, I will make sure to express functionalities in a simpler way before providing the visual details. It is essential to get the labeling and navigation right before designing the interface.
One challenge with the method of evaluation that I chose was that I had only 4 wireframes. There are parts of the site that I haven’t designed, so I couldn’t demonstrate how the website would function in its entirety. I had to fill in the gaps verbally when a participant asked me to show something that was out of the wireframes’ scope— and although verbal explanations are useful, they aren’t as clear as having visual material to refer to. My ‘Wizard of Oz’ performance was, therefore, limited. In future practices, I wish to produce basic wireframes for each page on the site to conduct a more insightful, and realistic user testing.
Be First to Comment