AfroCare Hub - Information Architecture
Overview
This Information Architecture project aimed to design a website tailored for individuals with afro-textured hair, focusing on providing educational resources and personalised recommendations for hair care. The website's objective was to help users understand their hair type, explore methods for growth and length retention, and gain insights into factors influencing hair health. By creating an intuitive and user-centric information architecture, the website intended to enhance the user experience and support effective hair care practices.
Role: Lead UX Researcher
Tools: Optimal Sort (for card-sorts and tree test), Miro, Figma
Duration: 9 weeks
Contents
-
Methods: I conducted a competitive analysis of afro-textured hair websites and semi-structured interviews with experts and a user to gain domain insights, focusing on key domain-related topics like hair types and protective styles.
-
Domain Model: To clarify complex concepts and guide design decisions, I created a domain model identifying key entities such as Hair Types, Products, and Health, structuring relationships.
-
Sitemap: Based on card-sorting exercises, I created a sitemap resulting in six global navigation tabs organising content intuitively for users.
-
User Journeys: Highlighting key touchpoints, I mapped a user journey to guide design decisions, aiming to help users achieve goals like discovering hair porosity and saving personalised recommendations.
-
Wireframes: Created four key wireframes for crucial pages (hair porosity, routines, user profiles), incorporating feedback to ensure usability and meet user needs.
-
Evaluation: Usability testing led to improvements like renamed navigation tabs, user profiles, and community ratings, enhancing the user experience and site functionality.
-
Reflection: The project highlighted the importance of centred design and iterative processes in building an intuitive website. Future work will expand testing and emphasise the role of user feedback in gaining stakeholder support.
Methods
Competitive Analysis: I analysed existing afro-textured hair websites to understand the landscape and gather insights into competitors' information architecture. The results from the competitive analysis informed the questions asked in the semi-structured interviews.
Semi-Structured Interviews: I interviewed two subject-matter experts (a self-stylist and an afro-textured hair specialist) and one potential user to gain a comprehensive understanding of the domain to inform the design of my domain model.
Domain Model
Developed using insights from the competitive analysis and semi-structured interviews with experts and users, the domain model identified key entities such as Hair Types, Afro Hair Products, Protective Hairstyles, and Health.
Receding backdrops were used, such as for the various porosities of hair, to add depth to the model and communicate superficial relationships without compromising the model’s visuality. Additionally, through analysing the domain interviews, hair types were identified as a significant entity that affects other entities, such as hair products. Therefore, users visiting the website would be provided with information concerning understanding their hair type; an important concept that subsequently affects the use of hair products.
Domain model for afro-textured hair
Sitemap
To design the sitemap, I first revisited the interviews to use terms suitable for the website's audience, creating a taxonomy of common words. Based on this taxonomy, an open card sort, followed by a closed card sort, was employed to determine the optimal structure and terminology for the website, conducted remotely via Optimal Sort. I employed this generative method to identify patterns in how potential users organise, label and group information; this method was also used to identify the number of categories participants would create.
The results of the closed card sort revealed that many participants categorised the aspects of afro-textured hair, curl patterns, hair porosity and shrinkage under 'learn more'. 'Learn more' was a previously existing global navigation that was later removed following the results of my card sort due to its vagueness. Instead, 'Understanding Afro-Textured Hair' was created as a global navigation tab encompassing Afro-textured hair's aspects. The label was appropriate as this tab contained resources to educate users about the unique features of afro-textured hair. This was supported by a tree test using Optimal Sort, which was used to test the website's structure adequately.
As a result, this user feedback led to the creation of six global navigation tabs (About, Understanding Afro-textured hair, Hair Care Products, Hair Styling & Maintenance, Health & Hair Concerns, and Stores & Services Finder) that effectively categorised and prioritised the website’s content and sub-pages, ensuring intuitive user access and navigation aligned with user’s mental models.
Wireframe
User Journey
To outline the steps users would take to achieve their goals on the site, I mapped a user journey to showcase this. In particular, the task at hand was:
“You are transitioning from relaxed to natural hair, and you want to learn how to grow your hair. You know your hair type is 4B, but you are not sure of your porosity or where to start. You experience breakage and want to develop a personalised routine that will grow your hair and prevent breakage.”
The user journey indicated a step-by-step path of a user's journey through the website to reach their desired goal, alongside the user's thoughts at essential touchpoints. Such touchpoints included discovering hair porosity, finding relevant routines, and saving recommendations, and guiding the design of the website’s navigation and functionality within the wireframes.
User Journey
Wireframes
Representing the key website pages and based on the sitemap and user journey, I used Figma to design four wireframes that showcased the website's main functionalities and provided a visual reference of the website’s information architecture and navigation.
These wireframes aimed to capture the main purpose of the website: to provide users with informational content related to afro-textured hair and to recommend and learn methods to grow or retain their hair length.
Subsequently, I created wireframes to showcase the content page surrounding types of hair porosity, a sub-page about breakage, the browse routines page, and a user profile page. Two content pages were included within the wireframes as, according to Spencer (2010, page 283), content pages are where users spend most of their time. Additionally, the content page is usually the first page users arrive at when using a search engine; it is where they experience success or failures and navigate to other website pages.
Ensuring the website met user needs effectively, these wireframes incorporated user feedback and best practices to enhance usability. Annotations were included to provide additional context for design decisions.
Annotated wireframes showcasing ‘Types of hair porisity’ page and ‘Breakage’ subpage
Wireframes of AfroCare hub, detailing the ‘Browse Routines’ and ‘My Profile’ page page
Wireframe of Afrocare Hub, detailing the
Evaluation
To appropriately assess the structure of the website's information architecture, the following criteria were measured within the wireframes: the overall goals of the website, the user's overall goals and the completion of a specific task. This was done by validating the design with four potential website users using a moderated usability testing technique.
This was important because, according to Loranger (2015), recruiting proxy users should be avoided to ensure the participants represent the user population with the same goals, mindset and situation. The users were individually presented with paper prototypes and asked to perform the task outlined in the user journey. In addition, a survey was created where users were asked three questions regarding where they would expect to find a particular page.
Feedback led to several improvements, such as renaming navigation tabs, adding a user profile feature, and incorporating community ratings. Aiming to enhance the user experience, I incorporated these changes to address and resolve any identified issues. Additionally, the implementation of the rating system was well-received by users; however, it was also noted that they would like to see a heightened community aspect where comments can also be made. Therefore, future designs of this system would include this to allow for a more fleshed-out social aspect of the website, in conjunction with a community tab in the global navigation. Future implementations for the website also include external resources where affiliated companies can advertise their products to increase traffic on the website.
Reflection
Reflecting on my work as an information architect for this project, I am proud of the thorough research and user-centred design approach that guided the development of an intuitive and effective website for users with afro-textured hair. Expert & user semi-structured interviews, card sorting, a tree test, and usability testing ensured the information architecture met real user needs and facilitated a seamless navigation experience.
For the next steps, I would involve users earlier and broaden the scope of iterative testing to provide more diverse insights. Overall, the project underscored the value of user-focused strategies in creating successful digital navigation and information architecture experiences.
