We're almost there...
Interactive website • Emerald Hounds
Building a modern, fun interactive website for an Australian fossicking company.
UI Case Study • 2020 • 15min read

Overview

'Emerald Hounds' (EH) is my invented fossicking adventure tour company, based in Australia.

Rockhounding/fossicking is a bit of a forgotten hobby, probably something your grandparents do in their spare time. You'll find most hobby fossicking, geology and lapidary websites are super basic, looking like they're straight out of the 90's.

With this in mind, I wanted to create a fun and playful website.

My Role

• UI Designer

Tools

• Figma
• Adobe Photoshop

Project Type

• Exporatory

Problem

How might we create a new website for Emerald Hounds, so that it makes it fossicking modern and playful?

As someone who personally really enjoys geology and looking for minerals (nerd alert), I am constantly surprised with the lack of modernity associated to this hobby. Most of the websites I have explored to learn more information are really outdated and basic.
I wanted EH to be the new kid on the block, and make learning/reading about fossicking more enjoyable for their online users.

"Let's make fossicking fun, and exciting to learn about!"

Research + Discovery

Client brief

I started with the invented client brief (provided by my partner):
"We want a playful and interactive website, making it enjoyable for the whole family."

I began putting together a very simple brand style guide for EH.
Key takeaways: approachable, family-friendly, playful, local, and professional.

Observations

Conducting initial market research on other fossicking/rockhounding/lapidary websites currently online, local to Australia. The below are screenshots of my top Google search results.

As you can see, most of the websites are old school (however, very entertaining to explore!). The only exception was 'Outback Opal Tours' whose website was modern, clean and simple.

Key insights:
• Forums are widely used.
• Current sites are not kid-friendly.
• High ratio of words to visuals.
• Very little interactivity (eg: slideshows, animations/interactions, videos, socials etc).

Creating a Solution

My first jumping off point was to start by building the bones of a basic website. I began sketching the basic Information Architecture of the site, and what the key components were.

Basic IA

Wireframes + Prototyping, V1

Next, I began by sketching out my low-fi wireframes, followed by a couple of crazy eights to show interactive elements.

Visual hierarchy, navigation, colour, typography, iconography and interactive elements were y focus whilst digitising my frames into Figma.

Initially, I used a 2 column grid layout, then revised to 3 columns instead, as the content fit more aesthetically on each page. After tweaking the typography and colours several times, I was ready to start adding content and images.

Low-fi sketches

Crazy eight time!

2 column grid layout

2 column grid layout

Revised to a 3 column grid layout

Starting to apply colour, type, and images

Figma prototyping function showing interactions for EH Site 1.


Click on the video below to view my prototype, V1:

Testing EH Site 1 prototype.

Usability Testing

General feedback:
• Flows well
• Contact page hard to find
• In 'Upcoming Trips' where does the 'Enquire' button lead? Contact form? Email app launches?
• Add Testimonials/Reviews page
• Add comment box under each Past and Upcoming Trip to get the community engaged/provide insights of how the trip well for future participants.

Taking my prototype to the client (my partner), I was told "it's a great start, but [he'd] like it to be more fun and interactive". This left me wondering, what did he mean but wanting MORE? So I began thinking of creative ways to make this site more exciting.

Reiterate: Website Concept

Top possible solutions:
• Add more videos, animations and interactions.
• Gamify the website.
• Add music, or sound effects.

Reiterate concept of website:
With gamify learning products on the rise, I decided to head down this path. This way, I'd also be able to incorporate my other ideas of animations/interactions, and sound effects (further down the line).
As I have a strong Events background and understanding what motivates people moving from one space to another, and what they need to complete their tasks it seemed like the perfect route to explore.

This idea of this next phase made me really excited, so I got started straight away!

Reiterate: Low-Fi Wireframes, V2

Back to paper and pen. Below is a slideshow taking you through the wireframes of the site.
Key
Blue items = animation applied (so user knows they can interact with it).
Pink items = other animation and interactions

Orange post-it notes = overlays.

Taking the idea and showing the client the slideshow above, we decided to move ahead with hi-fi wireframes and start applying colour, fonts, and images.
Each page backdrop and clickable element was created using Adobe Photoshop and Figma.

Making custom backgrounds in Photoshop

Making custom backgrounds in Photoshop

Vision: the light from the user's head torch would follow the user's cursor around the page

Making custom backgrounds in Photoshop

Making custom backgrounds in Photoshop

Making custom backgrounds in Photoshop

Prototyping

Continuing to use Figma, I created some of my vectors and used some fo the content from the original site I had been creating.

The build in progress...

Click the video below to see Prototype, V2!

Testing EH Site 2 prototype.

While building my V2 website, I ran into a few roadblocks. I was struggling to fully bring my idea to life.

Some of the challenges I faced:
• When you enter the cave and the user/fossicking buddy is on your bottom left (hello inspiration from the OG Microsoft 'Clippy'), I imagined their head swivelling and their head-torch following your cursor around the cave.
• I imagined the clickable/interactive items to have small animations when you hover over them, like a wiggle or slight pulse (instead of the clunky gif animation I ended up creating).

Usability Testing: Both Websites

Conducting usability testing with friends and family provided me with some great feedback.
Top insights:

EH Site 1 was more modern, adults preferred it to locate information, and said it was easier to navigate.
All participants loved the concept/surprise and delight from the interactive and dynamic EH Site 2.
• Participants still wanted the gamify version to appear somehow on the first version.

Reiteration: Wireframes + Prototype, V3

With the above feedback, it was clear I needed to somehow merge EH website V1 and V2 together to provide users with the information they need, whilst still offering the unique surprise of the exploratory game-like experience.

Possible solutions:
• Use the Welcome/landing page as the cave entrance, and the user enters the site through this immersive portal-like experience.
• Have the user/fossicking buddy from site V2 at all times on the page as an interactive form of help like Microsoft Clippy.

In the end, I decided to include V2 as a mini-game/adventure element on the V1 website. Users can dig for gems, crystals, minerals and fossils, as well as receive points and have obstacles like rocks falling (or maybe trolls!). This way, the user has the choice to opt in or out, has less accessibility issues and adds a hidden element of fun to be discovered.

Due to time constraints, I have not yet combined these two ideas and created Prototype V3.

Learnings + Next Steps

Learnings:
• I should have worked heavier on strategy at the beginning of the project by doing more interviews, surveys and user journeys.  
• Conducting Usability Testing after digitising my low-fi wireframes before adding UI elements.
• I spent too much time building a nice looking prototype of EH website V2 before gaining critical feedback from users. It took a lot of time generating vectors and graphics, when I should have spent that time interviewing potential users to see what parts worked, and how to continue building.

Next Steps:
• I plan to incrementally work on on this project and combine V1 and V2 websites together, and looking forward to seeing the result.

Overall, I am happy with what I achieved and the things I learnt during this project. I challenged and pushed my abilities out of my comfort zone by using Figma (never used before) in more depth, as well as designing essentially two different types of websites from scratch, then merging them together for a third.

If you have any comments or feedback, I'd love to hear it! Send me an email at emilyrose.barr@gmail.com!