Deepening Customer Engagement through Interaction

Client: CoolMiniOrNot - Dark Age Games

Technology: HTML5, CSS3, Javascript and JQuery

Brief: Design and develop an interactive website that allows both veterans and new players alike to explore the world of Samaria and learn more about the various locations and characters.

When the marketing director and product owner for Dark Age games first told me the idea he had for this map it was an intimidating task but also very exciting. Whenever I am approached by someone with an idea that starts with, "I don't even know if this is possible...", I get very very excited. The idea was to create a map with some of the new locations and characters from the most recent releases. This map could be explored and clicked on to reveal details about the various locations on the map and who inhabited the region. Main goals for the map we to encourage exploration and a feeling of discovery. With this in mind I began to establish key features that could help lead to this feeling:

Research

For the research portion of this project I spoke at length with the stakeholders and product owners about how this map should function inside of the community. We discussed what their vision for this map could be inside of the community. I also spoke with a few of the players of Dark Age to hear what they wanted out of this project. From these user interviews. I had a pretty good idea of what kinds of goals could be set to guide the rest of the design.

Goals

Exploration - I wanted to imbue the map with a feeling of travel and movement. This meant that the map should be able to scroll and move with user input
Remarkable - Dark Age games has a very tight and loyal user base. Because of this, I wanted to create something that would be easily shareable and new from anything that Dark Age Games had put out before.
Portable - Mobile first design is here to say. This was a primary concern as it lead to the success of step two. If a player has to open up a laptop to see the app then it not shareable.
informative - The app needed to really be useful. Users should be able to learn more about the various locations that they are playing their games in. Also it could serve as a map for ongoing campaign style games.

With these goals in mind I began to sketch user flows and initial wireframe sketches.

User Flows

I began by working through how I imagined a user could use the site. What features would they need to accomplish these goals.

Wireframing

Once I had an idea of my user flow I began to develop wireframes. Wireframes help me to understand how all of the information from the user flows can be laid out as well as how the user will move visually through the application. I focus on major features and layout instead of visual style. I do two major round of wireframing Low Firelity and Hi Fidelity. The low fidelity wireframes are about getting as many ideas on the page as I can and thinking through what kinds of interactions the page will need to accomplish the goals that were set out initially.

Prototype

Prototyping is where I begin to lay code to screen. While prototyping I begin with the most basic MVP to test the most basic of interactions and quickly build upon the small successes while eliminating the attempts and ideas that are unsuccessful or out of scope. These ideas can always be added later but the idea, for me in this stage, is to be constantly moving forward. I try not to get hung up on the details or design just yet. Its about refinement and speed.

Prototype #1

This prototype was a simple overlay onto a poster of the art. It had no scrolling, zooming, or responsiveness but it was a quick way to get the ideas out and begin building momentum. From this prototype I learned the importance of the scrolling and zooming interactions and moved these to the top of the priorities.

Prototype #2

Taking the lessons from the first prototype I began to work through the interactions of the second. This one would need the scrolling and exploration feeling. To make the experience seem to be a large scale exploration survey I decided on a full width layout with only a small navbar at the top. In this version the information would be displayed as a small pop up next to the location. This prototype was successful in that it taught me about the feeling of the map. The pop idea wasn't working though. It was clunky and I didn't like that in certain areas it could block visabilty to other locations.

Prototype #3

For the third prototype I designed a sliding info panel that would stick to the side of the screen and allow the map to remain completely visable for 70% of the screen width. This approach felt the best and is what I began to iterate on.

Analyze

Now that I had a working functional prototype I went back to the product owner and marketing director and shared what I had learned. Together we discussed more of the business goals, prototypal accuracy, other key features. At this stage it became evident that the info panels should show the game models themselves and not just relay information about them. This could lead to a boost in sales as well as knowledge of the factions which research showed is a key feature of the brand.

Iterate & Deploy

This last cycle of iteration and delivery was the home stretch. I worked through the design and refined the usability and speed.Optimizing images and cleaning the code for deployment. Below is the final result of the project.