Axure low-fidelity wireframe: http://fzo4uo.axshare.com/
Adobe XD high-fidelity UI design, desktop: https://xd.adobe.com/view/4d19a955-4888-4642-95ff-c553d87629e4/
Adobe XD high-fidelity UI design, mobile: https://xd.adobe.com/view/585f928f-b14d-4091-8efb-4ccdfad2556f/
Problem/Challenge: To simplify the user experience, I saw an opportunity to combine three separate resources/tools on CSIO.com: 1) the Technology Scorecard, 2) the Technology Adoption Map and 3) the Technology Leaders webpage. These tools could be combined into one “interactive infographic” that would include all the information in a single resource.
Goals: This aggregation of information should allow for a smoother UX, requiring less navigation between pages to find information. Creating an interactive infographic would also help CSIO maintain its image as being on the leading-edge of tech, as this type of online resource is still fairly novel and uncommon (as of 2017), at least in the Canadian P&C insurance industry.
Research & Process: I began with a low-fidelity clickable mockup/wireframe of the proposed new tool, created using Axure. Demoing this wireframe to management and the web developer was effective in getting everyone on the same page with regard to what to build.
Based on feedback at this stage, I then progressed to creating the high-fidelity UI design using Adobe XD. The design look and feel was based primarily on the style guide already established for CSIO.com during the 2016 responsive redesign. After reviewing this design with management and making some adjustments, the prototype was then handed off to the developer for implementation.
The developer chose ReactJS to build the tool, which would allow for user interaction on the infographic without having to reload the webpage. Certain design amendments were made throughout the coding process as the developer made suggestions, e.g., using circles for the presentation of the top-level statistical data.
The tool was built to be fully responsive, so it would display nicely across all devices. We reviewed and tested the tool on various mobile devices to ensure no issues with the mobile UX.
Results: “Soft launched” the tool to members in July 2017.