Semantic HTML – Wireframing – User Stories – Great Lakes Shipwreck Explorer

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

Data

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.

HTML

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.

Atomic1

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.

Atomic2

Sitemap and User Flow

Using the Figma design tool, I created a sitemap to document user flow.

Map

I then began with low-fidelity explorations of user-stories for research-based personas.

Flow

Then I moved on to wire-framed storyboards depicting the same user stories with interactions on each page highlighted.

Story1

The resulting design documentation allows for cross-functional teams to iterate on the design and development of the site together.

Whole

Finally, I linked the wireframes so they might function as low fidelity prototypes for early user testing and design iteration.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s