Project summary: Online page(s) presenting gift options for our clients to purchase in our offline stores for special seasons such as Valentine’s, Father’s day and Mother’s day
Company: El Corte Inglés Grandes Armazéns S.A. (Portugal)
Duration: January 2011 to present day
Role: I was the lead designer on the project. In the first years I did everything by myself whereas in recent years I was able to divide the work with my team. They would add the content to the design I established at the beginning of each campaign and I was able to concentrate more on the UX research and analysis.
I was approached by the marketing executive responsible for the St. Valentine’s campaign. As per previous years, it was suggested we create a simple digital catalogue of the gift suggestions we wanted to present to clients.
I was asked what would be the best solution to increase visitor awareness and build site traffic in order to create a more impactful campaign as the executive felt that the online catalogue might be somewhat boring.
Unfortunately we did not have a complete e-commerce solution implemented at the time. We only had an online supermarket, whereas our offline department stores had various products in fashion, electronics, sports, appliances and many more.
2. Discovery / Research
I read various articles about SEO, UI and best practices for e-commerce layouts.
Google Analytics: I analyzed our google analytics data from previous years to understand the values of these sites.
Competitor Analysis: I looked into what our competitors were doing while trying to understand what might be done on an international level.
Stakeholder interviews: I also sat down with colleagues and store managers to understand what they wanted and/or expected from the campaign.
3. Requirements / Hypothesis
Initial success was to be measured by sessions to the site however once we were able to connect to our online store we could also begin measuring growth of online sales in the selected items for this campaign.
SEO: We had to keep in mind good practices such as page speeds, content structure and UI, but still presenting as varied an assortment as possible.
Resources: We had limited resources with a limited budget, but wanted to present a full experience to our users. This was also a very different solution to what our colleagues in Spain were doing due to our different realities (They already had an e-commerce store), so we had to come up with a local solution. Initially I was the sole member of the creative team, so I needed to create a simple solution.
Personas: I created simple written personas to guide my decisions (at the time it was just some simple sentences or words) and direct the site to the right people.
User Flows: I tried to layout the flow of our customer from our homepage, emails or display campaigns into the site and what they might expect. Initially I like to sketch out a quick user flow in pencil to be easily edited and go over it with ink when I’m happier with it. To present to stakeholders I created a cleaner version using Gliffy. (click on image to see large version)
I decided that the best options was to go with a single page presenting the suggestions divided into categories by changeable tabs.
I put together a High Fidelity mockup to present to the marketing executive and our director.
The look and feel were approved right away, whereas as the content took an extra few days of varying corrections until the project was fully approved. (In later years I have learnt the benefit of doing low fidelity mockups in the initial process , which saves a lot of time and headaches)
I created a fully functioning prototype directly in our testing server which meant that the experience was as close to the final result as possible. Content was loaded into the site while we constantly made tweaks to the look and feel according to suggestions from both the marketing and retail department.
The site was based on e-commerce sites of the time with a limited width of 960px and no connection to a database.
5.1 Layout 2011-2012
This layout was very static with a tabbed navigation between multiple pages within the minisite at a width of 960px
5.2 Layout 2013-2014
I was finally able to add links to selected products on our online store as well as a simple zoom option on products using the Fancybox plugin. The layout also adopted a pinterest style look and thus reducing the waste of space. The results showed a substantial increase confirming that our decisions were correct.
5.3.1 Layout 2015
Working with a similar layout as the previous year and with a focus on increasing the conversions to our online store I created a larger call-to-action button making it easier for customers to see. I also adopted a responsive layout using Twitter Bootstrap and a larger 1120px width. The original tabbed menu was replaced with a filter for each category and another filter to order the products according to price. Due to the increase in size we decided to forgo the zoom button. Page views decreased 65% but sales increased 1167% proving that the larger button was a good option, but we needed to re-work the site for better overall results.
5.3.2 Layout 2015
After analyzing the data from version 5.3.1 I decided to return to the multiple page minisite in version 5.2 but with the e-commerce interaction of version 5.3.1. By doing this I hoped to keep the positive growth of online sales, but create less confusion and clutter by dividing the content and also reducing load times. The decision was the correct one and we noticed an enormous increase in traffic.
Since its first implementation in 2010 sessions have increased 58%.
Online sales of the specific products presented has grown 430%
Participation of other departments in developing the content and interaction with clients has grown.
We’ve since managed to integrate links directly to the products on our online store.
Much of the content for the site now developed before adapting the campaign for other formats both in store and print media.
What I learnt
This was one of the first projects in which I was able to sit down and exchange ideas with colleagues in various departments, so it was a team effort all around and helped me to realise the importance of getting various inputs and keeping other’s in the loop.
I also learnt the value of trying to understand our customers and the importance of understanding what products make sense with the theme.
These sites gave me the opportunity to work on my skills in HTML, CSS, Jquery and most recently Bootstrap.
Over the years the project has had ups and downs and it hasn’t always been easy convincing execs of the best course to take, but luckily the positive results have backed up the decisions made.