My DOOMed Web Design

The process that DOOMed my design

PURPOSE

I’m going to walk through a simplified example of my typical design process. The product I am designing here is a website intended to showcase and offer a free download of my hobby project, called Doom Ascension, where I am remastering the original ’90s DOOM and DOOM II video games to have 3D animated models and modern graphics. All images shown are by me, but there was a team involved in the process.

PERSONAS

Before the team starts to design the actual product, it is essential to understand the people who it is intended. One standard way of doing this is to create personas based off of research or what we might already know about the target demographic. Personas are created from identified archetypes found within the target audience and will help to inform my designs in later stages of the process.

The following example persona contains data gathered through online target audience polling. Although this method is beneficial by avoiding time-consuming and often costly research, it still requires the ability to analyze and hypothesize the potential behaviors of the audience, at least on a rudimentary level.

CONCEPT MODEL

The following concept model iterations show the connections between abstract ideas, such as goals, desires, and notions, based off of the assumptions that the personas might use to navigate and interact with the product.

I always start with a pen and paper to quickly scribble down my ideas. These drawings will potentially go through many iterations before the model is adequate. This process is almost always done in collaboration with a team or stakeholders in some way, preferably extensively.

USER JOURNEYS

Once I have an acceptable concept model, I create user-journeys based on my personas, and from there I illustrate them. The user journeys are what I see as the main purpose for creating personas. If the personas are for identifying archetypes, the user journeys are for mapping out the needs and pain-points of those archetypes.

SITEMAP

Using the sitemap and concept models, I can now begin to map out the product catered to the target audience’s needs, which were established in the User Journeys.

WIREFRAMES

With the sitemap as my guide, I can now begin to construct the wireframe which will mark the beginning of the visual design stages of the project.

STYLEGUIDE

Having narrowed down the site’s form and functionality I move on to create a style guide.

I’ll take inspiration for the product’s colors and font face choices from preexisting product branding and target audience notions about the product domain.

SURFACE COMPS

The surface comps will be very close, if not identical, to the product on delivery. Here I’ll polish the wireframes and apply the styles established in the styleguide.

— Landing

— About

— Download Mods

PROTOTYPE

The purpose here is to be able to present an interactive preview to the development team and stakeholders in relatively quick iterations. Prototypes not only serves as a proof of concept and guide but also allows the discovery of possible improvements to the final product. There is often a temptation to add features outside of the scope, but this should be done with caution or wholly avoided until future iterations.

Mobile Prototype:

The following link will take you to the mobile prototype of this project.

https://invis.io/Z7ERSWUFB#/267504532_Mobile_Landing

Desktop Prototype:

This link will take you to the desktop prototype of this project.

https://invis.io/GZF0P7TXN#/267507660_Desktop_Landing

CONCLUSION

While there is currently no perfect system for knowing your audience and knowing how to design for them, the above techniques are quite powerful if fueled by extensive domain knowledge, intuition, talent, and skill. Without those things, the product is possibly dead in the water.

The provided examples did not make it as the designs for the final product. Sometimes you discover new information or something in the field may change early in the design process. Designers should be able to adapt quickly and with determination and confidence. Sometimes the stakeholder won’t like what you show them, and sometimes you won’t be able to persuade them.