These days, there&rsquo;s always a constant influx of new things to learn as a designer. We had the great &ldquo;should designers code&rdquo; debate; we also had accessible 3D crop up with new Figma-like tools such as <a href="https://spline.design/">Spline</a> to learn; we had NFTs where you needed to grasp the concept of tokens and fungibility; and finally we have AI, where you need to learn how to integrate it into your workflow to avoid &ldquo;<a href="https://www.theguardian.com/commentisfree/2023/jan/24/chatgpt-artificial-intelligence-jobs-economy">losing your job</a>&rdquo;.Granted, no, you don&rsquo;t have to actually learn all these tools or ways of working. But as Designers and Developers, we&rsquo;re often curious by nature and keen to be on the bleeding edge of technologies. Naturally that means we want to try things out, but importantly we also sometimes have to because our company (or companies we want to work for) expect us to.Recently there&rsquo;s been a lot of discussion about how AI could finally be after our <a href="https://medium.com/microsoft-design/yes-ai-will-replace-designers-9d90c6e34502">design</a> or <a href="https://medium.com/geekculture/will-ai-replace-programmers-fb6fcfd70b37">development</a> jobs. Like always with AI, it&rsquo;s seen as an inevitability and that maybe we need to start looking for new things to be good at.In reality, yes, AI may soon get good enough to do some of the tasks of a designer. But critically, it&rsquo;s still very much at the early stage where it simply copies things from the internet and attempts to sometimes create something slightly new, but that normally always has flaws.The more I&rsquo;ve been playing with Chat-GPT which is <a href="https://openai.com/">OpenAI</a>&rsquo;s playground for its <a href="https://openai.com/blog/gpt-3-apps/">GPT-3</a> AI model, the more I&rsquo;ve gotten interested in treating it more like a companion than a threat. More like a pair designer or pair developer, helping me get around thorny problems or simply just kick of a project.<blockquote>Instead of assuming AI will take our jobs, we can assume it&rsquo;ll become the best pair designer/developer to help us get started.</blockquote>I recently spent some time using it as a copywriting assistant when designing mocks.I can ask it a quick phrase like &ldquo;Write a headline that helps explain the importance of investing compared with saving into an interest-bearing account over the long term&rdquo; which gives me the response &ldquo;Investing for the Future: A Look at How Smart Investing Beats Out Saving for Retirement&rdquo;. Not bad really!<figure><img src="https://imgix.cosmicjs.com/77d1b720-9ee7-11ed-aca2-37db769eb59f-AEB814E6-2BB5-4EAE-908F-2DFAA9920AF5.jpeg" alt="Image of the first copy request and answer inside the PomptAI interface" class="fr-fic fr-dii"><figcaption>Image of the first copy request and answer inside the PomptAI interface</figcaption></figure>What about &ldquo;Write three bullet points for an app that helps explain the importance of investing compared with saving into an interest-bearing account over the long term&rdquo; instead? This gives me:<ul><li>Investing in the stock market, mutual funds or other types of investments can result in higher returns than the interest rate on a traditional savings account.</li><li>Investing allows your money to grow faster over the long term, allowing you to take advantage of compound interest.</li><li>Investing allows you to diversify your portfolio and protect against market fluctuations, providing valuable protection for your savings.</li></ul><figure><img src="https://imgix.cosmicjs.com/77dcb3a0-9ee7-11ed-aca2-37db769eb59f-BEC501B5-CCA8-4722-B465-5E874953C3A7.jpeg" alt="Image of the second copy request and answer inside the PomptAI interface" class="fr-fic fr-dii"><figcaption>Image of the second copy request and answer inside the PomptAI interface</figcaption></figure>Also really not bad at all. And if anything, a helpful jumping off point to refine based on our copywriting style.AI pair design will also provide a great mechanism for fast iterations on an idea. Think of it as the ultimate Crazy 8&rsquo;s companion. Feed it the initial concept and let it go wild for you. These tools will also be able&nbsp;to quickly evaluate hundreds of design solutions and narrow them down as quickly as possible. This means that the design process can be completed much faster than if it were done by humans. Equally, they can also be programmed to automatically adjust parameters and learn from their mistakes, allowing them to continuously improve the design and produce more reliable results with added accuracy.But this is more a future thinking concept when tools powered by <a href="https://openai.com/dall-e-2/">DALL-E</a>, <a href="https://www.midjourney.com/home/?callbackUrl=%2Fapp%2F">Midjourney</a> or other new AI models improve. Right now, the image generation is incredible but it doesn&rsquo;t really hit the mark for consistently good app ideas, it&rsquo;s much more useful for fantasy images.<a href="https://diagram.com/">Diagram</a> have started to play with some interesting ideas here via their <a href="https://magician.design/">Magician</a> plugin for Figma. As a way to generate quick icon iterations, UI and marketing copy or image ideas, it&rsquo;s a fantastic tool to speed up your workflow. But it can&rsquo;t replace an amazing icon designer, illustrator or copywriter right now.Ultimately we&rsquo;ll still need the human in the loop to ensure designs connect well with the people who&rsquo;ll interact with them. It&rsquo;s naive to think AI will be capable of human-level empathy any time soon or to make real, &ldquo;conscious&rdquo; decisions off the back of internal feedback. But one day we&rsquo;ll likely get there.I think we&rsquo;ll see an entire industry boom around the design of great prompts soon too. Imagine feeding an AI with the perfect prompt to generate amazing outputs. We&rsquo;re seeing this happen in the form of shared prompt spreadsheets or other <a href="https://prompts.chat/">websites</a>, but there&rsquo;ll likely be entire businesses that help you generate great prompts that generate great outputs. Then, eventually, we won&rsquo;t need those anymore and we&rsquo;ll just skip straight to great outputs from any prompt.I think it&rsquo;ll be important for us to embrace this new reality. Eventually every product will be powered in some way by AI, some are even already betting on it as <a href="https://www.notion.so/product/ai">part of their product strategy</a>. So if you&rsquo;ve not tried out GPT-3 and want to give it a go on iOS or macOS then you can <a href="https://testflight.apple.com/join/mXfEcgfv">try out an app</a> I built for myself via TestFlight. It&rsquo;s a simple native companion that uses OpenAIs API to provide responses based on text input. You can read more about <a href="https://kejk.tech/prompt-ai">here</a>.I encourage you as a designer to embrace it to shortcut the more tricky part of mocking designs&mdash;coming up with fake but realistic copy&mdash;and let me know if PromptAI proves useful. As a developer, I&rsquo;d encourage you to play with <a href="https://github.com/features/copilot">GitHub Copilot</a> again if you&rsquo;ve not in a while, it&rsquo;s incredible and powered by Codex from OpenAI (which you can also use in PromptAI&rsquo;s Code tab).

