Branding + Mobile Site + User Experience

User-first web platform for Kyocera Document Solutions

Kyocera Document Solutions are a global business spearheading change in a sector experiencing disruption from new technologies and ways of working.

Traditionally selling printing machines for the office, their products have evolved to meet the demands of document management. More emphasis is now required on security, AI and cloud storage.

With the shift from hardware to software, Kyocera Document Solutions were re-evaluating their marketing. There was a desire to move from product to customer-focussed propositions. At the same time, a tired web platform, was due for replacement with the latest version of Adobe Experience Manager.

cloud icon and arrow gesture graphic
Pitching a vision

As part of the core team that put together the pitch for Kyocera’s business, I was responsible for defining the vision for what a new customer-centric web platform, covering 19 European markets could look like.

The picture we painted was based on insights drawn from a series of desk-based research activities and a handful of interviews with people responsible for managing office machines and document management workflows.

The vision was illustrated in a couple of videos based on use case scenarios and showed how we would harness the capabilities of AEM to deliver tailored content based on user location, sector and stage in the purchase cycle.

Discovery

With our winning pitch securing the business, we could expand on our initial research rather than start from scratch.

Nevertheless less there were many more activities to ensure we gathered business and customer requirements across multiple markets and that technical integration with existing systems, such as CRM and PIM, provided faultless efficiencies and seamless experiences for Kyocera personnel and customers alike.

  • Requirements gathering workshop: business.
    To kick off the requirements gathering, we ran a workshop over a couple of days in Amsterdam where client stakeholders explained numerous processes in sales, product management and other cycles. This rapidly provided a view of business operations that could subsequently be drilled into. 
Kyocera staff presenting in front of a wall of post-it notes
  • Requirements gathering workshop: audience.
    The second part of our requirements gathering was about understanding user needs. This workshop involved empathy exercises to put our Kyocera participants in the shoes of their audience. We created proto-personas, plotted user journeys and drilled into mission-based needs, identifying digital opportunities for addressing these. 
  • Technical integration workshop.
    Whilst this was primarily for our developers and data engineers, I attended this session in Düsseldorf to ensure they were working to the customer-first vision and to obtain a level of technical understanding that would be useful during design.cycles. This rapidly provided a view of business operations that could subsequently be drilled into.
kyocera cup in a meeting room
  • Sales centre visit.
    I took the agency’s IT Director to Kyocera’s Showroom in The City of London where we were given demonstrations of products and I was able to observe the types of questions asked by client and sales representative.that would be useful during design.cycles. This rapidly provided a view of business operations that could subsequently be drilled into.
  • Staff interviews.
    A series of telephone conversations were conducted with key Kyocera personnel. I wanted to find out further details of aspects such as processes, regional differences, expectations of the new web platform and marketing needs. These were conducted to a ‘conversation guide’ and the recordings transcribed for team use.
  • Customer interviews.
    Kyocera helped us identify interviewees that could provide the customer perspective. Again, telephone calls followed a written ‘conversation guide’ and were recorded and transcribed.
Desk phone and Tascam audio recorder
  • Survey.
    Taking what had been heard in the interviews, I wrote a survey that would help qualify some of our initial hypotheses with a larger sample. We used LinkedIn to buy our audience, targeted by job title and geographic region.
LinkedIn research network branding
  • Content workshop.
    This session allowed us to start the process of identifying the content requirements of the new platform and determine how much new material would need to be created versus rewrites or deletion. We also considered the process by which content would be repurposed across multiple markets and where the originating sources may be.
content headings written on a whiteboard
  • Brand workshop.
    Together with the Creative Director, I needed to understand the Kyocera Document Solutions brand. The different elements, from tone of voice to colours and use of imagery, would influence the experience. We knew that the business had plans for a brand refresh but that this would not be ready until after rollout of market websites had started. There was an opportunity to influence the guidelines and ensure they would work as best as possible for our vision. One example of our input was the use of transitions, angled to align with the logo design.
close up of a logo illustration on screen
Documentation

Confluence was the hub for project documentation. Notes, recordings and photographs of workshop walls were filed and expended on over time. There were a number of UX ‘deliverables’ on the back of discovery. These included a set of personas and associated user journeys that would be referenced by the team throughout envisioning and remain available for subsequent projects and initiatives.

