User experience, interface design and technical direction for heritage lockmakers Squire. With the long term plan to create a fully integrated e-commerce platform, careful planning and considerations for future features and functionality had to be taken in to account in the early stages of the project. Our client was also seeking technical direction as they did not have an in-house team so we also managed the technical side of the project, suggesting e-commerce frameworks and platforms as well as organising a development team.
Research, strategy & planning
An initial proposal document was put together to outline our approach and the project scope. Interviews were held with key stakeholders as well as workshops with our client's target market. Store audits were also conducted to gauge exactly how Squire’s products were performing on the shop floor. We then set about assessing Squire’s product range, breaking them down into categories to better enable us to target specific audiences. Feedback from interviews and workshops helped us cement the brand pillars and begin work on the rebranding.
Objectives & key questions
From our interviews with key stakeholders and target audiences, we were able to establish our business objectives, assigning UX goals to meet them and success metrics to measure against. Key questions were also extracted from our research which were constantly referred back to throughout the project to insure we were meeting our users needs.
A more in-depth analysis of our clients digital offering was conducted, focusing on WCAG 2.0 guidelines, from product to purchase and project specific analysis into brand reassurance, product information and history and heritage. The results of the analysis enabled us to focus on areas where the current site was failing as well as taking on board where our competitors were succeeding and learning from these successes.
The next stage in the project centred around creating our prototype personas which we would use as models in our holistic/ content strategy, going on to form the basis of our user journey mapping and finally informing our site map. 7 personas were created in total and we ranked our key questions in order of priority to understand how to target each audience member specifically. We came to these conclusions by focusing on factors such as demographics, behaviour and habits as well as users needs and goals.
Our holistic strategy focused on the brand pillars and product ranges we had conceived, setting out to define what each of our prototype audiences would be most interested in. This strategy enables us to target each audience type with specific information on both the company and its varied range, with the goal of enhancing brand loyalty. Scores were assigned to each pillar and range in order to gauge what our audience, as a whole, would be most interested in.
A rough content strategy was generated in order to guide content creators as well as form a general overview of the site structure. Again, the content was ordered according to the brand pillars and sub categorised under some of the main talking points, features and functions that had been discovered in the initial research stage of the project. An ‘ideal’ journey was also created, as part of the content strategy, establishing the quickest route to product.
User journeys & site map
A couple of realistic scenarios focused around the brand pillars, key questions and user needs were drafted. These scenarios formed the basis of our user journeys which in turn helped inform the initial site map. The pain points unearthed in these flows were addressed and reflected in the structure of the site map and system flows. One of the points discovered early on was the need for the segregation of the two main product ranges into separate sites.
Design & prototyping
As the rebranding aspect of the project had been running simultaneously to the UX, a good foundation of design rules and principles had been established. This allowed me to focus on layout, responsive patterns and creating a solid framework within basic wireframes and then fine tuning (e.g. spacing and scale) when applying some of the established design rules. An InVision prototype allowed us to make periodical updates and quickly comment on and amend the designs on the fly.
Once all the stakeholders were happy with the design and UX portrayed in our prototype, we moved onto detailing the minute details of the design and patterning of the site for our development team. This document allows us to set a solid foundation for our developers to follow and for us to quality assess against. The document breaks the site down into modules and components, allowing for a flexible and agile build process.
Our client didn’t have their own in-house team so we provided technical consultation as well as source a development team to facilitate in the building of the product. Working closely with our technical director we assessed all the possible platforms and frameworks that were most appropriate for this type of build (mid-scale e-commerce platform). A comparison chart was generated in order to help our client gauge the best platform for their needs. We then set about putting our client in contact with all relevant parties, aiding them in the interview process and the hiring of team members.