AI as pair design

I&rsquo;ve talked about my history before, but I haven&rsquo;t provided explicit advice about how to make a career switch effectively.Over the past few months, I&rsquo;ve been mentoring on <a href="https://www.adplist.org">ADPList</a> which has been a really great experience so far. I&rsquo;ve managed to learn a lot about my teaching style and also about what value I can bring to people beyond the typical portfolio review or interview advice.One thing I&rsquo;ve been mentoring on and am explicitly asked about is how I was able to successfully switch careers&mdash;from account management to design&mdash;without spending a single penny on a course from one of the big bootcamp providers. Granted, a few things had to fall in place to allow that, and there&rsquo;s a high element of luck, privilege and persistence that enabled the stars to align, but, I think it&rsquo;s possible for anyone if you look for the right opportunities in front of you.So below is some of my key advice based on what I did, how I did it and why I think it&rsquo;s important. Try to look for any of these things if you&rsquo;re in a position to switch, and use them to your advantage to get there.<h3>1. Spot the signs</h3>The first thing is deciding when you think it&rsquo;s the right time to transition your career. Maybe you&rsquo;re getting bored in your current role, maybe you&rsquo;ve spent your spare time exploring things that you&rsquo;d like to do more permanently, maybe you find yourself not delivering on what&rsquo;s expected of you.I noticed the latter one and that was my key trigger. I was an account manager at a startup digital agency in healthcare. I enjoyed the industry (to some extent) because the majority of projects we worked on were outcomes focused, in areas where people were often underserved/undertreated and where we could witness real results.But I sucked at my job.I was always forgetting the priority of tasks, I couldn&rsquo;t remember deadlines or manage my time effectively, I was good at client relationships, but fell short on ensuring all the team delivery aligned. Truthfully, I just wasn&rsquo;t cut out to be managing projects full time at that point in my career and I was also just not that into it. After being pulled aside a few times on this (sorry Lee!), I ended up being afforded the opportunity to explore managing just the digital projects, with a key focus on being the face for it in the company.But why?The partners saw in me some skills that I&rsquo;d not really noticed. I&rsquo;d been coding for many years behind the scenes but fell away from it a few years before I joined, I also had a fine art degree where I&rsquo;d studied technology-based art, and I&rsquo;d worked at Apple and developed a love of hardware engineering too. So there was a clear set of skills around technology and creativity that were being underutilised and there was a gap in the business for it. Success!So rather than floundering around in a role I couldn&rsquo;t do well, causing the business to suffer as a result&mdash;and my career too. I was supported and encouraged to flip and start exploring a completely new avenue.Thanks to Lee and the team, I got to learn on the job. I started coding again (in PHP for the first time, thanks Nick!) and began to learn Javascript again. I started to map out solutions to problems by creating information architecture maps and user journeys more seriously (I&rsquo;d been doing these before, but had no idea what they all were, it just felt natural) and I had the chance to attend some industry events and learn more about the world of UX. And this was the beginning of my flip. The whole shift took around three and a half years, so it wasn&rsquo;t fast (and don&rsquo;t expect it to be), but that slow burn taught me a lot.<blockquote>Pithy takeaway: Look for signs in your current role that you&rsquo;re underperforming or unhappy. This doesn&rsquo;t necessarily mean you suck at your job, it means you could be in the wrong job for you!</blockquote><h3>2. Find a sponsor internally or externally</h3>Looking for someone to help you transition your role from within could be a great way to make the switch. It won&rsquo;t always make sense, and you won&rsquo;t always find it but it can have a major impact on helping you get to where you want to be.In reality, there&rsquo;s two paths you can likely look to take:<ol><li>Find a sponsor within and make your move internally</li><li>Work behind the scenes and make the switch by switching companies and starting fresh</li></ol><h4>A sponsor within</h4>When utilising the sponsor within your organisation, you&rsquo;ll need to share your reasons for wanting to shift and likely in some ways interview for the switch (and possibly have to actually interview if it&rsquo;s an internal job advert).Importantly, internal sponsors can open doors and unlock opportunity. In my case, one of the business partners gave me the chance to explore the things I appeared to be both better at, and more interested in, as a way to get out of the cycle of underperforming but also as a way to fill a hole that existed in the business but wasn&rsquo;t actively thought about.Sometimes though, that internal sponsor isn&rsquo;t available, so your next option is to look outside.<h4>A sponsor outside</h4>If you need to look outside, scout your available network first before relying on applying for jobs. Remember that at this stage you&rsquo;ve got zero track record of actually doing the job you want to, so you&rsquo;ll need to be conscious of how that&rsquo;d appear to a recruiter.No-one wants to be in the Nope Pile&trade; so do everything you can to not end up in it.Although I found my sponsor within, once I started those new roles I had some very weird titles from our collective lack of understanding what I now did. I was a Digital Innovation Manager (what!?) and then a Digital Lead (🤷🏻&zwj;♂️) and then finally a Lead UX Architect (better!).Sometimes, when applying for roles later I massaged my titles into what they were in common parlance to make it easier for the interviewer or recruiter to figure me out. So I was a UX Designer and then a Lead UX Architect.After that I moved to a new job and I ended up as a Senior Solutions Designer (what!?) so I called that a Senior Product Designer initially but have since swapped it to Senior Design Engineer because again, it more accurately reflects what I did.None of this is lying, it&rsquo;s about making it easier for a recruiter to make sense of what you did if you&rsquo;ve worked at companies that have non-traditional job titles.When considering an external sponsor, look for someone who might be willing to take a punt on you. Search networks such as <a href="https://www.adplist.org">ADPList</a> where you can find mentors, and if you impress someone enough, who knows what might happen! Equally, don&rsquo;t be afraid to scout Twitter for people you respect and send them a DM if you can, you&rsquo;d be surprised how often they&rsquo;d reply.<blockquote>Pithy takeaway: Look for opportunities in your current role to start exploring things that interest you, narrow in on them and start exploring them. Aim to find a sponsor internally or externally that&rsquo;ll afford you the space to do it, and take that leap.</blockquote><h3>3. Find a mentor outside of your workplace</h3>So on the subject of ADPList and mentorship, there&rsquo;s a lot of options out there. The reality with most mentoring is that it&rsquo;s normally a free service where industry experts dedicate some spare time to helping you, so set your expectations at that level.You&rsquo;ll potentially gain a lot of useful advice but try to have more than a single mentor. One mentor will be biased on their experience (see above everything I&rsquo;ve said about my very specific story) so having a couple can help alleviate some of that. Equally, because most mentoring is free and delivered in a mentor&rsquo;s spare hours, be conscious of wasting a mentor&rsquo;s time by not showing up or by being unprepared.A mentor will be able to give you some generic guidance or offer feedback on work you&rsquo;re producing such as a portfolio review or CV assessment, but I&rsquo;d urge you to utilise them more as a sort of a shoulder to lean on.Talk to them about your frustrations, your challenges, your successes, your questions. Get their advice and soak it up. Keep notes, always keep notes. And follow up from previous sessions to keep a thread going.Importantly, remember that they&rsquo;re to help you but it&rsquo;s you who wants their help. You need to drive the conversations and come ready with questions and requirements otherwise you won&rsquo;t utilise your sessions well.I&rsquo;d recommend structuring your sessions like this:<ul><li>Pleasantries (&ldquo;hello, how are you?&rdquo; etc)</li><li>What happened this/last week?</li><li>What&rsquo;s the biggest thing on your mind right now?</li><li>What&rsquo;s frustrated you the most this past week?</li><li>Next steps</li></ul>I know it feels really formal, but structure helps with consistency and progress. You don&rsquo;t want to waste yours or their time.<blockquote>Pithy takeaway: Looking for support outside of your workplace is key. Internal colleagues will often see you for who you are in the workplace (i.e. your current role/title), external mentors will be free of most bias and focus on helping you get to your next step.</blockquote><h3>4. Start free, then maybe spend money</h3>This is an easy one. There&rsquo;s a tonne of Bootcamp courses out there that charge extortionate amounts of money. I won&rsquo;t name and shame, but the sums are ridiculous, especially because I&rsquo;ve spoken with many mentees that didn&rsquo;t even get roles or any further success after spending $9k on a course from a well known provider.Lots of people are out there to make side income, and lots of people will charge for the services they offer. That&rsquo;s okay, but be wary. There is so much free content available that can get you to where you want to be, especially in design or development, so always start there first.Free resources may not always have a certificate, but that&rsquo;s okay, having a certificate isn&rsquo;t everything. The reality is that showing the work you&rsquo;ve made is what&rsquo;s most valuable, not having a certificate with a Bootcamp&rsquo;s name on it.As a hiring manager, I don&rsquo;t really mind what your background is if the work speaks for itself. I&rsquo;m biased here because I had a non-traditional background, but, I think most hiring managers would be the same.<blockquote>Pithy takeaway: There&rsquo;s a wealth of free resources out there for any career, particularly design and development. Take advantage of all of that great thinking and sharing, and build your knowledge from there first. Then, maybe, hit a bootcamp if you absolutely feel you want or have to.</blockquote><h3>5. Create example work from your own briefs</h3>Something that&rsquo;s always been difficult for me to swallow is portfolios where someone is new to the industry (either junior or switching careers) and it&rsquo;s filled with redesigns of Spotify or Gmail etc.These projects can be really interesting from a thinking and execution perspective. I can get a clear idea of how you think about a problem you see and how you execute on that. But, your solution has to ignore all of the internal constraints those teams face. So whilst it may look amazing, there are likely many reasons they&rsquo;ve not shipped something similar.Queue the incoming stream of unsolicited redesigns based on <a href="https://twitter.com/desandro/status/1562435848389332993">this.</a>What I&rsquo;d prefer to see is a set of self-initiated briefs. What if you could design/build an app or website from scratch to solve a specific problem you face? How would you tackle that?There&rsquo;s also great brief generating platforms out there that you can use as thought starters. I&rsquo;d always prefer a personal problem personally, from both my own perspective and as a hiring manager, because you&rsquo;ll be more personally bought in to the idea. But briefs will feel more like working at an organisation and allow you to test working in an area you might not be as passionate about.Check out <a href="https://goodbrief.io/">Good Brief</a> as a great starter. You can use this for development too but focus more on the logic and tech stack than on the actual design itself (use <a href="https://tailwindui.com/">TailwindUI</a> or other similar things to simplify the UI part for you).<blockquote>Pithy takeaway: There&rsquo;s a tonne of free brief generating sites out there, or you can think about a problem you face and create a solution for it. I&rsquo;d always urge you to avoid popular product redesigns because there&rsquo;s often a tonne of constraints you&rsquo;re unaware of so it doesn&rsquo;t feel realistic to a recruiting manager.</blockquote>Hopefully some of those insights and tips help you on your switch if you planning to make one.Remember, most importantly, that all of your experience is relevant and valuable. It doesn&rsquo;t matter where you&rsquo;ve switched from and what you&rsquo;re switching to, there will always be valuable skills you can pull over.When you go to interview, consider these things and really highlight them during the process. If you do what I did, you can emphasise that as an Account Manager you learnt the value and importance of stakeholder management and relationship building. As a designer or developer this is an extremely valuable skill you might otherwise not learn until you hit a more senior level.So try not to see your past as a crutch but instead as a jet pack for your burgeoning new career.Send me an <a href="mailto:karl@kejk.tech?subject=Switching%20article">email</a> if you&rsquo;re interested to chat more about this, or if you want mentoring support you can find me on <a href="https://adplist.org/mentors/karl-koch">ADPList</a>.

