top of page
Old Maps Online
What Is OMO?
Old Maps Online, a non-profit gateway website, aims to demonstrate a combination of tools for publishing historical maps with a focus on their easy accessibility to the general public.
About This Project
Role: UX researcher, UX designer
Time: Sep. 2021 - Dec. 2021
THE PROPOSAL
Challenge.
The process of searching map resources and browsing the results can take a long time. This means users can not narrow down their search appropriately and have difficulty checking the results.
Objectives.
There’s an opportunity to make the overall searching and browsing process more efficient and thus improve the precision of results and time spent.
Solutions.
By researching the searching habits of target users and analyzing the filtering system of other professional websites, I designed a new filter feature to substitute the limited old one to help users efficiently narrow down the scope of search. I also designed a sorting feature for the results column to display results based on users' various needs. Furthermore, I optimized the visual performance of the whole website to make it more user-friendly.
RESEARCH
Research - Competitive Analysis.
As a starting point, I did a competitive analysis with Google Search, the Library of Congress, and the David Rumsey Map collection. Compared with Google search, OMO's resources are all authority guaranteed, and it specializes in old maps searching; Compared with the websites of the other two archives and library institutions, OMO provides resources from various institutions but does not own any resources (gateway website).
Research - Interviews & Key Findings.
-
Resources-oriented: participants usually use various websites/resources to help search the maps.
-
Narrowing down the searching scope is time-consuming for using most of the searching websites, but deliberately designed filters do help the process.
-
Participants mentioned the difficulty of collecting and organizing map resources.
-
Participants with professional needs have a higher standard for the map information (author, date, collection, publishers, etc.)
Research - Task Analysis.
Task analysis was done during the interviews with some of them, and I assigned two different tasks for users to complete.
Key Findings:
-
When doing task 1, all participants kept changing the filters and keywords and spent a relatively long time looking for the desired map.
-
When doing task 2, a majority of participants jumped around different sites to look for map details. Two of them found the desired map quickly but the maps were of low resolution. Noticeably, 3 out of 5 participants chose to use Google Image to search for the map.
Research - Survey.
Besides these qualitative researches, the survey also provided some important quantitative data about the target users' habits and past experiences. More than 100 responses were received.
On the one hand, as expected, users are resource-oriented, and more than half of the users spend a relatively long time finding the resources they want.
On the other hand, users do not complain too much about the design of the results column.
Research - Personas.
Based on these research results, I made 3 personas and built up from two of them to further develop the design. Pain points and needs were concluded from both the profiles of the interviewees and the survey responders.
Research - Synthesis.
After analyzing and synthesizing the findings, I prioritized the features for the new design. The goals for the new design must solve the problems of the filter system and the lack of sorting features. Since this website is not designed for profit, business goals were not considered.
ARCHITECTURE
Architecture - User Flow.
I identified three main tasks and user flows that would meet our user persona's needs, desires, and goals, with consideration of the features prioritized. Each of the three flows depicts the options and routes for achieving a certain goal.
Architecture - Wireflow for mobile ver.
With consideration of the responsiveness of the website, I drafted 3 iterations of the wireframe for the mobile devices according to the user flow. Three features were emphasized in the first draft: a new homepage with member login, advanced filters, and a personal collection page for storing resource links.
Architecture - Wireflow for web ver.
Wireflow for the web was derived from the mobile version. I iterated 2 more times to make sure that the wireframe design fits mobile devices, tablets, and computers. After the wireframes were designed, I tested them with a small group of people to evaluate the usability of the wire interfaces and the flow.
final design
FINAL DESIGN
Final Design - Colors.
The colors chosen are similar to the original colors so that Old Maps Online can still keep its' signature designs. The dark red changes to a brighter orange. greyish dark blue, and black are added to clarify different sections and enhance contrast.
Final Design - Home page.
Users can start browsing as a guest by clicking on the browse button directly entering keywords in the search bar on the top to start a new search.
Users can also first log in to their accounts and then get directed to the main search page automatically. The only difference is that guests will not be able to add maps to their collections.
Demo - Home page
Final Design - Filters & Sorting
1. Users will be directed to the main search page. The results column on the right side automatically shows the results according to the current scope of the map-viewing window. If the mouse hovers over each map, it will show a shaded rectangle depicting the area this map is about.
2. Filters now have more attributes for users to narrow down their search scope. The filters are separated into different sections. If users are confused about how to get desirable results, there are help and tips under each section. The scale options are pre-determined ranges so that users do not need to be concerned about what format should the scale be.
3. After the filters are applied, the filter icon on the search bar will indicate how many filters are selected, and they will be listed on the top of the map-viewing window for users to edit filters quickly.
4. Sorting feature can be changed at any time to give more desirable results.
AFTER
Search page
Demo - Filters & Sorting
Final Design - View map details & add to My Collection.
1. Map details: On the map detail page, users are able to move the map, zoom in and out, go to check the source website of the map, and add the map to "My Collection".
.png)
2. My Collection: Users can access "My Collection" from the top menu bar. In My Collection, users are also able to search and sort collected resources.
Demo - View map details & add to My Collection.
FUTURE POSSIBILITIES
In the future, the new design should have more accessibility considerations, especially for visually impaired users. And also I should do further usability testing to see what other improvements can be made.
bottom of page