In my undergraduate program at WKU, I used only Adobe products. We learned mostly how to use Photoshop, Illustrator, Flash, Dreamweaver etc. These are all super awesome - for graphic designers. However, since I moved to the San Francisco Bay Area in 2013, I’ve taken an interest in ui/ux design. Adobe prior to launching XD back in 2015, was not the ideal tool to use for interface design for many reasons. While working at my first startup “Kifi”, I was recommended to learn Sketch. This was the beginning of my transition out of Adobe. I fell in love with the tool right away - the ease of use, simplicity and specificity towards digital design caught my eye.
Learning, testing and iterating is the key to success while designing digital products. Speed and efficiency are your primary assets. How can we test and constantly be improving? By finding the right tool for the job. Adobe felt like a chainsaw when all I needed was a sharp chef knife.
Goodbye Adobe
While I loved and still love Adobe products, I completely switched over to sketch exclusively. I’ve used Sketch exclusively for about 4years to do all of my ui/ux work, with both freelance clients and full time work at companies in the Bay Area. Sketch has treated me very well and has elevated my game time and time again with their constant improvements. One of the main things to point out about Sketch is the large library of plugins that are available, sketch resources, and community support. Having a community around a tool is key to ensure constant evolution. I’ve been using Sketch to do all of my wireframes, presentation assets, high fidelity designs and prototypes (it has it all right?). Wrong. One key part of being a designer is to fail quickly and often to get to the best solution possible. One of the major flaws with Sketch is the fact that it provides little to no transparency for the client. For example, If an engineer is working on an app or website, they can publish a test environment and share it with the client so that the client can see progress being made. With Sketch, it requires you to export the art board and use an external tool like inVision to show your work. This way, the client can review progress made, comment their feedback and share with their team for further evaluation. Let’s admit it, after a while it can get old exporting files and sharing links. Am I right? 1st world problems…
Building trust with your client is key. Having a process that fosters this notion from beginning to end will surely help you get continued business from that client and maybe a referral. The nice thing about it is that successful people also have successful friends.
Hello Figma
Oh Figma, you beautiful tool you. I have to admit, I was not interested in Figma in 2017 when I first heard about it. After trying it for the first time, it became clear that the tool had potential to be dangerous to the Sketch market audience. I dropped it and went back to Sketch because like most tools, apps and digital product that come out, they require more functionality to make them a viable option and Sketch was working well for me. Here’s the thing, I’ve tried Framer, Adobe XD, InVision Studio, Webflow and most recently Phase. They are all amazing tools in their own ways, yet none of them come close to the same level of transparency that Figma does. The first thing that came to mind the first time I tried Figma was, “How cool, Sketch meets Google docs”. Today, I only use Figma for my freelance work because of all of the improvements that the team has done since early 2017. There is one major caveat with adopting Figma as your main tool. Security. I’ve been trying to get Figma accepted at Google, but since it’s a web / cloud based app, security is a huge issue. At Google, I primarily use Sketch for all of my ui/ux work.
How Figma helped me close the deal on a project
I explained my process to the client and they loved it. The thing that stood out most to the client is the fact that they would be able to click on a link and see all of my progress at any time of the day. I imagine that this level of transparency is not necessary in most cases, but I like the fact that I was able to manage expectations throughout the entire project lifetime.
Guesses make messes. Establish a design process that works best for you and your client. Not just you.
I was able to paint an end to end picture that made sense to my client - this is how I was able to close the deal. One thing to point out is that the tool you use to design is simply an instrument to help you tell the story. I tell all of my freelance clients that this is a journey that we will be going on together. While my role is to be the person to deliver an artifact at the end of our engagement, I feel that it’s imperative to bring the client along for the ride. Part of this is to help educate them on the design process so that moving forward they can trust me as a design consultant/partner. I call this, “building believability”. There are two ways to measure believability. One, what have you done in the past that proves you know what you are doing/talking about? Two, how do you sell yourself as a professional to your client moving forward? Below is the step by step process that I used to establish believability with my client using Figma:
Understand the problem space
Interview the client to make sure that we have the same mental model prior to me starting any work on the project. I also look at this step as the knowledge dump that is necessary before any fruitful engagement. If you are doing this now with a client and feel completely overwhelmed by it all, know that it’s okay since this is the point. You are the expert designer and they are the expert in their domain. For example, for this project I had to learn a ton about the political system in the US (I knew little to nothing about this before this project). Now, I know that I can have an intelligent conversation with a politician and understand at a high level what they do and care about on a day to day basis. Look at this step as an opportunity to learn about a domain.
Sitemap - information architecture
Once you understand the project a bit more, it’s time to put the information into buckets. From an engineering perspective, this would be the process of identifying the different objects, id, classes, fields etc. From a design perspective, it’s basically tagging information so that you can make sense of what information will go where. In this case, I was trying to identify the pages and content blocks that would go within each page. This is extremely important because it has nothing to do with aesthetics. One major benefit of using Figma for site maps and information architecture is the fact that you can collaborate with your client in real time while working remotely. I was able to get the ball rolling and the client was kind enough to make edits & move elements around when needed. Can you do that with any other design tool? No. There is this misconception that the genius designer will go to a room and come back in two months with this amazingly designed experience. This is not true. At it’s core, design is collaborative and iterative. Being able to collaborate with your client will greatly improve your relationship with them and foster trust quicker.
Low fidelity designs and user flows
After identifying the sitemap and information architecture, I was able to begin working on the user flows and the low fidelity mock ups to give the designs life. During this phase, we were able to really focus on the information architecture and how a user would navigate through the site. This was not a typical website, we were designing and building a dynamic website that would have content writers updating and editing posts, articles and pages on the site on an ongoing basis. The low fidelity phase allowed my client and all of the content editors to get an insight on how the dynamic content would effect other pages on the site.
High fidelity designs
This by far is my favorite part of any project. I am traditionally trained as a graphic design, hence why the visual design part of any project is my favorite. This is where I get to explore colors, drop shadows, typography, images and micro interactions. While this part of the job is a bit more mechanical, it is not to be taken lightly. There have been many studies that show how important it is to have a beautiful looking user interface. While usability is arguably more important, it is not enough. As a visual designer you have the perfect opportunity to delight the user which is what companies like Apple, Airbnb, Google etc. are so great at doing. I would consider this to be the, “going above and beyond” metric that done well, will surely gain more market attention.
Implementation in Webflow
A static design can only take you so far. Once the ux and visual design is complete, the next step is to actually build this thing in html, css and javascript. Luckily for me, I’ve learned about a tool called Webflow. Mind you, I’ve spent over 8k to teach myself how to code the front end of website and web apps from scratch. Webflow essentially gives designers the power of a front-end engineer. Webflow is my go to tool to build all of my designs for client & personal projects. In fact, this client reached out to me through the Webflow experts program. I’ve been on the Webflow experts program for nearly one year now and have loved the way that it’s been able to scale my freelance business. Here’s the breakdown of my work - I use Figma to do the ui / ux work and build out the front end of my designs in Webflow. Think about it, I mean really think about it. These two tools alone allow me to operate as a three man show. Feel free to reach out to me if you’re interested in learning more about Webflow :)
This project is now live. Feel free to check it out on this link
Wilian Iralzabal
Portfolio website: wilian.webflow.io
Twitter: account / profile
Instagram: account / profile
