{"id":560,"date":"2020-02-27T04:05:15","date_gmt":"2020-02-27T04:05:15","guid":{"rendered":"https:\/\/www.bendana.net\/cb_site_v5\/?page_id=560"},"modified":"2022-12-21T23:18:19","modified_gmt":"2022-12-21T23:18:19","slug":"the-appraisal-lane","status":"publish","type":"page","link":"https:\/\/www.bendana.net\/cb_site_v5\/the-appraisal-lane\/","title":{"rendered":"The Appraisal Lane"},"content":{"rendered":"<section class=\"wpb-content-wrapper\">[vc_row][vc_column width=&#8221;1\/6&#8243;][\/vc_column][vc_column width=&#8221;2\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582774766109{margin-bottom: 0px !important;}&#8221;]\n<h1 style=\"text-align: center;\">The Appraisal Lane<\/h1>\n<p style=\"text-align: center;\">Introduced, created and implemented a design system for Product and Engineering so that users have a seamless experience while using the products through iOS, Android, and the web.<\/p>\n[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/6&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][mk_fullwidth_slideshow bg_position=&#8221;center top&#8221; images=&#8221;634,637,638,639,640,641&#8243; stretch_images=&#8221;true&#8221; slideshow_speed=&#8221;4000&#8243; pause_on_hover=&#8221;true&#8221; el_class=&#8221;hero-dropshadow&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582775760561{margin-bottom: 0px !important;}&#8221;]\n<h2><strong><small>Background<\/small><\/strong><\/h2>\n<p>A third-party vehicle appraisal service that utilizes a real-time app for car trade network, dealership community, and communications platform that enables dealers to submit used cars or appraisal and receive cash offers from a network of experts.[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582775815661{margin-bottom: 0px !important;}&#8221;]\n<h2><strong><small>Design Opportunity<\/small><\/strong><\/h2>\n<p>To find a solution to help improve the design process and manage design at scale.[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582776544870{margin-bottom: 0px !important;}&#8221;]\n<h2><strong><small>The Impact<\/small><\/strong><\/h2>\n<ul>\n<li><span data-preserver-spaces=\"true\">More consistency and predictability<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Less time and debt in design and development<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Improved products&#8217; quality<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Fewer bugs<\/span><\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/2&#8243;][vc_video host=&#8221;self_hosted&#8221; mp4=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/open-and-close-qr-code.mp4&#8243; poster_image=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/open-and-close-qr-code-min.png&#8221; aspect_ratio=&#8221;true&#8221;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_video host=&#8221;self_hosted&#8221; mp4=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/chat-transitions.mp4&#8243; poster_image=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/chat-transitions-min.png&#8221; aspect_ratio=&#8221;true&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/2&#8243;][vc_video host=&#8221;self_hosted&#8221; mp4=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/next-and-back-links1.mp4&#8243; poster_image=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/next-and-back-links1-min.png&#8221; aspect_ratio=&#8221;true&#8221;][\/vc_column][vc_column width=&#8221;1\/2&#8243;][vc_video host=&#8221;self_hosted&#8221; mp4=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/next-and-back-links2.mp4&#8243; poster_image=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/03\/next-and-back-links2-min.png&#8221; aspect_ratio=&#8221;true&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/6&#8243;][\/vc_column][vc_column width=&#8221;2\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1584321267559{margin-bottom: 0px !important;}&#8221;]\n<h2><span style=\"font-weight: 400;\">Once upon a time<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The adventure started on the very first day of my job at The Appraisal Lane. I was assigned a simple design task for one of the apps and all I had to do was create the UI. Cool. That sounded easy enough. My first instinct was to ask if there was some sort of styling guide available. I was told, \u201cSorta. We use Abstract, which is a 3rd party Sketch versioning tool, and you\u2019ll find your answers in there. Just click around and you\u2019ll figure it out.\u201d That was an all too familiar statement that I\u2019ve heard before so I braced myself and charged ahead. Inside Abstract, here was a list of things that I found:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Questionable color options<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Several text styles<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Different icon sets<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Variations of button styles<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unclear direction on look and feel<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Instinctively, in order to fully understand the scale of the problem, I interviewed the following people who had a direct impact and recorded their pain points:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Designers<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They manage and create the design files\u00a0<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Mixups on different component libraries\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Broken and inconsistent symbols in the Sketch design files<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Time wasted by recreating components when was already pre-existing<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Product owners<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They manage resources\u00a0<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Incorrect design references for developers<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Uncertainties on which design references are up to date<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Developers<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They manage and create the system\u00a0<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Mixups on different component libraries<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Incorrect references to code from<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Recreating pre-existing components<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Marketers<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They manage and distribute content<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Incorrect sharing of design screenshots<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Uncertain design references and versions<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Customer service<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">They manage feedback and problems<\/span>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Additional feedback of broken and\/or inconsistent UI and interaction on the apps<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Uncertain versions and references of which designs were rolled out<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">The ultimate goal is to help allow customers to use an app to easily get their car appraisal in a delightful manner. The problem was the miscommunication and distribution of wrong information from the internal side which eventually affected our customers and the business. This overall process resulted in creating delays and back and forths. After my investigation, it was clear to me that the answer was to introduce, create, and implement a Design System.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Kickoff Meeting<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">To get things moving, we had a kickoff meeting of presenting the current problems and concluding that a Design System was the solution. The participants were the Head of Product, CTO, and myself. In that meeting, we discussed what goals we wanted to achieve and the general scope of the task at hand.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Presentation<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">After preparation and agreement, I provided a presentation to the company to inform and bring awareness of this big project. The main goal of this is to get everyone excited and get the buy-in so that it\u2019ll be easier to roll out. This way, I was also able to gain feedback on additional ideas that I may have not thought of.\u00a0<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Building the Design System<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Here were the key steps I took to build it out:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Visual audit on all platforms which include iOS, Android, and the web<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Focused on the main components<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Color<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Typography<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Spacing<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Images<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Identify common patterns<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Documented the components<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Implementation<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I connected with the lead iOS, Android, and web developers, who are based on Uruguay, to make sure we were in agreement and to gain feedback on what they needed to deliver. Based on their feedback, I created Jira tickets of Epics of each platform and Stories which represented creating and implementing the components for each client. Not all the tickets go through each sprint but I do try to make sure as much gets in as possible since we work through sprint cycles.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To keep everyone in sync, I provided bi-weekly email status reports. Here\u2019s an idea on how it was structured:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Component Status<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In Development<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Up Next \/ Backlog<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Under Consideration<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">In Production<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">What\u2019s New?<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">In Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Getting started was the hardest part. From my initial presentation, I did mention that the Design System will be a living and growing thing. We\u2019ll go through some hardship and but on the grand scheme, it\u2019ll be beneficial for everyone. Overall, the feedback has been great:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Designers spend more time on problem-solving instead of recreating buttons<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Developers can produce faster instead of fumbling around on recoding<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Product owners have more confidence on design documentations<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The iOS and Android apps along with the web look and feel much more seamless<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With the design system, a simple feature to be put into production will now take 1 month in comparison to the old ways which was 3-4 months.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What\u2019s the next plan, Stan? Well, I want a more seamless design-to-development creation experience. The idea is to be able to create a design that renders out in code in a test environment. The rendered out version will also output the different states and scenarios. The goal is to help speed up the creation and development process so that the customer and business can reap the benefits of receiving the end result faster.<\/span>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/6&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][mk_image src=&#8221;https:\/\/www.bendana.net\/cb_site_v5\/wp-content\/uploads\/2020\/02\/ss2a-min.png&#8221; image_size=&#8221;full&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][vc_message]Curious to see my other work? <a style=\"color: #56b0ee;\" href=\"http:\/\/www.bendana.net\/cb_site_v5\/work\/\">Continue here!<\/a>[\/vc_message][\/vc_column][\/vc_row]\n<\/section>","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column width=&#8221;1\/6&#8243;][\/vc_column][vc_column width=&#8221;2\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582774766109{margin-bottom: 0px !important;}&#8221;] The Appraisal Lane Introduced, created and implemented a design system for Product and Engineering so that users have a seamless experience while using the products through iOS, Android, and the web. [\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/6&#8243;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column][mk_fullwidth_slideshow bg_position=&#8221;center top&#8221; images=&#8221;634,637,638,639,640,641&#8243; stretch_images=&#8221;true&#8221; slideshow_speed=&#8221;4000&#8243; pause_on_hover=&#8221;true&#8221; el_class=&#8221;hero-dropshadow&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/3&#8243;][vc_column_text css=&#8221;.vc_custom_1582775760561{margin-bottom: 0px !important;}&#8221;] Background A third-party vehicle appraisal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-560","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/pages\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":10,"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/pages\/560\/revisions"}],"predecessor-version":[{"id":676,"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/pages\/560\/revisions\/676"}],"wp:attachment":[{"href":"https:\/\/www.bendana.net\/cb_site_v5\/wp-json\/wp\/v2\/media?parent=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}