EQUATORIAL LIVING LAB
Organizing and sharing open-source information for a global audience
OVERVIEW
Designing a website for the international initiative, Equatorial Living Lab, which collaborated with various organizations including Fourah Bay College, and Freetown Innovation Lab in Africa.
DELIVERABLE
Website Building
UI UX Design
System Design
Video editing
CLIENT
Equatorial Living Lab
Sep 2023 - June 2024
TEAM
Kevin Walz
Ridima Jain
Julia Martinez
1. PROJECT GOAL
They need a website platform to introduce research data on affordable housing in equatorial regions to a global audience. Additionally, they face challenges in managing a vast amount of data consistently and systematically, as they rely on digital collaboration tools for data organization.
2. CHALLENGE
The platform should be designed to make large volumes of data easy to view at a glance and navigate seamlessly. Additionally, it should allow the audience to intuitively check the project's current status and track progress over time.
3. SOLUTION
We developed a web platform that enables the research institute to periodically update and present their vast amount of data to a global audience. A visual guideline was provided for easy management and maintenance, ensuring a consistent expression of the institute's vision and identity.
4. IMPACT
10 times more people outside the United States are now part of the audience.
Over 90% of employees reported that the new platform is easy and intuitive to maintain.
DESIGN CHALLENGE
How might we simplify a web experience with lots of data and frequent updates?
EQUATORIAL LIVING LAB IS...
An international initiative for sustainable and affordable housing in equatorial climates.
The Equatorial Living Lab is an international initiative focused on developing sustainable and affordable housing solutions in the African region of Sierra Leone. The Equatorial Living Lab aims to significantly contribute to solving global housing issues. Over four semesters, our research journey emphasizes learning and sharing through community-centered open-source development.
MY ROLE
As a UX designer, my role is to...
I undertook the mission of developing an open-access website as a platform to share their two years of research findings and journey with the world. This open-access platform not only disseminates their research globally but also supports the team with international interest and potential research collaborations. The primary responsibilities of the UX designer include:
Structuring research data
Organizing extensive research data from both educational institutions and numerous research organizations through rational menu tree structures and information architecture.
System design
Designing a visual language that showcases the identity of the lab and structuring the user interface.
Scalable platform
Creating a scalable platform suitable for additional research and future projects.
CHALLENGE
First, how to organize
the vast amount of information?
DATA ORGANIZATION
Classifying and clustering
all the data we've collected so far
Currently, Equatorial Living Lab is temporarily utilizing the digital collaboration platform 'Milanote' for data collection purposes. Among the vast amount of uploaded data, the most crucial contents are as follows:
Research database
All research materials updated by the two educational institutions comprising the initiative and numerous organizations and experts. Research materials are usually updated on a weekly basis.
References & materials
Various references and materials inspiring our research. These are freely uploaded by all members.
Introduction
Introduction to the diverse organizations and human resources comprising the Equatorial Living Lab, symbolizing the diversity and identity of the team.
INFORMATION ARCHITECTURE
Grouping and structuring data
for web development
We clustered and categorized all of our resources based on their characteristics, then repeated the process to further classify them into several clusters. The vast amount of data was organized as follows:
Home (Landing page)
The landing page, designed in a one-page format, encompasses key information about the initiative and captivates visitors with our visual language and actual photos of the institute.
About Us
The About section, comprised of detailed pages, introduces various groups within the institute and profiles members, each tailored to different semesters.
What we do
The What We Do section, organized in a multi-page format to effectively structure vast amounts of data, elaborates on the institute's main research databases, methodologies, and processes.
Blog & news
This area is designed to showcase the institute's active updates, featuring major news and current issues in related fields.
Contact
The Contact page facilitates potential collaborations and supports project inquiries.
REGULAR or BOLD TYPEFACE?
Clearer visual hierarchy with bold typeface
Through A/B testing with users and team members, the bold typeface was chosen. The test indicated that most users found the bold typeface effective in quickly understanding key points and clarifying information hierarchy due to its clear size contrast. This allows us to visually distinguish various depths of information more clearly.
ONE PAGE or MULTI PAGE?
An integrated format for a streamlined user experience
The website harmoniously combines a one-page format with a multi-page format. The one-page landing page provides an intuitive interface that allows users to easily grasp the overall project at a glance. In contrast, the detailed pages for each specific sections offer users more detailed and extensive information.
REVISED WIREFRAME
Streamlined user experience
with well-categorized and organized data
with well-categorized and organized data
The wireframe and information architecture were ultimately revised with a focus on simplifying and streamlining the user experience. Other information, such as news and contacts, has been removed from the menu. Users can access these through the footer and detailed pages. The simplified menu includes the following items:
Home (Landing page)
The landing page, designed in a one-page format, encompasses key information about the initiative and captivates visitors with our visual language and actual photos of the institute.
About us
The About section, comprised of detailed pages, introduces various groups within the institute and profiles members, each tailored to different semesters.
Progress
This section contains overall information about our project. The visualized scale intuitively guides the current status and progress of our project, and users can access detailed information through the detailed page.
CHALLENGE
Then, how to build up
a design foundation
reflecting our identity?
DESIGN CONCEPT - COLOR BOX
Semi-transparent color boxes to keep consistency
We realized that maintaining design consistency could be challenging due to non-professional photos and varied content, especially since the website will primarily be managed by students. To ensure consistency regardless of expertise, we adopted translucent color boxes as the primary design language of the website. This ensures a clean visual and consistent appearance, regardless of the image's color, brightness, or contrast.
DESIGN CONCEPT - PROGRESS BAR
Visualizing project stages with progress bars
In a two-year, four-semester project, it is crucial to explain the stages. Progress bars visually and intuitively represent the current status of the project and the process we are following. Additionally, the provided percentages allow visitors to quickly grasp the current state and plans of the long-term project at a glance.
DESIGN SYSTEM & GUIDELINE
Identity and consistency
The brand identity of the project is expressed through the graphic logo and a color palette using indigenous African colors. All team members can maintain the website's consistency by following the graphic guidelines.
PROMOTIONAL STRATEGY
Guideline for other channels : Instagram & Youtube
We operate Instagram and YouTube channels to promote our project's achievements and collaborations. Using graphic guidelines and templates, we effectively showcase our research while maintaining consistency with our website.
TAKEAWAY
As a designer, what I've learned...
Organizing vast amounts of data and building it into an intuitive and easily navigable website was a valuable hands-on experience. Collaborating with an international group spanning the US and Sierra Leone provided diverse insights, highlighting the importance of teamwork and how effective communication can lead to creative solutions.
In the early stages of building the website, ensuring that it remained visually appealing and systematically consistent, even when managed by non-professionals later, was a new challenge. This experience allowed me to understand the considerations required not only during the website development phase but also for its ongoing maintenance in communication with actual clients.
