{"id":55,"date":"2020-04-19T12:30:14","date_gmt":"2020-04-19T12:30:14","guid":{"rendered":"https:\/\/montsebalbuena.com\/blog\/?p=55"},"modified":"2024-10-26T08:57:15","modified_gmt":"2024-10-26T08:57:15","slug":"for-the-record","status":"publish","type":"post","link":"http:\/\/montsebalbuena.com\/blog\/for-the-record\/","title":{"rendered":"For The Record"},"content":{"rendered":"\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Company: <\/strong>For The Record
Year:<\/strong> 2016-2019
Tools:<\/strong> Figma, Photoshop, Illustrator, Workshops
Project Info:<\/strong> UX\/UI and Visual Design work for multiple digital products such as: FTR Gold, Court.FM, LiveCopy, etc. And the design of FTR Platform; a responsive and cloud-based platform that allows lawyers, judges and other law industry professionals to access court records & interactive transcripts.
URL: <\/strong>https:\/\/app.fortherecord.com<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

THE WORK:<\/h2>\n\n\n\n

UX \/ UI Design – Improving the look & feel and Reducing Inconsistencies<\/strong><\/p>\n\n\n\n

Initially I joined the company to help streamline the look & feel of all digital products, the issue was that we had some products with a look & feel from decades ago and others were designed only months ago. This was an excellent approach to get familiar with the products, company and the process.<\/p>\n\n\n\n

Design outcomes: <\/strong>Skin redesign of FTR Gold. New features and visual improvements on different FTR digital products.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

Prototyping – New product and introducing IA<\/strong><\/p>\n\n\n\n

After our CEO found a potential business opportunity by injecting IA into our products, I embarked into creating an initial prototype to explore the possibilities of what a future product could look like. This prototype was taken to the next level by the dev team that created an interactive prototype which was tested at conferences with high caliber customers.
Design outcomes: <\/strong>This interactive prototype is still used in sales and conferences to this date. It generates both insights and business opportunities to the company.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Iterative Design – From Prototype to Adoption<\/strong><\/p>\n\n\n\n

A successful prototype meant having our first (local & international) customers and many features to design, build, release and test. I worked closely with the dev team using an Agile approach. Handing over wireframes, high definition designs, annotations and doing quick design reviews before PRs to be able to build the product at a fast pace.
Design outcomes: <\/strong>The design process is still in place. And current features are used as foundation\/UX research for any design decisions done.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Navigation notes<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Mobile First – Responsive Design<\/strong><\/p>\n\n\n\n

An issue I put my focus on was to change the approach from single-device products to responsive, mobile first designs that would work well for most devices. This avoids the creation of multiple products that do the same thing but for different devices.
Design outcomes: <\/strong>Every screen works on mobile, tablet, desktop and the process is built-in the team now.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Transcript ordering in Player<\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Form Redesign – From single page to multi-step form<\/strong><\/p>\n\n\n\n

Initially, the main purpose of the forms in the application was to capture new users so that meant designing really friendly, single-page, easy to use forms that reduced the friction between new users and our platform. But as with any project, we found from the support tickets and analytics that we could improve and we changed from a single-screen form to a multi-stepper using \u2019topics\u2019 to break steps into meaningful chunks that felt easier to complete.
Design outcomes: <\/strong>The positive feedback we received was immediate and we confirmed it with admins and clerks working in the process, that received less incomplete or inaccurate data.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Previous Order Form<\/figcaption><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Current order form<\/figcaption><\/figure>\n\n\n\n

Design System – Building a visual Language<\/strong><\/p>\n\n\n\n

Even with a new platform, keeping consistency was proving to be a challenge after a couple of years. So, reviewing our collective work we decided to make the goal of creating a design system and release updates on both the system and the FTR platform at the same time. The entire design & dev team were involved. We took the Atomic Design<\/a> approach to create a unified design language.
Design outcomes: <\/strong>This design system is still in place and being used by the team to reduce development time and visual inconsistencies.<\/p>\n\n\n\n

\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Design System – Buttons<\/figcaption><\/figure>\n\n\n\n
\"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button>
Design System – Cards<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

Company: For The RecordYear: 2016-2019Tools: Figma, Photoshop, Illustrator, WorkshopsProject Info: UX\/UI and Visual Design work for multiple digital products such as: FTR Gold, Court.FM, LiveCopy, etc. And the design of FTR Platform; a responsive and cloud-based platform that allows lawyers, judges and other law industry professionals to access court records & interactive transcripts.URL: https:\/\/app.fortherecord.com THE […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":3,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":134,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions\/134"}],"wp:attachment":[{"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/montsebalbuena.com\/blog\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}