Project Brief

Sioeye’s IRIS4G™ action camera was the first of its kind—a live-action camera that gave viewers the opportunity to see the action up close. To pair with their Kickstarter campaign, Sioeye wanted to create a digital experience that educated users and captured pre-orders to help generate buzz over the brand and product.

Process

As a team we brainstormed all of the pages we wanted to include on the website and then arranged them within top-level categories to help organize the content.

We defined the user flow based on the required actions to complete a successful pre-order or purchase. The user has multiple entry points from ads, search, direct links, and the kickstarter page.

The sitemap includes all primary and secondary pages, and navigation hierarchy. Footer elements are listed separate, but are included as a static element across all web pages. The sitemap provides an inventory of pages for minimum required content creation.

I sketched three homepage layout options. One option was an organic full page layout with some light separation lines, the second was full screen pages that blocked off the different types of content, and the third was a full page layout with sections blocked out in different colors.

I created wireframes of the key pages based on my initial sketches to better explain the concepts to the team. After a bit of deliberation, the team decided they wanted to move forward with one option and create high fidelity wireframes to share with the stakeholders.

View low fidelity wireframes here. (Selected option)

To gain buy-in from the stakeholders we presented these high fidelity wireframes to demonstrate what interface elements would exist on key pages, the translation of elements between devices, and show global navigation.

We also used these wireframes to conduct initial usability testing with a small group of users.