overview
One of the major products offered by Scotsman Guide is their extensive Lender database that helps connect mortgage brokers and wholesale lenders for niche lending opportunities. It can be exceptionally hard for mortgage brokers to find lenders to accommodate the needs of a specific client they are working with, and Scotsman Guide has been one of only a few resources for facilitating these connections for more than 20 years, initially as a published list and then in the early 2000s they introduced a web-based version of the same list.
my role
I was the primary designer on this project and completed all of the work with the support and input of my design manager. Once the designs were completed, we had a dedicated HTML prototyper who translated designs prior to delivery to our development team.
I worked directly with c-level stakeholders as well as heads of the sales and marketing teams in order to develop and iterate on the business value and strategy.
challenges
The original web version was simply a duplicate of the print layout, which had a lot of usability issues and wasn’t flexible enough for business growth. When I was tasked with the first major redesign of this experience since it’s digital creation, there were a few key problems I was trying to address:
Responsiveness: the current design was only really usable on a large screen and user research showed that more than 50% of users had tried to use scotsmanguide.com on their mobile device, but the bounce rates from mobile were exceptionally high
Monetization: because the previous experience was nothing more than a digital duplicate of the print list, the business model for selling space on the web wasn’t optimized and having a listing featured on the web was treated like a bonus for purchasing print listing space rather than an individual opportunity for upcharges.
Flexibility: Another constraint of the print design being translated very literally into the web was a severe lack of flexibility when it came to showing the listings. In conjunction with offering multiple different monetization options, it was important to provide stakeholders and sales with visually different treatments for different purchase levels.
Upgrading technology: When this portion of the scotsman guide website was created, they were working on a legacy system without the flexibility of modern frameworks. In rebuilding, we also had the opportunity to update to not only a more modern UI but a more modern development framework as well.
Research & planning
methods
When this project started I conducted a number of interviews with both users and stakeholders to understand the current limitations from both a front and back end perspective in order to design a holistic solution.
One aspect of this redesign was adding a specific section to the website for job searches which required a lot of conversations with stakeholders to balance their desire for targeted SEO terms with the need for appropriate content strategy that would help users fully understand the site’s information architecture.
Design & prototyping
Tools used
Pen & paper — I always start low fi to help get my ideas out and get early feedback from stakeholders and users
Sketch — For all of the assets of this project I used Sketch, due in large part to it’s excellent integration with InVision
Design library — As a part of the larger web redesign project, I worked in Sketch and with our development team to build out a style guide which was then translated in a code component library, along with documentation for using the different interactions
Process
Since I was designing both the user-facing interface and the back end administrative components, I was able to manage concessions and needs for both sides and make effective tradeoffs for feasibility and user value.
After creating the designs, I created clickthrough prototypes using InVision to use for stakeholder approval meetings, and to include to the dev team with our final documentation.
Before and after
Documentation & delivery
deliverables
User stories — I was responsible for writing and managing user stories in Dev Ops to to make things easier for our dev team’s agile/Kanban process
Redlined mockups — Depending on the design complexity and the amount of variables, I would provide fully redlined and/or annotated design files with the final user stories
InVision prototypes — Delivering clickable prototypes dramatically cut down the amount of churn from the development team since they were able to preview the end-to-end flow for the feature as they were working
Code snippets — We were lucky enough to have a dedicated HTML prototyper on our design team who I worked with to create a springboard of code snippets that were included with the dev handoff