Shift gears and switch careers

<h2>The hunt for better RegEx</h2>Since I&rsquo;ve been working with frontend code, RegEx (short for Regular Expression) has been a constant and confusing minefield. RegEx has been around since the early 50&rsquo;s, and with it comes a tonne of power but also a tonne of complexity.The trouble with RegEx is that it&rsquo;s wholly unreadable. So a bunch of different places have cropped up with ways to input expressions and have them <a class="inline-link" href="https://regex101.com/">decoded/validated quickly</a> and simply. This makes thing a lot easier if you know what you&rsquo;re doing, but it&rsquo;s still hard to make sense of it by default.Dan Eden wrote a great post on <a class="inline-link" href="https://www.daneden.me/2019/11/23/regex-for-designers-and-writers/">understanding RegEx</a> from a designer/UX writer perspective, which offers a great way to make better sense of the complexity, but it still requires a tonne of work to construct a good pattern that works.<h3>Clipping URLs</h3>I was working on a personal SwiftUI app project to pull all of my <a class="inline-link" href="https://www.kejk.tech/bookmarks">Cosmic bookmarks</a> into a native app so I could browse and enjoy them there, whilst also posting them publicly to my website.Originally I just had the title and snippet text for each, which was fine (you can see this mirrored on my <a class="inline-link" href="https://kejk.tech/">homepage</a>) but I wanted to enhance this for easy scanning and for searching (using iOS&#39;
native search bar) by including the source URL.The problem I had was clipping that URL. A lot of them came with a tonne of junk after the domain, which was mostly unnecessary, and all of them came with a prefix of <code>https://www.</code> or <code>https://</code> which was added noise. What I wanted to find was a RegEx pattern that would allow me to clip out that prefix and suffix info, so I&rsquo;d be left with a simple <code>kejk.tech</code> or <code>docs.cosmicjs.com</code> for example.Hunting StackExchange and the web in general gave me loads of expressions but nothing ever quite hit the mark for me. So I decided to try and craft my own expression and provide it below so you can borrow it for your project too.The great thing about RegEx is that it&rsquo;s platform agnostic. I use the same expression in SwiftUI as I do in JavaScript.I&rsquo;m pretty confident that this is more verbose than it needs to be, but, it works every time and cleans things up a treat. So, I present to you, the URL trimmer.<pre class=" language-regex"><code class=" language-javascript">const regex =</code><code class=" language-regex">/.*https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/|\/.*$/gm</code>;</pre>Here we look for any character in the URL string using&nbsp;<code>.</code> and then match that with unlimited searches through the URL string with <code>*</code>. After that, we basically have a bunch of OR matches using pipes:<code>https://www.</code> OR <code>http://www.</code> OR <code>https://</code> OR <code>http://</code>Then at the end we ask it to look for anything that appears after the first solo <code>/</code> by using a <code>.</code> to match any character, then <code>*</code> to perform this an unlimited number of times (again) and then terminate the search of the string with <code>$</code>.To close it all up, we use <code>g</code> to ensure this is a global search and doesn&rsquo;t stop once it makes its first match (just in case), and then use <code>m</code> to allow for multi-line searching and matching.And that&rsquo;s it. It&rsquo;s pretty verbose, but it works across all URLs I&rsquo;ve encountered and trims them up real nice. Below is how this appears when set up inside a React map. Here we create a new constant to fetch the URL from Cosmic and replace
any occurrence of the regular expression with an empty value.<pre class="language-jsx" tabindex="0"><code class="language-jsx"> &lt;div className=&quot;mt-4 grid grid-cols-1 gap-8 md:grid-cols-3&quot;&gt;
 {bookmarks.map((bookmark) =&gt; {
 const trimmedURL = bookmark.metadata.url.replace(regex, &quot;&quot;);
 return (
 &lt;a
 key={bookmark.id}
 href={`${bookmark.metadata.url}`}
 target=&quot;_blank&quot;
 rel=&quot;noreferrer&quot;
 &gt;
 &lt;BookmarkCard
 title={bookmark.title}
 subtitle={bookmark.metadata.snippet}
 date={bookmark.metadata.published}
 url={trimmedURL}
 /&gt;
             &lt;/a&gt;
 );
 })}
 &lt;/div&gt;;</code></pre>Hopefully for any of you who do frontend work and might need something like this, you&rsquo;ll be able to take advantage. For everyone else, sorry!

