How we are going to redesign HotGloo (Part2)

Last week we started to provide you with insights on our redesign process. We started off with choosing a theme (space) and identifying a new key visual (the HotGloo spaceplane). This week we’d like to walk you through our next redesign steps.

Step 3: Research

This is one of the most important steps. We scanned the web for quite some time and compiled a list of the coolest web app pages.

These aren’t necessarily the apps we use every day but each of these websites has something we really love and look up to, ranging from a compelling headline all the way to nice call-to-action buttons, a strong key visual, great copy, an outstanding UI or a well done information architecture. We discussed, compared and shared a document where we noted our thoughts regarding these websites and rated them. Why also recapitulated and rethought all the great feedback that came from our great customers. What is working well right now on the site, what’s not or poorly working. We also revisited our wireframe survey we did by the end of last year and discussed the results. Piwik, our new analytics tool of choice, delivered new insights on which pages are working well, where are website visitors leaving the website and last but not least we also reviewed the Get Satisfaction Forum entries.

Step4: Strategy

Site Strategy:

We started with defining our own goals for the site. Where will the user land and how can we support him to easily find what he is looking for. How are we going to arrange our child pages, how many parent pages are there likely going to be? We wantet to really improve the user experience here. We thought about the ambitious goal to kind of take the new visitor by the hand and guide him through the most important hot spots of the site, making sure to provide everything he might need so that he will very likely sign up, try HotGloo for free and do everything we can to really impress him with our service so that he will become a paying customer.

Technology Strategy:

When thinking about the site strategy we also thought about which new or old/reliable technologies we want to use for the new website and the new editor. For the editor we tried something brand new: MongoDB (high-performance, open source, document-oriented database) and Node.js (event-driven I/O framework) in combination with Redis (advanced key-value store). For the frontend of the website we decided to stick to html, css, javascript and flash.

Content Strategy:

Regarding the content strategy we asked ourselves a couple of questions:

• How can we assure that we deliver top-notch content that will help the website visitor understand what our value propositions are?
• What content can we offer to meet the users’ expectations?
• How much content is appropriate?
• What style or tone should it have?
• Should we mix content with interactive experiences?

Step5: Site map

The concept phase started with outlining the sitemap. We usually do this in HotGloo first, simply by creating various examples of the main navigation. Therefore we create a navigation bar and add the pages to the editors sitemap. This visualization process really helps us defining the following important questions:

• How many parent pages are there going to be?
• Which tabs are really needed?
• How many child pages will we need?
• Which tabs could get transfered to the content section of the landing page or to the footer?
• Which content goes where?

Later on we broke it down and visualized the complete index of the new content with all the subpages to have a reference of which pages we need to wireframe.

Continue reading: Part3