George.com Site Redesign
George.com
site redesign, wireframes, UI, UX, research, testing, A/B testing, prototypes, e-commerce
What happens when a client feels like their website is outdated and needs a breath of fresh air? George has used the same website wireframes for the past 5 years and it was time for an update. Let's take a look at how a complete site relaunch can look.
Brief
The main focus of this project was to propose a solution which allowed the client to have flexibility within the site for layout, design and functionality on the homepage, campaign pages and category landing pages.
​
Key objectives
- To identify key market place step changes to ensure that George.com remain inline or ahead with competitors.
​
- Create flexible wireframes that can be created at a fast pace for homepage, landing pages and campaign pages for both desktop and mobile.
​
- New wireframes should use live text where possible to ensure better SEO.​
Proposal - Competitor Review
Competitor research showed the performance of a category page was determined heavily by a page's layout. From that data, a dynamic layout with the capability of adding and removing modules were proposed. This would help:
​
- Increase coverage of multimedia assets
​
- Rectify low performing category landing pages by being reactive to digital and marketing changes
​
- Invest development time to create better campaign assets to highlight functionality and interactive content.
Proposal -
Tiers & Modules
In order to suggest a modular approach, a breakdown of the current site structure of how these would work within each page was made. Through separating out horizontal blocks known as tiers, where modules could reside, the basis was created.
​
This would be easy to understand which part of the page would be updated when a new brief was created. Using a maximum of 8, and a minimum of 1 tier per page.
​
With the tiers in place, the modules were next. How they would look, what content they would hold, responsiveness and how they were to be built on a weekly basis.
Proposal -
Module Development
By looking at the current site to see what common themes were used, and how creatives were being communicated - a total of 9 responsive modules were built in Sketch and added to a library.
This allowed the designers to create a page structure by inserting a module per tier. The automated process allows for consistent pixel dimensions for design, slicing and passing creatives over to the developers.
Furthermore, the library continues to grow and can easily be modified, added and deleted for new modules.
UI Library
For the relaunch, a UI library was also made. The UI library was primarily based on the brand guidelines, however the buttons were made a bit smaller and rounder, overall the design was cleaned up.
A quick look at how easy it is to build a page with the new modules.
Testing - Usability
5 participants compared the current site with the new module format. However, an obstacle arose as during this time the Christmas creatives were competing with non promo creatives.
During the testing, the participants were asked how they felt about using the 2 sites, and try to shop for an item they could buy.
​
From this testing the information gathered were as follows:
- Price points are useful to set realistic expectations.
​
- Every aspect of photography should be relevant to the season, whilst clear use of photography drive quality perception.
​
- Use of plain language in copy and CTAs reduces guess-work and increases users' confidence.
​
- Model and product photography to aim for an equal representation of genders and ages.
Testing -
Remote A/B testing
After conducting the usability testing the next step was remote testing at 650 participants. In these tests a control page, and A and B version were used. The participants were asked to answer questions based on their interpretation of the page.
​
The results showed that:
- Price points role was to complement the information users gather from imagery, aligning their cost expectations with what they would find if they decided to click forward.
​
- CTAs should not have visual inconsistencies (mix of CTAs, font and colours) as this drive low-quality perception. As thus, CTAs should have a clear, plain language and consistent colour coding to help the users familiarise with the UI quickly.
​
- Imagery should be represented by George's expected look and feel of vibrance, cheerfulness and positivity. Furthermore, use of large and clear imagery allows a more immersive experience.
​
- Layouts should have a clear visual rhythm, conveying the "flow" of the page.
Development &
Internal Process
The redesign of the wireframes gave an unique opportunity to improve the development process substantially. The infamous George build was monotonous, copy & paste heavy and incredibly time consuming.
​
The new tagging Excel sheet contains all the information required for build (tiers, modules, CTA, copy, alt tags, links, analytics tags, etc.), which meant an autonomous script process could be set up that grabs the data and builds the page as all modules uses the same HTML and class structure. This in turn removed the need for the developers to copy and paste.