Strip your URLs to super simple domains

All good design processes start by understanding a business or customer problem and then working out the details until you get to a point of confidence through research to actually build the thing.The truth is, all good development processes start in the same way. You can&rsquo;t define and design an API without understanding the problem it aims to solve. &ldquo;Do we already have an API that can provide this if we extend it?&rdquo;, &ldquo;Should
we build a lightweight, and new, API to send these data?&rdquo;, &ldquo;Is this is even the right problem to solve?&rdquo; and so on.Whilst I don&rsquo;t work on constructing or crafting the APIs that I design customer solutions with, I do keep a tight eye on how we&rsquo;re designing the API so I can best understand how we might go about designing a frontend solution that takes advantage
of these data.<h3>Building a strong foundation</h3>When I first started working alongside development teams, I found that in most places I worked they operated in a bit of a silo. Design was seen as the paint on top of the technical solution, and whilst we might work closely with mobile engineers to ensure
what we designed got built correctly, we didn&rsquo;t really stay close to the backend engineers crafting the APIs.Over time I got super curious. We send data to our frontends via this mysterious thing call an API, what is that and how can I better understand it to know the impact it might have on my work?An API, or Application Programming Interface, is a mechanism by which you can send or receive information over a network to update or interact with an interface. There&rsquo;s lots of different methods you can utilise such as POSTing something (sending
it), GETting something (receiving it), DELETEing something (deleting it&hellip;) or PUT/PATCHing it (modifying it).As designers, we should care about what data is being sent around because it inherently defines what we might show to a customer or what controls they might be able to interact with.<h3>Making APIs tangible</h3>Let&rsquo;s say you have a form that you want to allow a customer to enter their name and email into. Understanding that this is an input that allows the customer to send data to a server to store this information is super handy. This means that submitting this form would send a <code>POST</code> request via the API to your server to append these data to the database.<pre class=" language-json"><code class=" language-json">[ </code>
<code class=" language-json"> { </code>
<code class=" language-json"> &quot;name&quot;: &quot;Will Smith&quot;,</code>
<code class=" language-json"> &quot;email&quot;: &quot;will@freshprince.com&quot;,</code>
<code class=" language-json">  &quot;weapon&quot;: &quot;slap&quot;</code>
<code class=" language-json"> }</code>
<code class=" language-json">]</code></pre>But lets say you decide after the API is built and the success criteria are defined, that you now want a customer to be able to add their phone number. In this case, firstly the API isn&rsquo;t built to handle a number or to send that particular request,
so now the backend team will have to modify the API (and also importantly, the database) to understand that a number can also be sent.Sounds easy right? But imagine if you&rsquo;re making lots of these tiny changes, things like splitting name into <code>firstName</code> and <code>lastName</code>. In most companies, the backend work will start before the build phase begins. This means
that any change has a risk of derailing the approach that was originally conceived by the backend team.You hopefully already had some thoughts, sketched some ideas and started to ideate, but not finished with your design yet by the point you raise these changes. This is good, you&rsquo;re working in an agile team, but you&rsquo;re also at a point of increasing
project scope and increasing the project risk.<h3>De-risking design and APIs</h3>One exercise I like to do to prevent as much of this risk as possible is to design API-first. By designing the API in tandem with the backend engineers, you de-risk future problems. You can eek out the edge cases and plan for possible future adaptability together.<blockquote>&ldquo;If I decided to add in the need for a mobile number to be sent too, would that be a lot of extra risk? This idea is still being considered but isn&rsquo;t final&rdquo;</blockquote>A great way to do this is to build out your foundation together via early stage workshops. Recently I&rsquo;ve introduced the practice of including a representative across each of our respective teams at the very start of the design process, when we&rsquo;re
discovering the problem to solve. This means we have Design, Product, Mobile, CloudApps (backend) and QA in the room (sometimes also customer support or ops depending on the project).Including these teams early means we define edge cases from the outside and design a flexible API and design solution that works for all teams across build, testing and production.We&rsquo;ve started workshopping all of this work inside of <a href="https://www.figma.com/figjam/">FigJam</a> and it&rsquo;s been game-changing.Last year, FigJam introduced the ability to include code blocks in your diagramming experience. This opened FigJam up to being super useful for engineering teams who are writing particular code and want to connect the dots. I noticed a few team members
were using it to connect their APIs to mobile code which helped them to better visualise how the data would pass down and be rendered.<figure><img src="https://imgix.cosmicjs.com/59bfb450-0a84-11ed-b7be-d956591ad437-CleanShot-2022-07-23-at-13.36.432x.png" alt="An image of a FigJam canvas with API documentation pointing to different Wireframes to show where the data is passed to in each case" class="fr-fic fr-dii"><figcaption>An image of a FigJam canvas with API documentation pointing to different Wireframes to show where the data is passed to in each case</figcaption></figure> I decided that it made sense to me, as a designer, to include this type of thinking into my flows too. So I started to get the teams to share their API docs with me so that I could include them as flow starting points for certain wireframe screens. Now,
the connection between what data we expect, when we expect to receive it, and how it changes the view was all in one place.When QA then came to test the edge cases, they knew when we&rsquo;d expect to have received (or sent) data to or from the API, and in turn how that would impact the user interface. All teams would be on the same page, from the start to the end.<h3>How this is impacting our shipping process</h3>Since taking this approach, we&rsquo;ve seen several cases where the time to delivery has been significantly reduced, that the edge cases we find aren&rsquo;t show stoppers because we knew what to expect from the start, and that our teams could all be
aligned from the outset.Our end-to-end QA process is significantly improved because the data they test with in Postman is aligned to the docs and flows we have in FigJam, and there&rsquo;s very little left to ambiguity.This is still the exception and not the rule, we&rsquo;ve been trialling it in our team because my knowledge of code allows me to suggest and test these approaches whilst understating what the APIs mean and why it&rsquo;s useful. Onboarding other designers
and teams to this idea will likely be challenging because the value isn&rsquo;t immediately obvious, and the lack of technical understanding will be a limitation.But, this is something I see as a great opportunity for teaching. I&rsquo;ve been putting more and more energy into teaching my team how to understand the raw basics of coding, focusing initially on basic JavaScript as part of Figma plugin development,
but slowly moving into understanding how data passes between platforms and why this matters to their day-to-day.

