Preserving Promises: Designing the Tribal Treaties Database
Overview
The Tribal Treaties Database provides an accessible portal to explore treaties, agreements, and other historical documents that have shaped relationships between tribal nations and the United States. These treaties represent pivotal moments in history where rights were negotiated, promises made, and the course of lives and nations forever altered.
This database serves as a valuable resource, encouraging users to understand the profound significance of these documents and acknowledge their historical and ongoing impacts on the sovereignty and rights of Native American tribes.
Client
-
Oklahoma State University Libraries
-
Team: Juliana Nykolaiszyn, Associate Dean of the Library & Project Manager; Megan Macken, Department Head of Digital Resources & Discovery Services & Project Manager; Roy Degler, Developer; Nikhil Motwani, Developer
My Role & Duration
-
Freelance UX/UI Designer
-
Enhance the visual design, develop a cohesive brand, and improve the usability and information hierarchy.
-
February - November 2023
Applied Methodologies
-
Heuristic Evaluation, Wireframes, User Interviews, Usability Testing
The Problem
The client expressed that users struggled to trust the reliability of the database; many people saying it looked outdated, and a lack of information hierarchy and clear navigation options made the site feel incomplete.
The team in charge of updating the database felt a designer would be beneficial in creating a new layout which would help their wide range of users find necessary information.
Key Goals
-
Navigation: A prominent and accessible search bar supported by intuitive design to make finding information effortless.
-
Clean Design: ​A colorful yet uncluttered aesthetic, conveying a sense of completeness and reliability.
-
Equity: A balanced approach to representation, ensuring no tribal nation was highlighted over others.
Heuristic Evaluation & Analyzing the Existing Design
To identify usability gaps and areas for improvement, I analyzed the existing design using Nielsen Norman Group’s 10 Usability Heuristics, focusing particularly on Guideline 6: Recognition Rather Than Recall. This evaluation provided a usability-focused perspective, helping me pinpoint issues that hindered the user experience, and identify elements that worked well. The process not only familiarized me with the database, but also guided my design decisions.
Issues
-
The desktop version relies solely on a hamburger menu, hiding important navigation options and adding extra clicks.
-
The hamburger menu lacks hierarchy, presenting all users with a text-heavy list that feels overwhelming.
-
Key information is located in the footer, making it harder for users to find essential details.
-
The absence of a central headline leaves users without a clear introduction to the database.
-
Long, unstructured lists make it difficult for users to locate specific information efficiently.
Recommendations
-
Make key navigation immediately accessible by providing a more visible navigation bar on the desktop version.
-
Align with standard design conventions and use a hamburger menu only for mobile devices.
-
Reserve the footer for secondary information and non-essential details.
-
Add a welcoming central headline to communicate the database's purpose at a glance.
-
Break up lengthy lists into more digestible sections to improve usability and clarity.
Secondary Research
Gaining a better understanding of history, treaties, and databases.
As an essential part of the design process, I researched the history of treaties between tribal nations and the U.S., learning that some tribal leaders used fingerprints in place of signatures. This historical detail inspired a design feature which we incorporated into the landing page to emphasize its significance.
I also explored other databases for inspiration, finding that elements like a prominent search bar, multiple browsing methods, clear sections, and a brief self-introduction stood out as effective features which I adapted for this project.
A Tribal Treaty, the National Archives Catalog, & the WorldCat Database
Understanding Our Users
An important consideration of this project was the wide range of users - from tribal leaders and lawyers, to students and educators, the design needed to be an authoritative source of information while remaining approachable for general users.
Multiple Search Options
A prominent search bar and filters for various needs.
Clear Structure
Distinct sections for easy navigation.
Accessible Icons and Text
Icons paired with text for accessibility.
Welcoming Feedback
A contact section to encourage user interaction.
Landing Page Wireframes
I quickly sketched some landing page layouts, then re-created the wireframes in Figma to share with my team. The team preferred the layout in Wireframe 2, so I moved forward with this layout to work on the medium-fidelity mockups.
Key Feedback Takeaways:
Preferred Wireframe 2:
✅ Left-aligned design.
✅ Large central search bar.
✅ "About Us" section central but not taking up too much space.
✅ "Partners" section they greatly appreciated.
​
From Both Wireframes:
✅ They approved my proposed "Browse By" and "Contact Us" sections.​​​
​
These wireframes set a strong foundation for planning the higher fidelity mockups.
Wireframes 1 & 2
Medium Fidelity Mockups
I tested colors and imagery through mockups using the new layout. My team wanted to incorporate the sunset image used on their existing site, as well as my proposed image of a treaty with fingerprint signatures.
Key Feedback Takeaways:
Preferred Mockup 2:
✅ Bright, vivid colors are warm and welcoming.
✅ Image of treaty is located in the "About" section.
​
Changes to Make:
-
Make the treaty rectangular to better view it. ​​​
-
Remove the triangular shapes.
-
Adjust the button color.
-
Redesign "Browse By" icons. ​
Mockups 1 & 2
Final Solution Landing Page
The new layout aligns with the key goals presented by the client and project managers. It's clean, with an easy to use search bar highlighted at the top of the page. Additional search options, as well as dedicated sections providing crucial details about the database are clearly displayed, while accessible icons and text give the site a modern image.
Key Features:
-
Hero Section:
-
Warm colors, prominently displayed greeting, large central search bar, complementary navigation options.
-
-
Browse By Section:
-
Categories are paired with an icon for intuitive alternative navigation for focused search and casual exploration.
-
-
About Section:
-
Treaty image highlights the historical significance and the purpose of this database. Users can read a brief overview of the database, and for those interested in exploring further, there is a "Learn More" button.
-
-
Partners Section:
-
Highlights the organizations that contributed to the creation of the database.
-
-
Contact Section:
-
User feedback is both valued and encouraged. Easy for users to share thoughts, report issues, or request additional information, fostering a sense of community and ongoing improvement.
-
-
Footer:
-
An additional navigation tool, housing secondary information such as disclaimers, acknowledgements, and supplemental resources.
-
Final Solution Landing Page Mockup
Once the landing page design was approved by the team, I began designing the secondary pages, carrying over elements of the new layout to ensure consistent page structure throughout the site.
Working with Developers & Responsive Design
Once the secondary pages were approved, the developers were brought in to begin coding the database. During this process, I collaborated closely with the developers to ensure the site was completed according to my designs. Working with the developers was a great learning experience which helped me refine my skills with auto layout to improve the responsiveness of my design elements.
The Solution
The design of the Tribal Treaties Database is consistent and cohesive across all pages. The sunset image serves as a unifying banner, carried throughout the site to create visual harmony. Consistent use of color and typography strengthens the sense of reliability and completeness. Key goals were met by establishing effective navigation, intuitive information architecture, and a modern, clean design that feels both accessible and trustworthy.
Landing Page
-
Warm Colors: Users are welcomed with a vivid sunset image that conveys trust and approachability.
-
Prominently Displayed Greeting: The database name is prominently displayed, while a large central search bar enables users to begin exploring immediately.
-
Complementary Navigation Options: Above and below the search bar provide clear, accessible pathways for finding information, enhancing usability through multiple search methods.​
-
Prominent Treaty: Highlights the historical significance of these documents and the purpose of the database.
Tribes & Original Signatories
-
Organized Alphabetically: Tribes are displayed in a clear, alphabetical list for easy browsing.
-
Quick Navigation: A clickable alphabet allows users to jump directly to the section they need.
-
Effortless Scrolling: A "Top" button lets users quickly return to the top of the page.
Treaties
-
Dropdown Menu: An automatically expanded menu provides key details about each treaty and includes buttons linking directly to scanned treaty documents.
-
Clear Layout: Treaties are displayed on the left side of the page, while the right side offers space for side notes, creating a clean and balanced reading experience.
Indexes
-
Comprehensive Information: A detailed alphabetical list provides links to all available content, offering a complete view of the database’s resources.
-
Streamlined Navigation: The "Top" button makes it easy to navigate long lists efficiently.
-
Direct Access: Users can jump directly to the information they need, reducing search time and enhancing usability.
In Conclusion
Feedback
My project managers wanted this database completed in time to present to Tribal leaders at a meeting scheduled for November 2023. We met that goal, and the site was received with positive feedback.
Key Learning Experiences
Working with developers on this project helped me understand the challenges and limitations that can arise when translating designs into code. Over the course of this project, I learned to design with these limitations in mind and remain flexible and open to collaboration with developers to keep the project on track.
​
During this project I was actively learning to apply auto layout in Figma. I enrolled in courses and communicated with developers to become more proficient in responsive design, and balanced my learning with making progress on the design and meeting project deadlines.
