The problem…
After scraping and cleaning a 6000+ entry set of data on Great Lakes shipwrecks, I aimed to create a useful ontology in order to allow the exploration of the data by users. How would the information be organized, how would it be structured, and how might it be organized visually to allow for easy exploration?
TOOLS
- Import.IO – Data Scraping
- Sublime Text – Semantic HTML
- Figma – Wire Framing/User Stories
The Solution…
Re-Usable Semantic HTML
Organizing the information into a clear ontology and hierarchy I created a semantic HTML structure independent of the final visual design of the site. Whether this info is laid out on a large or small screen or with any number of stylistic elements, the base information structure will remain applicable and understandable. It can easily be plugged into future site re-designs.
Semantic HTML to Atomic Design Elements
The idea of Atomic Design is to create re-usable smaller structures from the semantic HTML elements and then use them to build the larger site elements. I created base elements first, then using them to construct larger re-usable structures, such as the “info card.” Changes to the base elements are then reflected throughout the larger site structures that utilize them.
From HTML to Wireframe
Using the information structures from the semantic HTML and the principles of Atomic Design I utilized the Figma design tool to create wire-frames. These lo-fidelity frames allow for an exploration of how users might explore the data with this tool. New design iterations can be made and tested quickly.
Sitemap and User Flow
Using the Figma design tool, I created a sitemap to document user flow.
I then began with low-fidelity explorations of user-stories for research-based personas.
Then I moved on to wire-framed storyboards depicting the same user stories with interactions on each page highlighted.
The resulting design documentation allows for cross-functional teams to iterate on the design and development of the site together.
Finally, I linked the wireframes so they might function as low fidelity prototypes for early user testing and design iteration.