The requirements, based on business and user needs, were also formalised and prioritised, with an MVP agreed for launch.

  • Personas.
    A set of 5 personas represented prospective and current customers, journalists and career seekers. Together, these would cover the majority of user needs that the platform would cater for.
    The personas started their lives as notes that were transferred to Excel and then I created final artwork in Adobe InDesign.
  • User Journeys.
    The UJs illustrated the steps taken by users to achieve goals. These were end-to-end journeys covering multiple touch points, owned and non-owned and providing context for the ‘jobs to be done’ by the web platform. Each journey was associated with a persona and there were multiple journeys for some personas.
A user journey composed in Adobe Illustrator
Experience principles and IA

The new platform would deliver content that addressed the needs of modern businesses. Knowledge sharing through stories, case studies and reports would lead customers to the hardware and software products and solutions, along the way reinforcing the Kyocera commitment to quality and service.

The change of emphasis in the proposition required a complete revamp of the site IA. The site needed to be designed to answer questions, provide evidence, maximise engagement where necessary and drive prospects towards contact. It had to accommodate the missions of different personas.

an example experience principle

I wrote a set of experience principles for continued reference. Every component, page template or sequence of pages would work to principles, such as progressive disclosure, jargon-free language and no dead ends.

A combination of our journey mapping and content activities in the discovery phase allowed us to draft a site map. We then created a set of cards representing the sections and topics in the site map and arranged card sorting sessions throughout Europe.

To accompany the PDF of cards, I made a film explaining how to do the card sorting and record results. Optimal sort and Tree Jack were used to subsequently revise and test a progressed site map and proposed navigation labelling.

Component design

In parallel, we started working in a room of white walls to rapidly visualise elements of our journeys. These sketches helped us develop patterns and identify reusable elements that would be designed as AEM components. As each fledgling component found its place in our draft library we would sense check it with the requirements list and refine our thinking as necessary.

The development team were in Warsaw and we were in London. Each day we had a session to share progress and align our ambition with the realities of an AEM MVP. Our goal was to use as little bespoke code as possible and maximise out-of-the-box AEM capabilities.

The beginnings of a product detail page scribbled on a white wall
Adobe XD screen grab

Designs progressed from the white wall to Adobe XD and an ability to test our thinking as a series of click-through component sequences available online for collaborative feedback. When a component reached an agreed state it was formally documented in Confluence as a static annotated wireframe and appended with links to clickthroughs, visual designs and video files showing animations such as load sequences and transitions.

Template designs

Page templates were identified and designed with fixed, mandatory and optional components. Again, these were first composed and tested internally as low-fi designs in Adobe XD. Then visually designed as page layouts in Sketch and imported into InVision for user testing.

Confluence documentation
User testing
an assortment of pages from a test report

We recruited a combination of agency staff, and people matching the personas from other businesses in our building. Moderated sessions were set up to test accomplishment of a series of tasks and journeys.

Adobe XD prototypes were fashioned for site structure, navigation labelling, page content and visual appeal. Each session was recorded for later review and findings were folded back into our designs.

Managing stakeholder expectations

At key points throughout the project we delivered presentations to key stakeholders and client groups. This provided progress reports and maintained buy-in from those who would be managing the new platform and allowed them to plan for their local market roll-outs. It also provided us with opportunities to talk to more stakeholders and gauge the level of training that we would need to deliver for the new platform.

19 markets and an EU master

The European ‘group’ site and the UK ‘market’ site were the first to go live, both being in English. From here, roll-out across other markets proceeded. Localisation for each market included translation of master content and adaption of product lines and specifications, most of which was handled centrally.

Kyocera Document Solutions now has a platform where campaigns and content can be pushed to markets for optional or mandatory adoption. A standardised structure with governance in place enables efficient marketing and management of assets such as printer drivers and documentation.

With the platform integrating with authentication, sales and marketing systems, Kyocera can provide a seamless cross-channel experience based on a 360º view of customers.

Moreover, the platform puts the needs of the customer at the centre, providing a simplified user interface that delivers engaging content and resources for research, purchase and ownership.

Share
Share this Post
Your URL copied
Top