Creating Hellogroup.com

Recently we launched Hello Group’s site after 4 years of (let’s say diplomatically) sub-optimal solutions. With the best intentions, getting a site together that everybody in a company will be happy with may never happen. When it is a design centered company this can be even less likely. As it is what we do and are passionate about, we all tend to have an opinion and want it heard. Of course we can’t take all opinions into account, otherwise the project will lack focus, direction and will be difficult to maintain progress and reach a launch date.

Other factors come into play such as content. Where there is content there are firm opinions that go to the very core of the strategic direction of the company and what is communicated externally about the business. The site becomes a vehicle that must satisfy so many factors (and people) that there is always a risk that it will not do anything particularly well.

Direction and collaboration The realisation of this fact early on, led to us having a core group of UX and visual designers working on the project together, after we had gained a clear strategic and creative vision of what we wanted to say. A day was set aside to see how far we could push the project, and though not all objectives were met it gave us a cohesive view of the design direction and interactive elements of the site.

We wanted a platform that tied together our other digital spaces (Facebook, Twitter etc) and did it in a way that we could easily build on. Once the design was decided we could brief the developer on something that was tangible and easy to explain. There was a lot of iteration and discussion between the visual, interactive and dynamic areas of the site between developer, designer and the UX team. Without constant dialogue the project would have become harder to complete satisfactorily.

We also had to involve the other parts of the business throughout in a way where their inputs would help shape the site but not derail the process of building to a deadline. I have no doubt that not everybody is as satisfied with the outcome as I am, but these issues will be resolved and importantly the site must be seen as a living entity that enables change as we go. It has been designed and built with this in mind.

Below are some factors, or principles, that led to a solution that for our market and our company’s values we feel is the right approach. A large part of the philosophy was realizing the importance of not communicating everything. That what you do not communicate is equally important as what should go on the site.

Simplicity What we really strived for with the new design was to produce something that clearly told something about the company, showcased our work, allowed an insight into our people and their interests. But we wanted it to be entirely easy to access, with minimal clicks and interaction. The main reason was that building the site is a first step before growing it, into something more experimental and ambitious. Rather than focus on grand designs we wanted to set a foundation for us to be able to move around content and present new ideas easily. More importantly using WordPress allowed us to have a CMS (though custom made) that allowed everybody to be able to edit and contribute content very easily.

Flexibility The front page is modular, meaning elements can be switched or turned off depending on the need of focus. News is an important part as we often do things beyond client work that are interesting and valuable to know. The main dropdown also allows extra elements to be inserted inside the structure of the site without interfering with the main navigation. Jobs, news and other elements will appear as they warrant the inclusion through the amount of content available to the user.

InteractionThe website works well on the iPad – some content may be missing (Flash based video – which will be changed) but it does not harm the experience of using the site. So designing for tablet usage has enabled us to see what we are producing is beyond the browser but more about the platform. We had to think about a dual way of looking at user interaction. Touching and clicking on elements on a screen have to have a common element of interaction. The areas needed to be big enough, give appropriate feedback instantly, and convey a way of interaction that is intuitive. Expect more in the future as this crossover allows us to explore this way of designing interfaces further.

PersonalityWhy show our people? Well apart from giving our clients the ability to work out who does what, we wanted people to put names to faces, and to see where they fitted within the company. As we are only a small number of people it is critical that those who may deal with us know who they are talking to and have the ability to get in touch directly. Not least it gives us a human angle. Humanizing the web is something there simply isn’t enough of. We also wanted to show what some of these people thought, wrote or created. The Follow section allows us to have an area that links the other spaces where we occupy (blogs, Flickr etc) and allow us to pour this content into a general area of interest.

Content creation The platform used by Wired, Mashable and TechCrunch is very accessible and is easy to manage content through a team that can collaborate through the interface. It also allows permissions to be set up that require different user roles to produce and publish the content. A very necessary element of producing a site is to ensure that there are methods to publish live, and instantly, when needed. WordPress allows this in a way that is supported by a multitude of plug-ins that ensure other concerns (such as SEO and social media) are addressed. Simply put, WordPress is a free back-end system that helps you run a website professionally. Yes we used extra coding to get things done how we wanted, but the system that runs the ability to add more content is out of the box.

Known issuesWe use a home made font solution to render Helvetica on many browsers. Chrome manages it the best but Safari suffers on the Mac (though not on the iPad due to the font renderer on the tablet). This has caused issues and will be rectified for the Mac user. Some elements of the animation of the list are a little clunky and these will be ironed out as we go.

Key people You will find success in making sure you stick to the goal and remaining committed to it throughout. Setting achievable deadlines and communicating that to the other team members is critical. Technical problems may delay a launch but resource issues shouldn’t derail the building of a site – that’s just bad planning or lack of foresight. Also a creative developer was critical to this being built – his can-do attitude with an eye for details and creative flair ensured we have a site we are happy with, and can improve easily. Without his skill it would have been much harder to achieve our vision for the site.

Also make sure you have somebody who can continually badger people to get things done (if like me you haven’t the stamina to do it yourself). I luckily has a great PM to help and she kept on at the team to provide what we had laid out in the plan. At times you will get disheartened but remember that your ability to achieve the goal is mirrored in your personal belief that it is achievable. Always remain positive and it can be done with dedication and team work.

A site for the future Conceiving, designing, building and refining a website can be a straight forward process or a challenge that will test the patience of all involved. Thankfully by adopting an agile strategy to design and user experience we managed to have a very clear direction quickly about how the site was organized , and the interaction and visual design was produced in a matter of days.

Content held us up and producing cases perhaps took (and takes) longer than we wish. But often they require feedback from all stakeholders and this takes time. What we do have upon launch is a site that has attracted attention and we are happy with. The best part is it is a platform that works well on tablets and laptops, we can add elements and ensure that we have a medium for communication that supports our demands.

This site represents a new beginning for Hello – and that was a key theme in it’s design. The designers managed to encapsulate this feeling in a look that is fresh, bold and in-keeping with the company. After all the work it is a very satisfying feeling to experience what has been built. The launch is just the start. The evolution of it can now begin…