Optimising Information Architecture for a User-Centric Web Design

StayExplorer.
Designing and developing a website by leveraging existing information architecture stored in JSON format.

The primary goal is to reorganise and optimise this data to create an intuitive and user-friendly platform, enabling users to easily find the information they need.

Through analysing the provided JSON data structure, identifying patterns, and understanding user needs, the project focuses on creating a well-structured, and intuitive website. This involves restructuring the information hierarchy, designing a user-centric interface, and implementing dynamic features to ensure a seamless browsing experience.
Duration:
4 Weeks
Role:
UX / UI
UX Research
Tools: Figma, Figjam
Travel web app prototype

Overview

Through the use of existing information architecture and personas, mental models and decision-making processes were developed to better understand user behaviour.

User journey maps were created alongside taxonomy and ontology maps to visualise user needs and content relationships, guiding the design of a final web app that enables users to easily navigate the information architecture and access their desired information efficiently.

How might we?

How might we use an existing information architecture and organise it to design a web app for users to find the relevant content they need?

JSON File
CSV File
CSV File

Cognitive Load

Using the provided personas, I mapped out their mental processes and how they would approach finding accommodation that best suits their needs. This involved analysing their mental load, mental models, and the factors influencing their decision-making throughout the search process.

Mental Models

Decision Making

Current User Flow

Using cognitive load, mental models, and decision-making processes, the current user flow was established to identify opportunities for enhancing the design of the web app.

Opportunities

The user flow was then analysed to identify design opportunities for the web app.

Filtering options

Parking information

  • While existing booking sites allow for searching accommodations with free parking, they lack a feature that indicates the convenience of vehicle access.
  • Incorporate parking signs on the map to show users how easy it is to navigate the area with a vehicle.

Enhanced restaurant information

  • The web app could provide detailed information about restaurant hours and their distance from accommodations.

Interactive map features

  • Adding more informative pop-ups when users click on icons, providing context and details about nearby amenities.
Identified opportunities
Identified opportunities
Identified opportunities

Taxonomy / Tagging

A taxonomy and tagging system was created to organise content based on differing user needs.

Ontology

An ontology map was then created to visualise the relationships between the content.

User Journey Map

User journey maps were created for each of the three users to visualise the steps they would take based on their individual priorities.

Lofi Wireframes

Once sufficient information has been gathered on user cognition, user research, taxonomy, ontology, and user journey mapping, low-fidelity wireframes were developed.

The content for the wireframes was sourced from the provided JSON and CSV files.

lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes
lofi wireframes

High-fi Wireframes

High-fidelity wireframes created highlights the key user interactions.

Users begin by selecting travel dates, duration, and the number of guests via a pop-up calendar, followed by clicking “search” to view results.

They can then filter results based on needs like room type, number of bedrooms/bathrooms, nearby places to visit, and restaurants.

Orange filter labels act as breadcrumbs to guide users through their selections.

The amenities and an interactive map with orange icons are prominently displayed to simplify exploring the area, and reviews are placed at the bottom of the page to assist in decision-making based on other traveler's experiences.

high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe
high fi wireframe

Final Takeaways

Learnings

I’ve learnt that information architecture should align with user needs to enable users to navigate and interact with the platform effortlessly, helping them find the information that meets their specific requirements. Incorporating filters and refining options provides users with a comprehensive set of tools to streamline their search process, enabling users to narrow down their options based on individual criteria, resulting in a more intuitive and efficient navigation experience.

In future work, I intend to create wireframes that not only cater to the needs of the provided personas but also prioritise accessibility for all platform users. This is important for ensuring universal accessibility in website development. While personas are a valuable reference for creating a website and organising information architecture, it is essential to develop an inclusive platform that accommodates diverse user needs.

Challenges

I faced the challenge of working with more generalised personas instead of the detailed ones I usually create, which have specific needs to inform a targeted design. This shift required me to conduct additional research into user cognition and mental models to ensure effective design decisions. By adopting a broader approach, I was able to make the website accessible to a wider audience, leading to the development of wireframes that are more inclusive and capable of meeting the diverse needs of users.

View more work