The Evolving Website Process

From Then to Now

One of my first projects at Iron Design was a static small-scale website.  It involved, roughly, a 20-page sitemap, and included very little dynamic functionality. The website was only designed for desktop computers — no mobile responsiveness. The process we followed simply involved creating a wireframe and refined design iterations created in Photoshop which were handed off to development. Those designs were directly translated via HTML and CSS to result in the final website. It sounds like an archaic website standard to follow today, but four short years ago, that was the standard.  It’s hard to believe, I know, and a good reminder of how quickly the nature of the web is evolving.

Milestones not Rosetta Stone

Our current process is the result of years of defining, building, and adjusting both our creative flow and the relationship with our developers.

brainstorm_wireframes

Not only have we reevaluated our process as a measure of success and failure, but also as a way to evolve with the advances in technology, and to transition the site into the client’s hands as smoothly as possible. Our web environment largely drives the way we design, and how we push our clients’ vision. I think that, with the adaptation of responsiveness, our web process will no longer be a set-in-stone rule book anymore, but more of a list of milestones we aim to reach that align with our scope, budget, and timeline.

The Talk

We initiate with an in-depth discussion with our client on the what / why / when / where / and how of their website goals.  Some of our preliminary questions include “Why have you decided to change your website?”, “What do you want your website to do?”, and “How involved do you plan on being post-launch?” Once we feel like we have a really good understanding of our client’s intentions, we then hit the books and do loads of research over loads of caffeinated beverages. (Some of us are coffee drinkers, and some are Mountain Dew-ers. It’s all good.)

Establishing Hierarchy

With our research curated into an action plan, and with wireframes that demonstrate how the structure of the site can situate their desired content, our clients are presented with the next milestone in our process: content hierarchy. Often our clients are excited to jump into UI, but before we can talk colors and fonts, it’s really important to establish the content priorities. What is most commonly sought after by your site users, or what do you want to really drive home in your messaging? On the other end of the spectrum, what content is your analytics determining as outdated or unuseful? By de-cluttering and re-organizing your content, we can present users with a clear picture and give them an intuitive experience that takes them to their destination quickly.

The Fun Stuff

So we do a lot of talking in the early phases of a website project. But as the visual stuff begins, the studio quiets to the soothing hum of technology.

kim_UI

At this point we’re exploring everything from colors to photo styles, fonts to button styles, hover effects to plugin tools, illustrations to sound. The web is a universe of experiences and we want to make sure we create the right one for our clients and their site users.

Demo Day

No, not HGTV demo day, website demo day. And unlike the former, our demo day is more of an in-progress, iterative preview of the end result. We demonstrate our in-progress designs in the context of how they’ll actually be experienced: on a phone, tablet, laptop and desktop.

 

It’s really important to us to keep clients in this digital mode of thinking for the remainder of the project, as we’ve found that printed website UI results in an untrue, anti-climactic experience. You can’t scroll, click, hover, zoom or experience your design really filling the browser in an immersive way. Demo day is about getting a genuine reaction to the design from both the client and test users if they’re available.

The Burning Ring of Content

Following design is the daunting task of creating content.  Each website’s content has to be tackled differently as our clients all have different stories to tell and different means to develop their content. Some clients choose to simply port the content from their old website into their new one, but most want to embrace the fresh start and re-write their story. Sometimes we’ll write 100% of the content in-house, and other times it’s more of a collaborative effort between the client and designer. We’ve even experienced serious launch delays because of the obstacle that writing and photography can become for our clients. It’s best to keep it real and consider your means, budget, and timing in order to decide how you want to handle content creation.

My Teacher Hat

If the website is created in a self-editable platform like WordPress, or with a custom-built admin tool, and if the budget allows, we provide our clients with the knowledge and tools to maintain their website like pros. It’s good stuff and it lets our clients feel comfortable taking over their own site once it has launched.

3, 2, 1, Launch

Launching is exciting, weird, and strangely quiet all at once. It’s a big deal but at the same time such a subtle event. On launch day, many wonder “Does anyone know? Has anyone seen it yet?”

Iron_blog-post_images

This is actually an intentional step called ‘soft launch’. We quietly put the site out on your permanent URL for a week or two to gather feedback from anyone you chose to share it with. Once we’ve fixed any bugs or tweaks, we then ‘hard launch’ which is really just the act of promoting your website to the public.

In Conclusion

A successful website is an evolving marketing tool and is never truly complete. In addition to the internet being an ever-changing environment, it loves time-relevant information, and senses if a website has remained untouched for a long time, (which can actually bump it down in a search listing!) So tweaking your site, adding fresh content as often as possible, or including a blog section are all good ways to keep your site relevant and alive.

 

Building Awareness for CSEC in Tompkins County

Tompkins County Youth Services came to us with a tough topic to tackle: Commercial Sexual Exploitation of Children in Tompkins County. They were concerned that the issue is not openly talked about, making it hard for members of our own community to recognize the signs of exploitation, and in turn serve as a resource to a child in need. They were looking to create a campaign that would stand out: serious without being dark, positive but not cheerful, and impactful while remaining tactful.

Because kids and teens experiencing commercial sexual exploitation greatly fear speaking up against their own mistreatment, our first goal for this campaign was to spread awareness that sexual exploitation happens in Tompkins County. Our second goal was to help the community recognize the often intangible signs of sexual exploitation with our compelling tagline: “Can You Hear the Silence? Listen for the Signs.”

SEYP_sketch

The next step was coming up with a visual representation of this tagline, keeping in mind our client’s initial goals for this campaign: being informative and impactful without being dark. After days of sketching, we came to the conclusion that a minimalist illustrative style would set this campaign apart from the rest.

CSEC-posters-persp-TEST

Billboard_mockup

The tagline paired with the minimalist illustration voices the message right away, in the right way. The posters are quiet…almost chilling. There are no photographs of crying children, or imagery of chains, or overwhelming information shouting off the page. The other elements of the campaign, such as the website, handouts and palmcards, gave us more room to be informative. The illustration style from the posters is echoed on the handouts, but this time is paired with a bit more copy. The client chose to extend the campaign into other media including mall signage, billboards, and bus ads throughout the region.

collage