Background

Deciding to lose weight and maintaining that weight-loss are difficult enough tasks without the guilt and self-doubt that plagues many aspiring slimmers.

That’s why Slimming World has over 400,000 members in the UK alone, who attend weekly groups and utilise their online services to receive support, recipes ideas and tools to aid their weight-loss journey.

Following UK trends, mobile traffic had begun rapidly increasing to the point where the management team asked me to lead on the creation of a separate, tightly focussed mobile website.

I was to manage the day-to-day development of the project, make recommendations as to the direction the site should take and lead on the UI design and front-end development of the site.

Discovery & planning

After clarifying the business objectives of the site with the management team - and ensuring that outcomes could be measurable - I followed with an analysis of the how members use the existing desktop offerings. This involved combing through analytics and understanding the users current satisfaction through online surveys and one-on-one interviews.

We also used this as an opportunity to get a sense of users expectations and priorities in a variety of contextual situations, for example, when at home or when out shopping. This proved valuable in justifying the prioritisation of features later on.

Recipe screenshot

Wireframing and design exploration

I began, as always, by sketching ideas then producing some finer wireframes of key page templates in Illustrator, in order to present concepts to the project stakeholders. I found that this kept a balance between giving a flavour of the design direction without spending too long on details.

In addition to the wireframes, I also produced a Photoshop mockup of the homepage in order to give the management team a more thorough idea of what the final site would look like.

Overcoming the problem of keeping the site simple and clean but retaining essential branding elements proved to be a reoccurring challenge. I strove to not add any superfluous visual decoration, although compromises were made in several areas in order to maintain brand consistency.

Build

I worked closely throughout the discovery and design phase with a back-end developer, which eased communication and clarification over features.

I was responsible for producing HTML templates along with corresponding CSS and javascript which was then continuously handed over to the developer for integration into ASP MCV.

This was our first MVC project, which required some research beforehand and a lot of learning as the project progressed. Luckily we had a talented and enthusiastic developer who was keep to enrich his own knowledge and best practices.

This was also the first large project in which we used the Sass CSS pre-processor from the start. We were surprised how easy it was to use and how much time it could save. We’ve since fully integrated it into our workflow for all new projects.

For simple javascript functionality we chose to use the Zepto framework. This mobile-optimised framework was much more streamlined but maintained familiar jQuery syntax.

Testing on a wide variety of devices proved difficult due to budgetary constraints. We tended to rely on a more guerrilla approach, taking advantage of our workforces own phones for testing.

As with all our builds, we first developed a ‘core’ experience which was then enhanced with Javascript. This progressive approach meant we maximised compatibility over a wide range of mobile devices and ensure that the site will still be functional in the devices of tomorrow.

Speed as a feature

Performance was an area I ensured was a core priority from the beginning.

We used typical performance best practices such as minifying CSS and javascript on deployment and used a javascript concatenator to minimise http requests.

Throughout the development process we regularly ran performance tests and looked at ways on the front and back-end to squeeze every last millisecond out of the site.

Summary

The site was launched before the deadline of the extremely busy new year period, when most aspiring slimmers choose to turn over a new leaf.

The site has since been developed and expanded with new features, and is now also used by US and Canadian members.