https://jonasbundgaard.com Jonas Bundgaard portfolio Thu, 11 Jan 2024 15:31:31 +0000 https://jonasbundgaard.com en https://jonasbundgaard.com/Landing Mon, 22 Feb 2021 11:59:36 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Landing Hi, I’m Jonas, a senior product designer based in Copenhagen. I design meaningful experiences that respect users and meet business needs P. 1 Education ︎︎︎ P. 2 Experience ︎︎︎ P. 3 Process ︎︎︎ CASE STUDIES P. 4 Balancing business and product needs ︎︎︎ <img width="1829" height="2745" width_o="1829" height_o="2745" data-src="https://freight.cargo.site/t/original/i/1dc3a0815080f17e108e5ed4dfb210497b8fbe9b94149f5c89b6828969b3178b/house_2.png" data-mid="199487668" border="0" src="https://freight.cargo.site/w/1000/i/1dc3a0815080f17e108e5ed4dfb210497b8fbe9b94149f5c89b6828969b3178b/house_2.png" /> P. 5 Increase engagement and growth ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/f27e02158c80c185b4f6876e009db7055d399ce7244f3e4ad2e560acb4e965b5/Thumbnail.jpg" data-mid="201202866" border="0" src="https://freight.cargo.site/w/1000/i/f27e02158c80c185b4f6876e009db7055d399ce7244f3e4ad2e560acb4e965b5/Thumbnail.jpg" /> P. 6 Increase conversion rate ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/4d9ec76a2ed0a49715f192df10b0b9bd5eecf7237b2669bd15bfbdaa937a9375/thumbnail-insurely.jpg" data-mid="201308292" border="0" src="https://freight.cargo.site/w/1000/i/4d9ec76a2ed0a49715f192df10b0b9bd5eecf7237b2669bd15bfbdaa937a9375/thumbnail-insurely.jpg" /> P. 7 Creating a flexible design system ︎︎︎ <img width="1235" height="1854" width_o="1235" height_o="1854" data-src="https://freight.cargo.site/t/original/i/88b64ec0f797877dab2e2e0c1b869c1dd7a80679f549ffda4fc99304002e8905/Tonsser_1.png" data-mid="199488071" border="0" src="https://freight.cargo.site/w/1000/i/88b64ec0f797877dab2e2e0c1b869c1dd7a80679f549ffda4fc99304002e8905/Tonsser_1.png" /> P. 8 Refocusing on the core experience ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/8955e637142b8195886315fb840cc58b43e8cd3eded54cceee013c14e2378826/Tonsser_3.jpg" data-mid="199495154" border="0" src="https://freight.cargo.site/w/1000/i/8955e637142b8195886315fb840cc58b43e8cd3eded54cceee013c14e2378826/Tonsser_3.jpg" /> P. 9 Delivering on our promise ︎︎︎ <img width="1235" height="1854" width_o="1235" height_o="1854" data-src="https://freight.cargo.site/t/original/i/678ecfcaf275fdc5c49c54c77637cfe140b1368df9db79a70cdd087abbff2e97/Tonsser_2.jpg" data-mid="199494657" border="0" src="https://freight.cargo.site/w/1000/i/678ecfcaf275fdc5c49c54c77637cfe140b1368df9db79a70cdd087abbff2e97/Tonsser_2.jpg" /> SIDE PROJECTS P. 10 Berlin Er, Book design ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/c7f3ede7043db3d2749d491365171953785a15630286fffda14bbe97eb1fa6c9/Berlin_er.jpg" data-mid="199495782" border="0" src="https://freight.cargo.site/w/1000/i/c7f3ede7043db3d2749d491365171953785a15630286fffda14bbe97eb1fa6c9/Berlin_er.jpg" /> P. 11 Af Art Magazine, Animated type treatment ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/a526e1098268c651c4bf15bc1cc9c09e9aee2661eea6ffe15c0a6bdb3613bffa/af_art.jpg" data-mid="199495781" border="0" src="https://freight.cargo.site/w/1000/i/a526e1098268c651c4bf15bc1cc9c09e9aee2661eea6ffe15c0a6bdb3613bffa/af_art.jpg" /> P. 12 Company celebration, 3D animation ︎︎︎ <img width="1644" height="2468" width_o="1644" height_o="2468" data-src="https://freight.cargo.site/t/original/i/1cbb0b44c3daee431ff4745fd834ad9ca6ec91f0daa20ac887da9fb18ef5ef3e/Formal_settings.jpg" data-mid="199495780" border="0" src="https://freight.cargo.site/w/1000/i/1cbb0b44c3daee431ff4745fd834ad9ca6ec91f0daa20ac887da9fb18ef5ef3e/Formal_settings.jpg" /> https://jonasbundgaard.com/Experience Thu, 11 Jan 2024 15:24:53 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Experience Experience Undo ForsikringOkt. 2021 - Present Senior Product Designer Tonsser Football AppJan. 2020 - Aug.2021 Senior Product Designer Tonsser Football AppJan. 2017 - Dec. 2019 Product Designer Tonsser Football AppJun. 2015 - Dec. 2016 Junior Product Designer Jonas Bundgaard DesignJan 2013 - Jan.2015 Freelance Designer Rum interiour MagazineMar. 2013 - Aug. 2013 Design Intern WAAITT Design BureauOct. 2012 - Feb. 2013 Design Intern https://jonasbundgaard.com/Education-1 Thu, 11 Jan 2024 15:25:51 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Education-1 Education Product psychology master classGrowth Design2022 - 2023 Understand User Behaviors, Find The Gaps &amp; Improve Any Experience,&nbsp;Create Delightful Journeys,&nbsp;Communicate Product Decisions,&nbsp;Create Ethical &amp; Humane Products Danmarks Medie- og JournalisthøjskoleBachelor’s degree - Visual Communication,Graphic Design2010 - 2013 Concept development, typography, communication, creativity. UCN, University College Nordjylland Bachelor’s degree - Design, Technology &amp; Business (Graphics)2007 - 2009 Businesses, commerce, communication, production, marketing and creativity LinguisticsBachelor’s degree - Aarhus University2005 - 2007 Applied linguistics, cognition and language, linguistic typology and interactional linguistics https://jonasbundgaard.com/Process Thu, 11 Jan 2024 15:22:25 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Process Flexible process with changeable phases that can adapt to the projects needs. Strategy? Discovery? Iterative? Some sprints will be smooth and some will change over time. UnderstandIdentify the users problem and details around the problem we want to solve´Success criteria defined ThinkCreate multiple solutions we believe will solve the users problem(s)Solution selected BuildAlign on one solutions we believe in and that meets our sucess criteriaSolution meets success criteria ShipFully complete our chosen solution and build it for scale before release.Solution build for scale, tested and shipped TweakAnalyse our solution in the wild. How can we make it better? Did it meet goals?Meet or beat success criteria https://jonasbundgaard.com/Contact Thu, 11 Jan 2024 15:18:06 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Contact I am currently open for work. Get in touch on LinkedIn or email. I am always up for a chat or a cup of coffee.Linkedin Jonaswbundgaardgmail.com CV https://jonasbundgaard.com/Balancing-business-and-product-needs Thu, 11 Jan 2024 13:01:28 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Balancing-business-and-product-needs <img width="5118" height="2280" width_o="5118" height_o="2280" data-src="https://freight.cargo.site/t/original/i/da2ad032e455424899b022672c400ec9aa8466f3b3e418d121e21106c3e8fb11/house_header.jpg" data-mid="201439977" border="0" src="https://freight.cargo.site/w/1000/i/da2ad032e455424899b022672c400ec9aa8466f3b3e418d121e21106c3e8fb11/house_header.jpg" /> C.4 Balancing business and product needs The Challenge Balancing the commercial goal of reaching 350 mio DKK GWP by 2025 while addressing the product needs of reducing foundational-, technical- and design debt SummaryA company-wide effort to reach our commercial goal by adding house insurance to the insurance portfolio of Undo Insurance was led, from a product perspective, by the team I was design lead on as a part of a product trio. A year's worth of effort, heavy on strategy work, user research and stakeholder management (internally and externally) took us deep into foundational work to balance out the product goal of minimising technical debt and find the right solution for where and how to add the new product. An Incremental rollout and early learnings through user testing and a waitlist solution will lead us to be able to release a tested and validated solution of the new product at the end of 2023, with a rollout- and iteration plan including monitoring &amp; validation for product market fit, in coordination with the operations and sales teams, enabling us to reach our 2025 commercial goal by increasing the value per customer and attracting new ones. My RoleDesign lead, Trio Part of strategy planningStakeholder managementFacilitator Copy writingUser researchUser experienceUser interfaceUser testingQuality assurance ProcessStrategy-, Discovery- &amp;Iterative cyles <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/a08b908947cae85e744957c24b11d75e8c525ea2c3bef9025756950e93bf4ca5/2Onboarding.jpg" data-mid="201439956" border="0" src="https://freight.cargo.site/w/1000/i/a08b908947cae85e744957c24b11d75e8c525ea2c3bef9025756950e93bf4ca5/2Onboarding.jpg" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ca8cc5f2dcc08a1373cd940e15929ba4b69e099eb9928f552b8d7cd4710c47a4/Floor.png" data-mid="201439955" border="0" src="https://freight.cargo.site/w/1000/i/ca8cc5f2dcc08a1373cd940e15929ba4b69e099eb9928f552b8d7cd4710c47a4/Floor.png" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/c3f394492341f3d57117d9ba80abbb1ebc9b22f12132653540931167a0e33cdb/Onboarding.jpg" data-mid="201439957" border="0" src="https://freight.cargo.site/w/1000/i/c3f394492341f3d57117d9ba80abbb1ebc9b22f12132653540931167a0e33cdb/Onboarding.jpg" />Onboarding and house info validation <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/a99944098a5f7a6763cf1e6641efbb163648019da58cdfa1392aa06bdb47d7c8/Onboarding-2.jpg" data-mid="201439951" border="0" src="https://freight.cargo.site/w/1000/i/a99944098a5f7a6763cf1e6641efbb163648019da58cdfa1392aa06bdb47d7c8/Onboarding-2.jpg" />Onboarding and risk model/pricing calculation <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/ba633c6273498ce4f2e306bdcdf0c0ad967210600e6a5e42c6a1cf9e3c559e19/Customisation.jpg" data-mid="201439954" border="0" src="https://freight.cargo.site/w/1000/i/ba633c6273498ce4f2e306bdcdf0c0ad967210600e6a5e42c6a1cf9e3c559e19/Customisation.jpg" />Customizing coverages and selecting deductible <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/3b5a7bd1d56d13b56f360ded6bbb9ed0ce2ada386ed9c5ac6f03e19875090b15/purchase.jpg" data-mid="201439950" border="0" src="https://freight.cargo.site/w/1000/i/3b5a7bd1d56d13b56f360ded6bbb9ed0ce2ada386ed9c5ac6f03e19875090b15/purchase.jpg" />Shopping cart and purchase flow This prototype was the foundation for internal stakeholder management/communication and external user testing.The goal was for the customers to get a quote for house insurance, customize their coverage and purchase. Given that it’s a test, that was originally given with context, the options within the prototype are limited. It was estimated that introducing house insurance to the portfolio at the end of 2023 would reach our goal, by increasing our outcome by 38% The Full storyUndo was launched in 2017 with a set of core insurance products (Content-, travel-, accident insurance). In 2021 car insurance was added to the portfolio. In 2022 the commercial strategy of Undo was focused on continuous fast growth of the car insurance product, but to reach our long-term goal, a new big bet was needed for 2023. The FoundationThe initial focus on quickly getting a product market fit for the car insurance meant that it was built in a separate app and in a different codebase. Since the audience was slightly older than the core products sold, it was also designed with different components in a separate design library. Although it was needed, to quickly get the product to market, it led to unwanted complexity for both users, developers and internal operations. The Commercial strategyCompany-wide strategy work including research and workshop efforts led to the conclusion that offering house insurance, competitive in price, and with a focus on heightened user experience would increase value per customer enough to meet our commercial goal.It was estimated that introducing house insurance to the portfolio at the end of 2023 would increase our outcome by 38% This was due to the house insurance itself being a high-premium product that drives substantial growth, but also allows for the upselling of core insurance to more car customers, expanding our addressable market and likely reduces churn. The Product strategyThe setup with two apps provided a lot of challenges. With good reason. The apps were built with very different purposes and in different codebases/design libraries. As a part of our challenge to reach our commercial goal, we decided a merge of the two apps was needed, to enable us to launch the new product faster, adapt our current offerings to match the needs of our target segment, create new experiences and iterate on existing ones. For the customer, this would also provide a more effortless user experience, when managing their insurance and buying new ones. Besides removing pains for the customers and product development, it would also make it easier for our OPS teams to support our customers and make the sales team more efficient. In the product team, we assessed the foundation and design/tech challenges, and presented it to stakeholders, mapping out the pros and cons of each option. Migrating to a completely new app or building a house insurance into either our core or car insurance app. Our ProposalIncrementally rebuilding the car insurance app into one Undo app while tweaking the information architecture to accomodate new additional products. Starting with preparing a technical foundation that supports multiple products. (Also prep IA, navigation and update/reuse design library)Introduce a new product into the app (House).Migrate the Core products to the new app. The Reasonening The fastest way to support our Commercial StrategyIncremental steps to our Product vision of one appThe product team stays the main driversThe fastest way to get learnings on all parameters of productionEveryone is already onboarded into the car app. We aimed to be in a position where we would be much better at estimating the overall project timeline while having more confidence in our releases The ProcessWe wanted to minimise the risk of the house launch timeline slipping and the risk of rushing out House in a poor state where we would have had to do day-2-day and bug fixing for a cycle or two after launch. By releasing an MLP House experience in smaller increments instead of working towards one big release, we hypothesised that we would be able to prove parts of the experience from a technical and customer point-of-view early, while also getting important feedback on viability, usability and desirability. A big factor in this was that we estimated, based on competitor analysis, that around 30% of our customers would need an inspection (desk/field), before they could be rejected or accepted. At this point, the inspection work was blocked by external stakeholders, which led to the focus on the waitlist, buying us time. Furthermore, we would be in a position where we would be much better at estimating the overall project timeline while having more confidence in our releases as the project progresses. Step-by-StepBuild foundation and business logic through discovery work, and define the rules for inspection, requirements for purchase, Claims handling, price model and pre-requisites for purchase.Create a waitlist that helps us build up the sales funnel and test the onboardingLaunch and open up for purchase for those of our current car customers who have signed up with the waitlist, and that does not need an inspection.Build inspection flow, and start selling to the part of the waitlist that needs an inspection.Build the full onboarding for house-only or multiple products to allow us to push sales and marketing for all customers.Migrate core products and travel into the app, while rebranding the app.Rethink the IA and navigation of the one app, to improve user experience and cross-selling. One app A small cycle was started up, before kicking off the house insurance, which focussed on the information architecture and navigation. Through user interviews and user testing of early prototypes. A lot of exploration work was reviewed by the product-, design- and sales teams, before being tested out on users, to align on technical feasibility, best practices and opportunities for growth. This led to the insight, that our customers wanted to be able to have the same flexibility as with any other shopping experience. They wanted to add to the cart or remove, purchase immediately or save for later, instead of having to buy one product at a time, as it usually is with insurance products These insights were used to define our direction for the technical foundation of the introduction of the new product but were described in the front end, where we opted to reuse current implemented components, to save time and be able to launch and learn as fast as possible. <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/25c7914598c3bfa5e6077faa997f8841fb125202d29494cfc1730ca504110993/wireframes.jpg" data-mid="201439959" border="0" src="https://freight.cargo.site/w/1000/i/25c7914598c3bfa5e6077faa997f8841fb125202d29494cfc1730ca504110993/wireframes.jpg" /> Fig. 1 Wireframming, focussing on the IA and navigation of the overall onboarding and in-app usage. The WaitlistAs mentioned, the goal of the waitlist was to build up a pipeline of leads on current customers that would not require an inspection of their house before purchase. For us to be able to build the leads, we needed to be able to divide the customers into different buckets through the sign-up. Customers who can buy house insurance without inspection (non-inspection) Customers whose house needs an inspection (inspection) Customers whose houses we do not cover (rejection) Customers who don’t have a house, or are just interested (other)Through internal and external stakeholder meetings, we gathered info on requirements for purchase and risk-profiles to figure out the right balance of who to sell to (no more than 2 claims done in previous house, no prior debt to insurance companies etc.) and which houses to sell to (No listed-, half-timbered or summer houses etc.)We used this information to draw up a decision tree of the questions/answers needed, and a service blueprint of how to handle this information in the front- and backend. Inspection logicChatbot questions about address, number of claims on current policy, etc.Fetching information from Bygnings- og Boligregistret (The Building and Housing Register) + enabling the user to verify the data pulled in.Rejection logicGeneral rules based on BBR information (e.g. roof type)Fetching information about potential purchase on foreclosure.It was then mapped out in a flow to get a better overview, and after reviews mocked up in low fidelity wireframes. The wireframes were then evaluated using the psych framework, giving us an idea of the low and high peaks of the user experience. After more reviews and interactions, this was tested through user interviews and with a prototype. <img width="15534" height="8226" width_o="15534" height_o="8226" data-src="https://freight.cargo.site/t/original/i/4d16a936a4675f5580458bbc7f5ac6a335c477caafcd70eed3d448e161364aa4/Current-car-customer-wants-to-buy-house-insurance.png" data-mid="201439946" border="0" src="https://freight.cargo.site/w/1000/i/4d16a936a4675f5580458bbc7f5ac6a335c477caafcd70eed3d448e161364aa4/Current-car-customer-wants-to-buy-house-insurance.png" /> Fig. 2 Service blueprint of the waitlist experience, showing how the information is pulled from BBR and handled by the different teams within the organisations. Fig. 3 Flows showing how a customer is being sorted based on their answers and input. <img width="12804" height="7176" width_o="12804" height_o="7176" data-src="https://freight.cargo.site/t/original/i/af59bdfbbea1800dcf74fd2cf0b5b9595b58cabde5bb37527ce639c5cb7a1c06/User-Experience.jpg" data-mid="201439948" border="0" src="https://freight.cargo.site/w/1000/i/af59bdfbbea1800dcf74fd2cf0b5b9595b58cabde5bb37527ce639c5cb7a1c06/User-Experience.jpg" /> Through the feedback from the user testing we concluded that even though the flow was already shorter than the competitors, the customers were still expecting more from us. The flow was working as intended but “felt” slightly too long. With this insight, we went back to the internal stakeholders and presented a second version, tested out on the users, that was perceived as shorter, by omitting a question (sales could get elsewhere), grouping others and tweaking the duration of loading steps.We did a soft launch, and then gradually started introducing the marketing channels. We monitored the signups through an amplitude dashboard (+ slack integration) and saw a steady increase in leads, which only increased more rapidly once the marketing emails started being sent out. The tracking showed us a low drop off, except for an initial bounce off, that the user interviews told us was customers wanting to be able to read a bit more about the house insurance, before signing up. Besides that, the response to the sign-up experience was good. <img width="5578" height="3216" width_o="5578" height_o="3216" data-src="https://freight.cargo.site/t/original/i/a412853b340c98fdd7fcff4fb4b5742c1799a83c2bf849539ec447ac66e21b5d/Customize.png" data-mid="201439949" border="0" src="https://freight.cargo.site/w/1000/i/a412853b340c98fdd7fcff4fb4b5742c1799a83c2bf849539ec447ac66e21b5d/Customize.png" /> Fig. 4 Customizing the insurance offer, Coverages and deductible. Customize and purchaseWith the learnings from the waitlist, we spotted a couple of things we could omit, and some we needed to add. We had luckily expected this and built the flows in a way that required the customers to validate their information when going from the waitlist to purchase. We created a push/email communication lane, that led to the iterated house onboarding flow, that was only sent out to customers that had signed up with the waitlist and did not need inspection.Most within the waitlist flow could be reused but copy changes were needed to help the customers understand that they were signing up to get a quote with the potential to buy the insurance. At the end of the onboarding of the customers, we reused components from our car insurance to show the customers their prices and be able to customize their insurance. Pages and components that were already tested and validated. We still had to update and add fact sheets/terms &amp; conditions/policies, so they matched the house insurance. <img width="1912" height="1072" width_o="1912" height_o="1072" data-src="https://freight.cargo.site/t/original/i/7bb92440c5db4607c001de15f788de73e35d3882cb655e7d61eb980f0ac23c82/Screenshot-2023-12-20-at-17.12.35.png" data-mid="201439958" border="0" src="https://freight.cargo.site/w/1000/i/7bb92440c5db4607c001de15f788de73e35d3882cb655e7d61eb980f0ac23c82/Screenshot-2023-12-20-at-17.12.35.png" /> Fig. 5 A user test repport from Maze, giving us miss clicks, succesrates, duration and heatmap What was not yet validated was our purchase flow. Through stakeholder meetings with internal claims teams, we knew that the requirements were too different from current flows to rely on the testing done for previous products. So we set out to test the purchase flow. Here I spoke to 12 house owners who had bought a house and new insurance within the last 6 months, including Interviews to follow up our maze prototype/survey. The Maze reports gave us good quantitative input, through miss clicks, success rates, duration and heat maps, while the follow-up questions gave us qualitative input. The conclusion was, that the purchase flow was to navigate and clear and concise. The interviewees knew where to get the information they needed, and what the terms they agreed to were. In other words, and understood purchase. <img width="6710" height="4418" width_o="6710" height_o="4418" data-src="https://freight.cargo.site/t/original/i/9ca5e65a0f76fa39cbd7d8f209bfae8fae32dbabdfcff36599638be2a27dc6a2/Changin-house-insurance.png" data-mid="201439953" border="0" src="https://freight.cargo.site/w/1000/i/9ca5e65a0f76fa39cbd7d8f209bfae8fae32dbabdfcff36599638be2a27dc6a2/Changin-house-insurance.png" /> Fig. 6 Purchase flow for changing house insurance Fig. 7 Purchase flowm for when buying a house, and taking over a house insurance. <img width="8528" height="3848" width_o="8528" height_o="3848" data-src="https://freight.cargo.site/t/original/i/456855c64358e2c80ff2ce8c68d26db29e44f75e08566d40ae08b54cec8933c5/Buying-house.png" data-mid="201439947" border="0" src="https://freight.cargo.site/w/1000/i/456855c64358e2c80ff2ce8c68d26db29e44f75e08566d40ae08b54cec8933c5/Buying-house.png" /> The insights we gathered were communicated in a report to the broader team. I also did a video walkthrough of the full experience, that was sent to boards and the legal team for a final sign-off.Since we had been in constant communication, the feature “passed” and I wrapped up the design in Figma for a final handover, which is displayed at the top of the case. &nbsp; &nbsp; Fig. 8 An example of the video walkthrough I made for stakeholders as a part of a larger legal review <img width="3130" height="1756" width_o="3130" height_o="1756" data-src="https://freight.cargo.site/t/original/i/fc855eb0b126b11b967ae30dc7d7dead76abcdaa6b60241f09675ebd6c496ac1/Screenshot-2023-12-18-at-13.22.03.png" data-mid="201439952" border="0" src="https://freight.cargo.site/w/1000/i/fc855eb0b126b11b967ae30dc7d7dead76abcdaa6b60241f09675ebd6c496ac1/Screenshot-2023-12-18-at-13.22.03.png" /> Conclusion and PerspectiveUnfortunately, the company was bought off by its “mother company” at the end of 2023, and all product development was discontinued. We had already done a whole exploration cycle on the inspection experience, by visiting the 3rd party companies that were to help us. We tagged a long for a day with the field inspectors and created a report for the team at home. The same was the case for the claims team that was to handle the incoming claims New cycles and plans had been developed for monitoring and iterating on the house insurance to make sure that it reached a product market fit, and saw the growth we needed. We had even started educating our customer service team.At this point, we had met our deadlines and the milestones we set. We were on the right trajectory. https://jonasbundgaard.com/Increase-engagement-and-growth Thu, 11 Jan 2024 15:02:19 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Increase-engagement-and-growth <img width="4000" height="1782" width_o="4000" height_o="1782" data-src="https://freight.cargo.site/t/original/i/3820edbc1254adaa484ee21a2dc6d2b0e7612c8aba27139ca3f8ee535bd883a8/header.jpg" data-mid="201451615" border="0" src="https://freight.cargo.site/w/1000/i/3820edbc1254adaa484ee21a2dc6d2b0e7612c8aba27139ca3f8ee535bd883a8/header.jpg" /> C.6 Increase engagement and growth The Challenge Validate increasing engagement and growth through telematic test drivesSummary We had previously introduced telematic car insurance, where customers could save on their car insurance, depending on their driving skills measured by the app. Our long-term goal was always to deliver a more fair pricing structure, based on the development of the driving behaviour, and the customer feedback we got supported this. The first version was limited to a one-time offer, and mainly targeted to new customers. We wanted to change this while allowing customers more control of their monthly premiums. Besides this, we wanted to validate our assumption that higher user engagement would result in more organic growth through referrals shared. In our first version we had promised customers that they would be able to take another yearly test drive, so our first task was to make test drives expire after the first year, and then make it possible for existing and new customers to take new test drives, whenever they wanted, as long as they do not have an active test drive running. This meant that when a customer finished a test drive, they would receive a discount with a 365-day discount period, that they could renew whenever they wanted. The new discount would then take the place of the previous one, but not affect their base price. Conclusion We saw an uptick in the amount of test drives per customer and only a small amount of current customers churned when their discount ran out. Most users opted to renew it through a test drive, which led to higher engagement and an increase in organic growth. My RoleDesign leadUser researchUser experienceUser interfaceUser testingQuality assurance ProcessDiscovery cyle <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/0d77deb7d956a18a7bfe21febb9b95dfe8cc4b268e2ba2b45e04036b17616400/Onboarding.jpg" data-mid="201451613" border="0" src="https://freight.cargo.site/w/1000/i/0d77deb7d956a18a7bfe21febb9b95dfe8cc4b268e2ba2b45e04036b17616400/Onboarding.jpg" /> <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/dc59a3660ca1a706e9204e4098f45fe35a6484890b072bd4302e2ebe02069640/Onboarding-3.jpg" data-mid="201451609" border="0" src="https://freight.cargo.site/w/1000/i/dc59a3660ca1a706e9204e4098f45fe35a6484890b072bd4302e2ebe02069640/Onboarding-3.jpg" />Test drive activcation, first score, celebration screen, and dashboard <img width="3840" height="2160" width_o="3840" height_o="2160" data-src="https://freight.cargo.site/t/original/i/109764d8be42986c53bc28aa317998b00190023c2b9b9d6ceaf036b77b3f695b/Onboarding-4.jpg" data-mid="201451608" border="0" src="https://freight.cargo.site/w/1000/i/109764d8be42986c53bc28aa317998b00190023c2b9b9d6ceaf036b77b3f695b/Onboarding-4.jpg" />Test drive entry point, explainers and opt in for location An example of the comparison experience, which was used as a part of the user test, handover and stakeholder presentation. Flows, component handover and prototype for user test <img width="2720" height="846" width_o="2720" height_o="846" data-src="https://freight.cargo.site/t/original/i/14b73d30c4f18bdaf440b3c01dc1e4dac531fdbf276a2708d378d43e228a6376/Screenshot-2024-01-09-at-14.01.42.png" data-mid="201451610" border="0" src="https://freight.cargo.site/w/1000/i/14b73d30c4f18bdaf440b3c01dc1e4dac531fdbf276a2708d378d43e228a6376/Screenshot-2024-01-09-at-14.01.42.png" /><img width="3608" height="1946" width_o="3608" height_o="1946" data-src="https://freight.cargo.site/t/original/i/ab818d3daf684d1683554af5aa91c11df3c2c423cac10958b8c0e49d6a11d04d/Screenshot-2024-01-09-at-14.00.59.png" data-mid="201451612" border="0" src="https://freight.cargo.site/w/1000/i/ab818d3daf684d1683554af5aa91c11df3c2c423cac10958b8c0e49d6a11d04d/Screenshot-2024-01-09-at-14.00.59.png" /> <img width="3534" height="1628" width_o="3534" height_o="1628" data-src="https://freight.cargo.site/t/original/i/8d11e6e28e60a7e9a9341d89a0daba58f1393fd6bdff021735ccb3315efdf46e/Screenshot-2024-01-09-at-13.49.06.png" data-mid="201451611" border="0" src="https://freight.cargo.site/w/1000/i/8d11e6e28e60a7e9a9341d89a0daba58f1393fd6bdff021735ccb3315efdf46e/Screenshot-2024-01-09-at-13.49.06.png" /> https://jonasbundgaard.com/Increase-conversion-rate Thu, 11 Jan 2024 11:02:48 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Increase-conversion-rate <img width="3456" height="1539" width_o="3456" height_o="1539" data-src="https://freight.cargo.site/t/original/i/0f4b266482258dd647a0bc8b574ceaff3ae5bad477c146459002aa661d93545d/Insurely.jpg" data-mid="201431000" border="0" src="https://freight.cargo.site/w/1000/i/0f4b266482258dd647a0bc8b574ceaff3ae5bad477c146459002aa661d93545d/Insurely.jpg" /> C.6 Increase conversion rate The Challenge Increasing conversion rate through intelligent insuranceSummaryWe saw that during the onboarding funnel, 12% of the users who was presented with a car insurance quote did not convert, all though we knew that we were more competitive in 80% of the cases. Our assumptions was that a lot of the users&nbsp;would drop off because it was no clear to them how the offer compared to their current insurance. This was backed up by the fact that incoming&nbsp; traffic through the comparison service Samlino was twice as good as organic traffic due to these users being more aware of the competitiveness. We set out to test our assumption, by implementing a MVP that would allow customers to collect, compare and switch insurance policies without leaving our platform. Together with data from the Insurely team we mapped out how the coverage of the danish insurance market was to be compared. We build and user tested then experience that focussed on giving the customers a clear overview and comparison of their old policies and new quote, then quickly customize coverages and see real time changes and finaly allow for cancelling of their old policy and acceptance of our offer, directly in our purchase flow.&nbsp; It worked by having them pick their current insurance and then login in with their NemID. From there they were shown a comparison page, that focussed on a fair comparison - It was especially important to us that customers felt that they could trust the results and mapping of the products, so that the price they saw, was the full and final price, no hidden fees. This also meant that we needed them to confirm or change their coverages, deductible and km/year, which we sat based on their current insurance. In the comparison they could see how the two companies coverages compared to each otherm and if there were any extra services or differences in amount covered. My Role User researchUser experienceUser interfaceUser testingQuality assurance ProcessDiscovery cycle <img width="2500" height="1406" width_o="2500" height_o="1406" data-src="https://freight.cargo.site/t/original/i/82bb519b67b18de44c8d504a55531d631680b0d8ecbb90a4669f8e2aa35f2d27/Onboarding-1-1.jpg" data-mid="201433913" border="0" src="https://freight.cargo.site/w/1000/i/82bb519b67b18de44c8d504a55531d631680b0d8ecbb90a4669f8e2aa35f2d27/Onboarding-1-1.jpg" /> <img width="5760" height="3240" width_o="5760" height_o="3240" data-src="https://freight.cargo.site/t/original/i/1838d2a4454b2d64d6a7c6fed92c30cefb89e981c6508d8e1d914184439914fd/Insurely-slide-1.jpg" data-mid="201866355" border="0" src="https://freight.cargo.site/w/1000/i/1838d2a4454b2d64d6a7c6fed92c30cefb89e981c6508d8e1d914184439914fd/Insurely-slide-1.jpg" />1. Compare Entry Point, 2. Insurely Explainer, 3-4. Insurely Module, 5. Price Comparison An example of the comparison experience, which was used as a part of the user test, handover and stakeholder presentation. ConclusionWe wanted to focus on and open and easy access, but due to technical reasons, we had to start the MVP out only for customers already logged in. This limited us to introduce the feature when the users had used phone authentication, and answered enough personal questions to get a quote. This again resulted in a long onboarding, where the feedback from the customers was, that they would have wanted to comparison in stead of the login, and not have to&nbsp; Other factors was that the service from Unsurely took some time to stabelise: 10% of all request to Insurely failed10% of users starting a price comparison ended with a “Completed empty”Only 31% finish rateThis left us with a conversion rate with no significant difference to our current, and only a slight uptick in referal. The next step was to build the descoped part of the experience, add it to the top of the funnal, and evaluate and implement user suggestions.&nbsp; Coverage mapping, flows, component handover and prototype for user test <img width="3364" height="1530" width_o="3364" height_o="1530" data-src="https://freight.cargo.site/t/original/i/e2146bab34a6be49d66e4b47591e86330b6d4620ff1ee6789035d331d49b9b28/Screenshot-2024-01-10-at-12.16.58.png" data-mid="201866407" border="0" src="https://freight.cargo.site/w/1000/i/e2146bab34a6be49d66e4b47591e86330b6d4620ff1ee6789035d331d49b9b28/Screenshot-2024-01-10-at-12.16.58.png" /><img width="2000" height="972" width_o="2000" height_o="972" data-src="https://freight.cargo.site/t/original/i/f9ec2def332dadf42131bf0b4e3a81d60fae2286b96c76572fdba00f169f0bd8/Screenshot-2024-01-10-at-12.11.26.png" data-mid="201433916" border="0" src="https://freight.cargo.site/w/1000/i/f9ec2def332dadf42131bf0b4e3a81d60fae2286b96c76572fdba00f169f0bd8/Screenshot-2024-01-10-at-12.11.26.png" /><img width="1716" height="1824" width_o="1716" height_o="1824" data-src="https://freight.cargo.site/t/original/i/77a22d0009029c94ef8d9ccd7081264d98e5cfcefc6bb4497c4f8be96a754818/Screenshot-2024-01-11-at-10.47.01.png" data-mid="201433915" border="0" src="https://freight.cargo.site/w/1000/i/77a22d0009029c94ef8d9ccd7081264d98e5cfcefc6bb4497c4f8be96a754818/Screenshot-2024-01-11-at-10.47.01.png" /><img width="2000" height="1340" width_o="2000" height_o="1340" data-src="https://freight.cargo.site/t/original/i/c459a79d45eecc72ad5082d6317cab5c195718463c0ddc1ac6862f80f3fc8e0c/Screenshot-2024-01-10-at-12.11.53.png" data-mid="201433919" border="0" src="https://freight.cargo.site/w/1000/i/c459a79d45eecc72ad5082d6317cab5c195718463c0ddc1ac6862f80f3fc8e0c/Screenshot-2024-01-10-at-12.11.53.png" /><img width="2000" height="880" width_o="2000" height_o="880" data-src="https://freight.cargo.site/t/original/i/70ed99cd746d87835a3deaa5181400d12b8d80c23cb2b27567ee5a22a4d4e365/Screenshot-2024-01-10-at-12.25.19.png" data-mid="201433918" border="0" src="https://freight.cargo.site/w/1000/i/70ed99cd746d87835a3deaa5181400d12b8d80c23cb2b27567ee5a22a4d4e365/Screenshot-2024-01-10-at-12.25.19.png" /> https://jonasbundgaard.com/Creating-a-flexible-design-system Mon, 22 Feb 2021 11:59:37 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Creating-a-flexible-design-system <img width="2848" height="1268" width_o="2848" height_o="1268" data-src="https://freight.cargo.site/t/original/i/f2c2670bc066d10e1e6d1be065c798efbd70360bf8193189bba0e6460585de10/Header-Visualnew.png" data-mid="201452753" border="0" src="https://freight.cargo.site/w/1000/i/f2c2670bc066d10e1e6d1be065c798efbd70360bf8193189bba0e6460585de10/Header-Visualnew.png" /> C.7 Creating a flexible design system&nbsp; The Challenge Creating a consistent, flexible and scalable design system, designed with and for the developers and with our end users in mind.We’ve introduced a lot of new features over the years. This has added both value and early learnings, but also impacted the technical work that has had to change and adapt over time, leaving the design- and development team with technical debt. While it’s normal for a product team in the early state to sacrifice for agility, this has ultimately left the user experience less coherent and consistent than desired. We needed a better foundation to avoid, that a larger portion of the team’s energy was being spent on working around the current components and having to compromise instead of focusing on solving user needs, and providing an optimal experiences. My RoleSenior product designer: Visual research Design System creationBrand design adaption Prototyping Design Reviews Presenting Sprint typeDiscovery sprint Design and prototype different solutions directed by the strategy. Test and learn, to validate work and direction. &nbsp; &nbsp; &nbsp;<img width="396" height="212" width_o="396" height_o="212" data-src="https://freight.cargo.site/t/original/i/664d1d7cbcb36ca8e8c99e5c8551a6cffb40e827be78733df44c199272d2230e/Group-42853.png" data-mid="101987644" border="0" data-scale="79" src="https://freight.cargo.site/w/396/i/664d1d7cbcb36ca8e8c99e5c8551a6cffb40e827be78733df44c199272d2230e/Group-42853.png" /> My Story I began as the first Product Designer, eventually moving up to Senior design role as both the scope of the projects and the team grew.As Senior Product Designer at Tonsser, I helped to grow the company since its earliest days, and I created the core experience for iOS, Android that is still the foundation of the product today. This case study spans the exploration and creation of the Tonsser design language (North Star) and covers the design process, and my role in it. The Product In short, Tonsser let’s football players track their stats and showcase their potential to the world. It’s a utility tool, a vertical social platform and a marketplace, where scouts and clubs can discover previously hidden talents. It’s aim is to democratise football and even the playing field. At its core it empowers players to log their match performances, monitor their progression, set goals and take control of their own football career. The aim is to democratise football and even the playing field Tonsser, Football App <img width="1080" height="1920" width_o="1080" height_o="1920" data-src="https://freight.cargo.site/t/original/i/8d946e888071c0c42ce41541bfef78d730108ed63b99ba15c839770010745d02/Header-Visual3.png" data-mid="99755302" border="0" src="https://freight.cargo.site/w/1000/i/8d946e888071c0c42ce41541bfef78d730108ed63b99ba15c839770010745d02/Header-Visual3.png" /> What This case was mainly a question of solving a technical problem while continuing to deliver value to our users, with a tight deadline. We had quite a big Information Architecture sprint overlapping, but we fought to have the first overall framework and the needed components ready and agreed on before kicking off the sprint, that would eventually use the new components based on our initial work&nbsp; Our aim for the design language was to create a a solid foundation on which to base all future design on, and in order to do so we realised early on, that we needed it to&nbsp;to be a technical blueprint for our UI and a&nbsp;flexible framework, that could easily be branded, with future DNA elements: colours, typography, gradients, images, icons etc. It needed to be our North star, a vision for the product to help gather the team around and to navigate by Before the kickoff, we agreed to follow the core principles of the atomic design framework, but continue to adapt it to our process and needs. This was done based on insights from discussions with the tech-team. We needed a DNA/component based setup, in order for them to build for scale.&nbsp; Some of the causes leading to the need for design language, was that changes in the development team and early design choises had led to several card systems, that was not compatible. Therefore, at big focus for us in the rewamp was to ensure that what we build was future proof. By choosing the Atomic Design System as a base, we ensured that future changes to the DNA, would easely be branched out into all corners of the design. With our limited time, we could then focus mostly on the base, without worrying about what would happen when tweaking the UI later on.&nbsp; <img width="1436" height="572" width_o="1436" height_o="572" data-src="https://freight.cargo.site/t/original/i/ed6a79756f8a73c1a9c22133c908b5e7bfb64f6e7e83c84aa797921c9d2c5cc8/DNA-and-Framework-in-current-pages.png" data-mid="101887402" border="0" src="https://freight.cargo.site/w/1000/i/ed6a79756f8a73c1a9c22133c908b5e7bfb64f6e7e83c84aa797921c9d2c5cc8/DNA-and-Framework-in-current-pages.png" /> The North Star Technically The North Star is aimed to be a set of design files, with thorough documentation, built to be the one true shared truth, while simultaneously living in code. <img width="1436" height="692" width_o="1436" height_o="692" data-src="https://freight.cargo.site/t/original/i/0825515825cf9036060e8609b8804fc028bae5ce31a3526f14fcef7ddea12e1c/DNA-and-Framework-in-current-pages-1.png" data-mid="101887403" border="0" src="https://freight.cargo.site/w/1000/i/0825515825cf9036060e8609b8804fc028bae5ce31a3526f14fcef7ddea12e1c/DNA-and-Framework-in-current-pages-1.png" /> Why Below are some of the areas we worked to improve with the new design language. 4 Pillars, that we believe can ultimately lead to accelerated innovation, by allowing us to move through the process much smoother. And in continuation of this we are able to focus on delivering a hightened and holistic user experience.&nbsp; Streamlined Workflows: Much smoother handover processes as no new slightly changed UI or Patterns Team Collaboration: Peace of mind and clarity. A feeling that comes with such collaborationDesigned WITH developers.Documentation WITH developers.Easy presentation and collaboration with stakeholders. Integrated Governance: Updates and changes are easely spottedOne source of truthResponsibility being divided between developers and designers. Quality Assurance:UX Writing will be elevated and included as a prioritisation (This will help us scale much more easily)Accessibility accounted forAndroid, not an afterthought.All states accounted for and examples of use noted The ProcessInitial Explorations: We kicked this phase off with an open working session, where we discussed our vision, goals and other visual directions, products,&nbsp; elements and patterns that we love. My inspiration for the directions I presented was based on a competitor analysis done in collaboration with our PM, our insights into the users product habits from user personas, made by our research team and our knowledge of the vision set for our product. Nike Running Often used by our players Dark / Light themesVisual treatmentsTypeUse of spaceColour paletteBold contrast Strava Similar vision for data usage Great visualisationColor for emphasisGood type hierarchyTailored feel AirBnB Strong design languageClear and consistentUse of spaceGreat design DNAClear patternsGood use of UGC imagesGreat icon design, animations and transitions <img width="1842" height="1114" width_o="1842" height_o="1114" data-src="https://freight.cargo.site/t/original/i/33ed0856d4a6d57e6e0dab027e903a6f03ef49c636f0657d92e2da90bd6814a7/Initial-exploration-other-products.png" data-mid="99717967" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/33ed0856d4a6d57e6e0dab027e903a6f03ef49c636f0657d92e2da90bd6814a7/Initial-exploration-other-products.png" />Product exploration: I was mostly inspired by the bold use of fonts (Nike), the unified iconography (Apple books), the elevated UX writing&nbsp;+ use of space (Airbnb) and the data visualisation (strava) With this new design direction, we wanted to create a contemporary UI, that could tie the user experience together, and that we could easily build on top off, to accommodate for future iterations based on insights and feedback.To help with this, we agreed to base our design language on a clean and straightforward user interface. One that could allow for complex problem-solving, together with clear CTAs and consistent interaction patterns to guide the users and help them make informed decisions.&nbsp; The most important part of this overhaul was to reduce the technical debt and to align on a flexible design framework DNA &amp; Elements After the initial exploration of design directions and research, we gathered our suggestions and had a couple of sessions in the design team, to create a shared Core DNA file to outline the basics of our new UI/language.We settled on three pages in the current product, that had the core components represented, and then used those as a shared base for our explorations. We did this to ensure that we kept our solutions focused on the product. These were also pages that were core to the users experience and that we knew needed attention in future sprints. <img width="1842" height="1114" width_o="1842" height_o="1114" data-src="https://freight.cargo.site/t/original/i/bfa4cf57c91a330aec732217f284e97df8edd6b45dd83f28fa33a98ef8fa203a/Current-design22.png" data-mid="101888538" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/bfa4cf57c91a330aec732217f284e97df8edd6b45dd83f28fa33a98ef8fa203a/Current-design22.png" /> In these exploration sessions we gave each other space and time to try out ideas, ideate and refine until we had our design principles and a direction that we were all aligned on. Design direction:Bold fontsLess cognitive load in the UI Clear and focused CTAsUnderstandable and consistent interaction patterns (such as transitions, loading)Elevated UX Writing Focused and guarded Information-/ and navigation architecture More space and breathing room for contentUnified and modernised iconography Support for light/dark themes. We were luckily all quite aligned on the broader picture from the get go. These directions went through several versions, critique-sessions and discussion before the final options were decided upon, with feedback from developers and the broader team. DNA Following are the DNA and Elements I presented to the team, for our shared Core DNA file. Typography: Bold fontsColors: Support for light/dark themes. Spacing: More space and breathing room for contentIconography: Unified and modernised&nbsp; Typography:&nbsp;The Text-styles that was already used client-side, was a typographic hierarchy I had build a couple of years prior. All body fonts and most titles was using the native options for both platforms (Android: Roboboto &amp; iOS: San Fransisco), while Some cards and headers that needed extra focus, were using the Tonsser Brand font: Mallory Ultra (a very bold sans serif font with destinct sharp features). Since the current hirarchy was working quite well, and already implemented, I suggested that we use that as a base, but tweaked it to suit our new direction.&nbsp;For the display fonts, I played around with different alternatives to the Mallory brand font &nbsp; Druk wide: (suggested my codesigner Paco). Trendy wide font. Well used by both adidas and nike, for their campaings. The wide aspect would require us to rethink some headers and title, and the font-family came with quite the price tag.&nbsp; New york: A serif headline to give contrast t to the sans serif body text. Free to use. ABC Favorit Lining: A bit of a curveball, from a small type foundry. Cheap to use. Lighter than the rest, but very destinct. Has 2-3 different sets with different custom underlines. Could help the brand stand out, but might in the end not feel dynmic enoug for our use.&nbsp; Mallory: Already bought and paid for, but under used in the product. Bold, destinct. Known by our audience, but perhaps if we use it in a different way.&nbsp; <img width="838" height="812" width_o="838" height_o="812" data-src="https://freight.cargo.site/t/original/i/945e5533375cbc448ab85a8ebe76ca9ea850fdcb0084e7d38c2dfd8e0a83e8ad/SUPPORTER-DASHBOARD22.png" data-mid="102244806" border="0" src="https://freight.cargo.site/w/838/i/945e5533375cbc448ab85a8ebe76ca9ea850fdcb0084e7d38c2dfd8e0a83e8ad/SUPPORTER-DASHBOARD22.png" /> <img width="3258" height="3159" width_o="3258" height_o="3159" data-src="https://freight.cargo.site/t/original/i/63d33f677110fc0746f1cd1c55067c57ce543b36d359106e7fa65addbba38df5/SUPPORTER-DASHBOARD.png" data-mid="102244699" border="0" src="https://freight.cargo.site/w/1000/i/63d33f677110fc0746f1cd1c55067c57ce543b36d359106e7fa65addbba38df5/SUPPORTER-DASHBOARD.png" /> Colors:It was the same story for the implemented color-scheme. It was working, but needed a cleanup. The Grey-scale all had a green hue to them, that had worked well previously with a data-heavy app, but was now interfering with the modernised branding and with the higher focus on content, it was clashing with the media in the product. But mostly the focus was on making sure that we were supporting dark and light theme, while iterating on a different tone for our green brand color, that was notoriously hard to use, but very destinct. The fall back was, as mentioned, to clean up our current grey-scale and possibly tweak the green brand color.&nbsp; But while we were giving ourself time to experiment and think big, I wanted to be bold and really challenge the main color, and at the same time playing around with adding an accent color. During the work with Tonsser throughout the years, I have experiences, how sticking to using a single primary color can be limiting, so I wanted to try and challenge this.&nbsp; These combinations was inspired by other sports-, adventure- and fashion brands, but the focus was less on a brand redesign at this point, and more an exercise on the possibilities of creative and scalable use of colors.Concept 1: &nbsp; Classic pairing&nbsp;Concept 2:&nbsp; Off color pairings&nbsp;Concept 3:&nbsp; Disturbing Color&nbsp;Concept 4:&nbsp; High energy color + earth tone.&nbsp; <img width="1986" height="1926" width_o="1986" height_o="1926" data-src="https://freight.cargo.site/t/original/i/f5a742a5b155e05f2c2a65d4479d5c4ba5a8411e6cfd670d0e9fa1d1b47f900b/SUPPORTER-DASHBOARD333.png" data-mid="102129919" border="0" src="https://freight.cargo.site/w/1000/i/f5a742a5b155e05f2c2a65d4479d5c4ba5a8411e6cfd670d0e9fa1d1b47f900b/SUPPORTER-DASHBOARD333.png" /> <img width="3258" height="3159" width_o="3258" height_o="3159" data-src="https://freight.cargo.site/t/original/i/1374d2106c075bcb6e2732819ef19793d9ad1653f86f5d31ee4384c8e487719d/SUPPORTER-DASHBOARDff.png" data-mid="102133558" border="0" src="https://freight.cargo.site/w/1000/i/1374d2106c075bcb6e2732819ef19793d9ad1653f86f5d31ee4384c8e487719d/SUPPORTER-DASHBOARDff.png" /> Spacing: We knew we wanted the app to feel lighter and in the end give the users less cognitive load while using the product. This could to some extent be solved with the grid structure and spacing in the app, but eventually had to be adressed as a part of our UX work: Refocusing on the core, that aimed to adress the Information Architecture of the app. I already knew that I wanted to push for adopting a 24px margin, instead of our current 16px, well aware that it together with bigger and bolder typograhy would pose challenges to the content in the current layout.&nbsp; But initial tests had already showed, that moving “one step up” the typographic scale, would require us to do the same for the spacing, in order to balance it out.&nbsp; <img width="1608" height="1560" width_o="1608" height_o="1560" data-src="https://freight.cargo.site/t/original/i/52d519af4bfc4ce6420f5209bd9d5cf25829f7ca66e9e6f410d8ddc37fce5673/SUPPORTER-DASHBOARD22.png" data-mid="102130297" border="0" src="https://freight.cargo.site/w/1000/i/52d519af4bfc4ce6420f5209bd9d5cf25829f7ca66e9e6f410d8ddc37fce5673/SUPPORTER-DASHBOARD22.png" /> Iconography: The push for unified and modernised iconography, came from a setup that had grown slightly apart throughout the years. But as with the spacing, a lot of the growing pains came from the lack of a unified solution.&nbsp; For this first round, I tried to focus on cleaning up our current icons, and set up rules for bounding box, hit areas and usage on images, gradients, solid colors (light/dark theme) etc. &nbsp; <img width="1010" height="1006" width_o="1010" height_o="1006" data-src="https://freight.cargo.site/t/original/i/71e5805b77f22b2ea789952e578a6894de0da49c132c0041b75c02625b7b632b/Screenshot-2021-03-14-at-19.53.00.png" data-mid="101997924" border="0" src="https://freight.cargo.site/w/1000/i/71e5805b77f22b2ea789952e578a6894de0da49c132c0041b75c02625b7b632b/Screenshot-2021-03-14-at-19.53.00.png" /> Elements Less cognitive load in the UI Clear and focused CTAsFocused and guarded Information-/ and navigation architecture Navigation: The most widely used navigation pattern in the app (and also the one used in the most amount of different styles), was the taps, so I started my focus here. I wanted them to be clear/unapologetic/bold, but at the same time giving room to the content when necessary (Om scroll)&nbsp; <img width="1458" height="447" width_o="1458" height_o="447" data-src="https://freight.cargo.site/t/original/i/2194f78977030184832d9c06959854bd949fd5765268c55d59793b05c9465b79/tabs.png" data-mid="102735497" border="0" src="https://freight.cargo.site/w/1000/i/2194f78977030184832d9c06959854bd949fd5765268c55d59793b05c9465b79/tabs.png" /> Header As with the tabs, my idea for the header was to go big and give it space to tell a story, and with the possiblity to give lent focus to the content, on scroll. Going forward It further developed into giving space to different backgrounds and to a global header system, with room for icons.&nbsp; <img width="1458" height="711" width_o="1458" height_o="711" data-src="https://freight.cargo.site/t/original/i/0d6510f7d5397fb4d0ec9aae2abc05ec98ef50498736a0539d12c9aca26a7e34/Header1.png" data-mid="102736369" border="0" src="https://freight.cargo.site/w/1000/i/0d6510f7d5397fb4d0ec9aae2abc05ec98ef50498736a0539d12c9aca26a7e34/Header1.png" /><img width="1458" height="396" width_o="1458" height_o="396" data-src="https://freight.cargo.site/t/original/i/8628d798f79e22037dbffed2de56eaec7f027d1fc0162998aa872a3c4717ac7c/Header2.png" data-mid="102736368" border="0" src="https://freight.cargo.site/w/1000/i/8628d798f79e22037dbffed2de56eaec7f027d1fc0162998aa872a3c4717ac7c/Header2.png" /> Tab barIn the current product, the dark tab bar stood out, on the light grey background used on all tab-pages. So my suggestion was to used a color much closer to the background color (going forward, for both light/dark theme), in order to lesson the cognitive load and allow the users to focus on the content. <img width="1458" height="447" width_o="1458" height_o="447" data-src="https://freight.cargo.site/t/original/i/2c558ebe465e2cd1bbd5df5e39a8abbc49b76860f110564dd1373b89a848ebd1/tab-bar.png" data-mid="102736700" border="0" src="https://freight.cargo.site/w/1000/i/2c558ebe465e2cd1bbd5df5e39a8abbc49b76860f110564dd1373b89a848ebd1/tab-bar.png" /> ButtonsNo global spec for the developers to use, no clear distinction of when to use what. So I went through the product and mapped out all the different buttons in use, and the different styles. By merging a lot of them, I got it down to 3 different sizes. Small (Lists, Buttons), Medium (Headers), Large (Full width).&nbsp; With a new focus on spacing and a 24px margin, I wanted the buttons to help with onforcing the grid, and I felt that optically a slight rounded (4px) button “sat” batter in the layout, than the current (30px). <img width="3645" height="630" width_o="3645" height_o="630" data-src="https://freight.cargo.site/t/original/i/578eb7593da46fd43520733da0ee2dd21903bfa61a18d644b2fbe1dc0ce04dfa/Button1.png" data-mid="109352848" border="0" src="https://freight.cargo.site/w/1000/i/578eb7593da46fd43520733da0ee2dd21903bfa61a18d644b2fbe1dc0ce04dfa/Button1.png" /> Input fields &amp; PickersFor the input fields and pickers, I went through our current input flows, to asses the current major elements. 1. Input fields, 2. Custom pickers. For the input fields, I a reused the 4px corners from the buttons and created all the different stated (No input, Success, Error etc.). Since we have a couple of different pickers in the product, I chose to crate an arbitrary version, to show how a lot a spacing and bigger selectors could improve the overall feel.&nbsp; <img width="2451" height="906" width_o="2451" height_o="906" data-src="https://freight.cargo.site/t/original/i/cc48af218191deca37c920843d677530902c2f67524a5608ef2b5eb36bbc8ae8/Input.png" data-mid="102744174" border="0" src="https://freight.cargo.site/w/1000/i/cc48af218191deca37c920843d677530902c2f67524a5608ef2b5eb36bbc8ae8/Input.png" /> Cards: With the match card being the most core to the product, I tried to experiment with a minimal version of it, that could both work as a navigation tab and as a preview card. The checklist shown below it, I reimagined as a single card, that leads to an input overview, instead of trying to handle everything on the same match page. &nbsp; <img width="2451" height="906" width_o="2451" height_o="906" data-src="https://freight.cargo.site/t/original/i/3728ea2b6a0495430ac0188f9f58ad3728e5c9ed2cb39621cf3906e7d219bff5/card.png" data-mid="102745512" border="0" src="https://freight.cargo.site/w/1000/i/3728ea2b6a0495430ac0188f9f58ad3728e5c9ed2cb39621cf3906e7d219bff5/card.png" /> ConclusionSince the hierarchy was quite flexible already, our conclusion was that we would be able to land on our&nbsp;new design direction, with a tweaked version of our current hierarchies (for Colors, typography and spacing). And while experiementing with it for the elements, we proved that we were not far off. The next step was putting it all together and testing it out on core pages.&nbsp; Templates and PagesAt this stage, we gathered up the design language elements and applied them to our core Tonsser screens, for a feedback round. Below are the first screens I presented to the design team, with the DNA and Components applied to the core pages.&nbsp; <img width="4194" height="1676" width_o="4194" height_o="1676" data-src="https://freight.cargo.site/t/original/i/27be9358defb3bda14dda65662728b654435718fd079a5006ecb275a677a7092/Frame-4.png" data-mid="102747971" border="0" src="https://freight.cargo.site/w/1000/i/27be9358defb3bda14dda65662728b654435718fd079a5006ecb275a677a7092/Frame-4.png" />Left to right: Opportunities page, Skills selection flow &amp; Match page. For the templates and pages, I applied the DNA and Components, directly to the core pages, I took the liberty to tweak the navigation and the order of the elements, as the focus was not on the user experience here, but to showcase the DNA and components in a shared invironment and in the right context.&nbsp; As we had had close cooperation through the process, there was not a lot of suprises for the team. The feedback was mainly on testing out the Dark/light theme, and focus on the Matches page (instead of the opportunities page) and as a part of that: The match card and Header. &nbsp;I started by turning the input page into an input flow (by adding&nbsp; an intro page and a text input page). I did so, to give the team a better understanding of, how these pages could work together, and how they could potentially be used as a part of an onboarding flow, where the users focus would be on one tasks at the time, to allow the design to breathe, and minimise cognitive load&nbsp; For the Matches page, I wanted to work on the transitions and global header. I focused in on the match card as the core for tonsser, and used that as a starting point. As my original experiement with a minimal version of the match card was challenged by my colleagues in the design team. I took inspiration from our head of design in the idea og highlihting the opponent. To this, I added the idea of pulling the color from the logo and adding it to the background, as well as highlight one of their key players from the match (Automatically cutting out a person from an image is not impossible, but the quality from the user generated images varies so much, that this would most likely not be adviseble to try. It was although kept in to show the style we were going for. A style that had a lot of potential for other applications, where we were more in control of the content). As a final touch, I introduced a detail view to the match card. The ideas was to create an immersive experience, where the match card expands and transitions to a header card, so the users doesnt feel like they are removed from the Matches page. With this partial overlay, they can quickly navigate in and out of matches, and feel immersed into a single match, without being 3 layers deep in detail view.&nbsp; <img width="2451" height="906" width_o="2451" height_o="906" data-src="https://freight.cargo.site/t/original/i/38dfaa386ff9615b1793423a3e4d4bc86a5da37f417509b2b2e62fd7449153e3/Match.png" data-mid="104559858" border="0" src="https://freight.cargo.site/w/1000/i/38dfaa386ff9615b1793423a3e4d4bc86a5da37f417509b2b2e62fd7449153e3/Match.png" /> I wanted to try and create a global header, that could work both for the main pages, and detail views, andon all types of background. I did so, by moving the title down below the header, and adding semi-transperent background to the icons. This would potentially allow the header to work on all our current pages, even with images added to the backgrounds.&nbsp; <img width="2451" height="906" width_o="2451" height_o="906" data-src="https://freight.cargo.site/t/original/i/448a48a77ec99a7a009934e9ddc2c2f96dd84f8837d75b4e5cc9f6b6a1ed6ead/header6.png" data-mid="104559857" border="0" src="https://freight.cargo.site/w/1000/i/448a48a77ec99a7a009934e9ddc2c2f96dd84f8837d75b4e5cc9f6b6a1ed6ead/header6.png" /> Final Presentation At this stage, we wrapped up the North Star design elements for a company-wide presentation. The whole presentation was very well received by the stakeholders and the wider team, which gave us the buy-in we needed, to developing it further. The work is, of course, never finished - but with an aligment here, the kick-off phase ended and the real work of developing the language further, pushing it into the product and maintaining it started Below is the final version for the presentation, with: Match Page, Detail view and Input flow, in Light and dark theme.&nbsp; <img width="4194" height="2862" width_o="4194" height_o="2862" data-src="https://freight.cargo.site/t/original/i/9bf388a75cd12e371419bd782ba18523cd971b2fdd459ced76f04db2d49d43d5/Frame-1.png" data-mid="101994500" border="0" src="https://freight.cargo.site/w/1000/i/9bf388a75cd12e371419bd782ba18523cd971b2fdd459ced76f04db2d49d43d5/Frame-1.png" /> An ongoing process The process of adding or correcting Components:The designer produces an initial proposed new component(s)Sets a meeting with NS Ambassadors to feedback onDesigns present new proposals at Design Critique The designer makes adaptations and changesFinal feedback session with Ambassadors is set to finalise workFull documentation is completed and enters the Design Language doc in Figma once Dev Ambassadors and Design team sign off. It is now an official component. The design language is never ‘finished’, just levels of maturity. Like the product it evolves and adapts as we do but we aim here to have core building blocks decided upon so it can be comfortably used in a product sprint and enter production. The Implementation Below are the first Components that were finalised and added to the North Star, after the creation of the design language.&nbsp; They where added as a part of a sprint created to refocus on the core experience.&nbsp; <img width="2848" height="1448" width_o="2848" height_o="1448" data-src="https://freight.cargo.site/t/original/i/11629690ee4069b79a1550f8f5b39d23cb68755ea2fb73afce081a703da2eddd/Screenshot-2021-05-24-at-16.17.35.png" data-mid="109348397" border="0" src="https://freight.cargo.site/w/1000/i/11629690ee4069b79a1550f8f5b39d23cb68755ea2fb73afce081a703da2eddd/Screenshot-2021-05-24-at-16.17.35.png" /> <img width="2848" height="1448" width_o="2848" height_o="1448" data-src="https://freight.cargo.site/t/original/i/17e7f13718e8e8d5d84bd089bed600e839f4b9309a52992631fcb1c6372d0af3/Screenshot-2021-05-24-at-16.14.41.png" data-mid="109348248" border="0" src="https://freight.cargo.site/w/1000/i/17e7f13718e8e8d5d84bd089bed600e839f4b9309a52992631fcb1c6372d0af3/Screenshot-2021-05-24-at-16.14.41.png" /> https://jonasbundgaard.com/Af-art-magazine Thu, 11 Jan 2024 15:31:31 +0000 Jonas Bundgaard portfolio https://jonasbundgaard.com/Af-art-magazine Af Art Magazine, Animated type treatment 3D rendered typography for print and animation for danish art magazine Af Art, inclusing animatios for their launch event. COLLAB formal-settings.com <img width="1055" height="956" width_o="1055" height_o="956" data-src="https://freight.cargo.site/t/original/i/9e80194c9110e9cdd6ec828c7e9a2040092c05af385d2e806c689e6dad94bce5/Rectangle-2.png" data-mid="201454289" border="0" src="https://freight.cargo.site/w/1000/i/9e80194c9110e9cdd6ec828c7e9a2040092c05af385d2e806c689e6dad94bce5/Rectangle-2.png" />