Designing API-first

<h3>A free minimal wallpaper of Ram&#39;s ten principles.&nbsp;</h3>I&#39;ve long been a huge fan of Dieter Rams and his extensive portfolio of work at Braun and Vits&oelig;.When I heard that Gary Hustwit was looking for funding to film a movie about Rams&#39; career, I couldn&#39;t resist backing it on <a href="https://www.kickstarter.com/projects/1019019367/rams-the-first-feature-documentary-about-dieter-ra" target="_blank">Kickstarter.</a>One of the perks was to get a letterpress of the ten principles on card. This was set in a beautiful font close to <a href="http://atipofoundry.com/fonts/archia" rel="noreferrer" target="_blank">Archia</a> by Atipo (I believe it might be <a href="https://fonts.google.com/specimen/Space+Mono?query=space+m" rel="noreferrer" target="_blank">Space Mono</a> by Colophon) that I wanted to reimagine for the digital screen as a reminder of the principles. This allowed me to have a constant reminder to ensure my designs are always refined and focus on delivering maximum value in a minimal form.&nbsp;I&#39;ve made this wallpaper available to download in three sizes for mobile, tablet and desktop. You can grab them below. In my version, I&#39;ve set this in Archia.<a href="https://res.cloudinary.com/kejk/image/upload/v1590345853/Desktop_bwwsio.png" target="_blank"><img src="https://res.cloudinary.com/kejk/image/upload/v1590345853/Desktop_bwwsio.png" class="rounded-xl fr-fic fr-dii" style="max-width: 900px; width: 100%;"></a><div class="flex flex-row justify-center"><a href="https://res.cloudinary.com/kejk/raw/upload/v1590345921/Rams_Ten_Principles_Wallpapers_god3jk.zip">Download all</a></div>

Ten Principles for Good Design

A free minimal wallpaper of Ram's ten principles.