Trailz Wireframes

Trailz (we’re taking suggestions for names…) is a project by myself and Sam Sadtler exploring better and more efficient collection and organization of the information you find and want to save on the internet. 

(header image from: http://www.adventure-journal.com)


It’s about that time of the term: mid. That means critiques, check-ins, and getting shit done. So for this week’s crit we presented the first serious set of wireframes/Ux documents.

Up until this point Sam and I have been talking about the purpose of the project, what we’d like to accomplish, and developing the codebase – essentially trying to get a sense of the what the thing is and get the basic functionality working. We’ve been so focused on the technology and the idea that we haven’t stepped back to think much about what the user experience is. And that’s really what we’re trying to improve on: the user experience of finding and saving information on the internet.

So here’s our first draft…

The Wireframes

This is the current state of your browser. Tabs. URLs. Images. Text. Video. Links to more of all of the above. Lots of information.

Some you want. Most you don’t.

Trailz_Ux-01

These are your bookmarks. It’s a mess. A tangle of nested folders. Search is “meh”…

Most of the great stuff you’ve saved is lost in the pile of info.

Trailz_Ux-03

Here’s your history. You’ve never looked at it. Unless you’re trying to get someone in trouble…

Trailz_Ux-08

Trailz is a Chrome extension that helps keep track of an organize the information you find online. It’s goal is to be useful for both directed search and free exploration. When you create a trail a sidebar appears and saves your current location, which appears as a node. New nodes are appended to the end of the list. Clicking on a node takes you to that site.

When a site (or information on a site is saved) Trailz automatically generates and saves a list of relevant, searchable keywords. This makes finding trails, pages, or info easier later. And will make nesting folders unnecessary later.

Trailz_Ux-04

Multi-valence nodes represent websites that you’ve saved multiple webpages within (e.g. www.site.com, www.site.com/about, www.site.com/imgs/coverart). Those nodes collapse and expand as needed. The filled-in node represents the page you’re currently on.

Trailz_Ux-06

You can have multiple trails open at one time, across tabs.

Trailz_Ux-07

If you don’t need to save an entire page, you can highlight text, select images or video and just save that information.

Trailz_Ux-09

Whatever you save ends up on a card within your trail. A “trailhead” view is a digest view of all the site and information you’ve saved. Here you can add/remove keywords, review information, make connections, annotate, and share.

Trailz_Ux-10

This “trailhead” view is the dashboard. It shows an overview of your trails and shows a bit of meta-data related to them.

Trailz_Ux-12

This view is a bit more dynamic. At a glance, it shows your saved nodes in a tree structure. You can see where your research intent or approach changed.

Trailz_Ux-13