One hour website

Is it possible?

As an exercise, our studio decided to try. The goal was planning, designing and developing a website in one hour. And we did it…mostly.

For the exercise we wanted a real project. We chose a site with community value, that we already had full control over. We selected to create a new website for the Winterhaven Festival of Lights. The festival is the largest light display in Tucson, Arizona and one of the largest community events of the year. The timing was right for a new site too, knowing over 100,000 people would soon visit the site for festival information in December alone.

Here is how it went and what we learned.

1. Content and Direction

If there was one thing that made this project possible, it was having all the content in advance. The content is vital for planning a site. We were able to move quickly through the content plan, prioritizing key information that was most relevant. We then created a simple sitemap and started on some wireframes. This planning portion took us less than 15 minutes because we had so much information readily available.

A Discovery Phase is vital for success.

The second most important piece was having a site plan. Normally this is the result of a well executed Discovery Phase, but in this case we didn’t have that, instead we had me. I’m on the Festival Committee and therefore had the unique ability to give the direction we needed and make decisions in real time. For a normal project we’d conduct research, have meetings, communicate via email and phone numerous times, craft a plan and have the client approve it before we knew all the answers we needed to begin the design phase. The speed we were able to move at exposed how important the Discovery phase is and how dependent the next steps are on having this information.

2. Analytics

As we progressed through the wire framing and started developing a more detailed design for the site, we were having to answer the inevitable questions that arise when creating a responsive website. We were attempting to simultaneous create designs for mobile and desktop. At some point it dawned on us, we hadn’t yet discussed the analytics. Because I had access to everything for the site, we were able to quickly bring up Google Analytics for the past year. It gave us invaluable direction immediately. The site was visited primarily by mobile devices at a rate of over 60% phone and another 8% tablet! Over 2/3’s of all visitors were looking at the mobile version of the site. We were spending too much time on the larger screen size designs and should be focusing the majority of our effort on the mobile designs. Not that the desktop users weren’t important, but for this exercise and for this site, we needed to ensure that the majority of users were well served, and those users were mobile.

Analytics inform Design.

Analytics in this case completely shifted our design phase focus and allowed us to more effectively create a solution for the majority of real users and not some assumed user scenarios. Without the analytics, this site would likely not have been as successful as it was.

3. Clear Tasks

With a site map decided, some wireframes started and design taking place, our team began to shift from working together on a singular track to working separately on tasks that could now be performed concurrently. We had our plan, we had the analytics, we knew what structure we wanted; it was time to start building. We started creating the site files, setup a github repo, pulled in some assets, optimized images, chose a typeface, began coding the basic structure, inserted some content, setup our Grunt tools and started moving everything around to make it fit the design as it was evolving.

Defined tasks with clear outcomes save time.

Things then started to slow down. We hadn’t worked together so intimately, in such a manner that required predefined responsibilities and workflow. Normally this phase of a website build happens over the course of weeks and the tasks are handled for the most part in succession, allowing the steps to be more loosely defined. However, we were realizing that the compressed schedule was exposing the lack of clarity in what steps were being performed, in what order, by whom and how they are absorbed into the project.

Having participated in hackathons together, Zack and I were able to predict each others next move and collaborate efficiently using Git. But, these efficiencies didn’t exist between us and the designers. Our process hadn’t been streamlined there. Responsibilities weren’t clear and how we logistically shared images, text, styling, etc was creating a bottleneck. We needed to clearly define the tasks and how to share the deliverables.

The Result

At the end of the hour, which was more like 90 minutes, we had a nearly complete homepage and hashed out designs for the other secondary pages. We made a plan for the remaining tasks and over the course of the next couple of weeks, in our free time, we completed the site and deployed it. It came out great! We’re very happy with the result. Check it out and come on over to see the festival!

winterhavenfestival.org

But, Speed.

Almost done. Foreseeing the eventual load on the server and knowing that most users were on mobile devices, I spent some extra time optimizing the site to be lightweight and load very quickly. And it does. Our speed index is under 1000, which is Awesome! And according Paul Irish is a benchmark for how fast is fast enough.

How we think

We learned a lot, much more that these three things. We learned even more about each other, the roles we naturally fall into and how we think. As a studio with skill sets in design and development, we are realizing what distinguishes us is our strategic thinking.

Collectively our group has great experience in a number of fields. Each of us is accomplished in our craft with overlapping abilities. We are able to execute very high quality results for our clients. But that’s not the greatest long term value we offer. Above all else, we provide strategic thinking. Before, during, and after a project we guide our clients, asking the right questions and helping them make the right decisions. What we learned from this exercise is that together, we solve problems, and we’re good at it.

We help businesses grow by design, and we love it.

If you’d like to work with us, we’d love to hear from you. Email us at: info@openformstudio.com