· Overview.

· Research.

· Iterations.

· Final design.

· Overview.

· Research.

· Iterations.

· Final design.

· Overview.

· Research.

· Iterations.

· Final design.

Old Maps Online

Old Maps Online

Old Maps Online

Old Maps Online

Old Maps Online

Redesign of Old Maps Online, a non-profit resource portal. Enhanced visual performance and seamless resource-searching experience.

Redesign of Old Maps Online, a non-profit resource portal. Enhanced visual performance and seamless resource-searching experience.

Redesign of Old Maps Online, a non-profit resource portal. Enhanced visual performance and seamless resource-searching experience.

Redesign of Old Maps Online, a non-profit resource portal. Enhanced visual performance and seamless resource-searching experience.

Redesign of Old Maps Online, a non-profit resource portal. Enhanced visual performance and seamless resource-searching experience.

My Role

My Role

UX Designer

UX Researcher


Timeline

Timeline

09/2019 - 12/2019

09/2019 - 12/2019

Scope

Scope

UX design

UX research

Website design

Feature optimization

UX design

UX research

Website design

Feature optimization

About the Project.

About the Project.

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.

As a history lover and a user of OMO, I initiated this redesign project to optimize the map resources searching experience.

As a history lover and a user of OMO, I initiated this redesign project to optimize the map resources searching experience.

The Challenge.

The 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.

There’s an opportunity to make the overall searching and browsing process more efficient and thus improve the precision of results and time spent.

There’s an opportunity to make the overall searching and browsing process more efficient and thus improve the precision of results and time spent.

The Outcome. ✨

The Outcome. ✨

  • Designed a new filter feature to substitute the limited old one to help users efficiently narrow down the scope of search and a sorting feature for the results column to display results based on users' various needs.

  • Optimized the visual performance of the whole website, improving 25% task completion rate!

RESEARCH - Competitors

What makes OMO special?

What makes OMO special?

Redesigning isn’t just about making something look more attractive; it’s about enhancing user experience and highlighting a product’s true features and values. Through comparing various map-searching services, I discovered distinct qualities that set OMO apart from other search websites:


  1. Real-time map search for historical maps.

  2. Extensive collection of historical maps.

RESEARCH - User challenges

Why is OMO difficult to use?

Why is OMO difficult to use?

Through task analysis with 5 users and onlince survey, I concluded that the key problems here lied in the filtering process and the continuously refreshing results side bar, which prevents users from finding the resources they need.


  1. Time-consuming filtering process: few filters and continuously changing results.

  2. Misunderstanding design of the results side bar.

Goals - Synthesis

What are the priorities for improvement?

What are the priorities for improvement?

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.

Design - User flow

Search with advanced filters and clear results

Based on the current OMO website's sitemap, I developed various search flows featuring advanced filters and a streamlined resource collection process. These serve as the basis for user interaction with the filtering system.

Design - responsive wireflows

Responsive design

Taking website responsiveness into account, I created mobile wireframe iterations aligned with desktop wireflow. The initial draft focused on a new homepage with member login, advanced filters, and a personal collection page for storing resource links.

Design - colors & fonts

Colors and fonts

The chosen colors maintain Old Maps Online's signature design while refreshing it. Dark red transitions to a brighter orange, and shades of greyish dark blue and black are introduced to delineate sections clearly and increase contrast.

Final design - Landing page

Landing: more info with fewer distractions

B

DESIGN & ITERATIONS

We spent a lot of time testing and refining different teaching tools…

We spent a lot of time testing and refining different teaching tools…

Our team tested and iterated on several options for tangible learning tools and course outlines. Through player-testings and client visits, we carefully refined the design.

Our team tested and iterated on several options for tangible learning tools and course outlines. Through player-testings and client visits, we carefully refined the design.

FINAL DESIGN

For students, and for instructors

For students, and for instructors

The tangible coding tools are integrated into the newly designed computing and electronics course, properly assisting the instructors to teach the course.

​

Our final design includes 2 big sections:

  • the course outline and the instructor-facing brief;

  • the tangible coding kits for in-class teaching.

The tangible coding tools are integrated into the newly designed computing and electronics course, properly assisting the instructors to teach the course.

​

Our final design includes 2 big sections:

  • the course outline and the instructor-facing brief;

  • the tangible coding kits for in-class teaching.

IN-CLASS PROJECTS AT A GLANCE

What activities are included?

What activities are included?

The overall structure of this course contains three step-by-step stages of learning with engaging group activities for each stage.


In stages 1 and 2, students will be guided by the instructors and the tangible coding kits to complete four practicing projects. The alternative paper version of all the tangible pieces is also designed for accessibility.

The overall structure of this course contains three step-by-step stages of learning with engaging group activities for each stage.


In stages 1 and 2, students will be guided by the instructors and the tangible coding kits to complete four practicing projects. The alternative paper version of all the tangible pieces is also designed for accessibility.

IN-CLASS PROJECTS AT A GLANCE

Stage 1: Make your name tag

Stage 1: Make your name tag

Starting with a simple name tag, students are able to construct intro-level codes and decorate their own name tags.

Starting with a simple name tag, students are able to construct intro-level codes and decorate their own name tags.

IN-CLASS PROJECTS AT A GLANCE

Stage 2: Safety at night: night sensor

Stage 2: Safety at night: night sensor

The second hands-on project focuses on teaching students about the importance of road safety at night and encouraging them to design a notification system. Students are free to decide where and how they would like to apply their systems (example: an LED light that automatically turned on when light level is too low can be attached on bag).

The second hands-on project focuses on teaching students about the importance of road safety at night and encouraging them to design a notification system. Students are free to decide where and how they would like to apply their systems (example: an LED light that automatically turned on when light level is too low can be attached on bag).

IN-CLASS PROJECTS AT A GLANCE

Stage 2: Be careful of titled bottles: tilt alarm

Stage 2: Be careful of titled bottles: tilt alarm

The third design project considers the potential safety problems in classroom settings. Students are able to make tilt alarms and creatively use them in classrooms (example: a tilt alarm with speaker can be attached to water bottle or trash can to warn students of fell-down containers).

The third design project considers the potential safety problems in classroom settings. Students are able to make tilt alarms and creatively use them in classrooms (example: a tilt alarm with speaker can be attached to water bottle or trash can to warn students of fell-down containers).

IN-CLASS PROJECTS AT A GLANCE

Stage 2: Safety in the Kitchen: heat gloves

Stage 2: Safety in the Kitchen: heat gloves

The last project shifts the situation to kitchens, emphasizing the cooking safety. Students are able to design and make a pair of heat sensing gloves.

The last project shifts the situation to kitchens, emphasizing the cooking safety. Students are able to design and make a pair of heat sensing gloves.

IN-CLASS PROJECTS AT A GLANCE

Accessible to all schools: paper version

Accessible to all schools: paper version

The last project shifts the situation to kitchens, emphasizing the cooking safety. Students are able to design and make a pair of heat sensing gloves.

The last project shifts the situation to kitchens, emphasizing the cooking safety. Students are able to design and make a pair of heat sensing gloves.

Let’s connect

Let’s connect

Get in touch for opportunities or just say hi!

Get in touch for opportunities or just say hi!

yanlinli2022@gmail.com