Instead of focusing on the differences between the roles and how that might cause friction, she will approach the subject with a problem-solving attitude, and expand on how to make the relationship work.

And she should know.

Magdalena Ostoja-Chyżyńska is a former frontend developer with 10 years experience in design. During her career she has worked with over 70 developers and enjoyed every second of it.

If you are struggling to get on the same page as a Designer friend, here are some tips she will cover:

How to Set-up Your Desks

The desk set up is pretty powerful. Where the Designer sits in relationship to you is imperative for good and strong communication.

Magdalena suggests sitting in a triangulated format, with the Product Owner being the third piece of the puzzle. This way, any dialogue that is shared can be picked up by all parties at all times.

Another suggestion is to form an L shape, where the Analyst is an information broker between the Designer and Developer, keeping both separate from each other and solving any issues that may arise. This formation is very popular in the banking or finance industries.

'The Bridge' is the third set-up. This set-up works for smaller scale startups where the dev team is not so large. It essentially has the Product Owner as the information broker, whilst perhaps taking on some of the traditional roles an Analyst may have. Again, in this situation, the Developer and Designer have limited contact with each other.

Each set-up is powerful, but very unique to your team. Make sure to watch the video to see which is right for you.

How to Manage Access Between Designers and Developers

Even if it's in a limited capacity, Magdalena recommends encouraging developers and designers to have a direct form of access to each other. If you hear any of the following, this is a major red flag.

"You don't need to speak to the designers/developers, you can speak to me."

"Just focus on your code."

You should always encourage open communication on any team, as gatekeeping can cause toxic workplaces for all involved. If you are in a situation where this is happening, Magdalena suggests taking on the responsibility to fix this.

How to Handle Developer-Designer Meetings

An exemplary developer-designer meeting is a presentation consisting of showing visuals and storytelling.

Designers should not only show what they have designed, but also explain why. By explaining why, the Developer can understand the decisions the designer made in the design process, and buy into the final idea with the same amount of conviction.

Respect Between Developers and Designers

Both designer and developer need to respect each other's work. This means that the designer does the design work, and the developer does the development work, not the other way around. This might sound obvious, but the opposite happens more often than you think!

To learn more and dive into each section in more detail, make sure to watch the talk from Magdalena right here:

This article was written by Ania Kubow in support of the conference talk made by Magdalena Ostoja-Chyżyńska.

Code with Ania Kubów

Hello everyone. This channel is run by Ania Kubow. In this channel, I will be teaching you JavaScript,React, HTML, CSS, React-native, Node.js and so much more! A little bit about me:My background is in the financial markets, where I worked as a derivates broker our of University. After starting m…

YouTube

I wanted to test my limits as a young designer by improving the user experience of Clubhouse, the hottest new audio conversation app on the social media scene.

After speaking with both power users and novices on the app, I uncovered some specific pain points with wayfinding and discoverability in the app. These became the primary design challenges that guided my work throughout this project.

Onboarding Mockups

Disclaimer: I do not work for Clubhouse, and the views in this case study are strictly my own.

As a budding designer, I acknowledge that my vision for this project may be overly ambitious and at times reliant on assumptions of business goals and user data.

In a perfect world, I’d be working alongside the Clubhouse team with direct access to these resources to guide my work. Until then, this case study is meant to be an exploratory learning experience on a product I deeply admire.

The Brief

It’s difficult to understate the excitement around Clubhouse, the audio chat app where members can move around virtual rooms discussing topics ranging from culture to politics.

The app raised its first $100 million with only 1,500 users a month after its beta release. And at the time of this writing, Silicon Valley’s buzziest app has just been valued at $1 billion dollars, a mere 9 months after taking off and before even launching to the public.

Beyond its success with investors, Clubhouse has amassed a fiercely loyal user base, whose creativity has spanned from a 24-hour continuous room dedicated to new user onboarding to a live production of The Lion King.

As an early beta user on the invite-only platform, I had the unique perspective of following the product’s updates (and exponential success) in real-time. And I sought to challenge myself with my most ambitious project yet: redesigning Silicon Valley’s most exciting app in recent memory. No pressure.

The high-level goals of this project were:

• Improving discoverability within Clubhouse, allowing users to more easily find new rooms, people, and clubs to engage with
• Creating a more seamless Hallway experience, where users can filter and find the most relevant rooms to them

UX Challenges: Simplifying a complex information hierarchy

One of the main considerations I had to take into account was the hierarchy of the main components users can interact with inside the app:

• People (other users of the app)
• Rooms (a virtual meeting place for audio conversations), and
• Clubs (interest-based groups that rooms can be hosted under).

Beyond this, I had to consider how each of these components were connected, both interpersonally and through time.

Currently, a Clubhouse user’s Hallway (home screen) shows live rooms connected to the people and clubs they follow (which I’ll refer to throughout this case study as “in-network”). This makes it difficult for users to easily keep track of upcoming rooms in their network, as well as join new, out-of-network rooms.

This became a major dichotomy throughout my work: I needed to find a balance between making each of these individual parts of Clubhouse easily discoverable while maintaining – and simplifying – the web that weaves them together.

Discovery task flow

Mind map of the relationship between Clubhouse components

Research + Planning: A UX Researcher’s Dream

Another unique aspect of this project was the direct access beta users have to the Clubhouse founders, Paul Davison and Rohan Seth. Every Sunday, the pair host Clubhouse Townhall, an open forum where they share the week’s latest product updates, their upcoming roadmap, business goals, and top priorities, as well as holding space for user-submitted Q&As.

And thanks to Clubhouse’s enthusiastic user base, the official Townhalls are regularly followed by Townhall recap rooms (shoutout to Community Club), where power users would deep dive into the week’s updates and what features they’re most excited for.

Between Clubhouse Townhalls, recap rooms, and both official and community-run new member onboarding rooms (including FAQs, Q&As, and discussions), I spent on average 5 hours a week for 6 weeks gaining as many business insights and goals as I possibly could from my limited vantage point.

A compilation of some of the rooms that became a regular part of my UX Research

From these discussions, the overarching goals of the Clubhouse team are:

• Making Clubhouse accessible for everyone: Paul always made it clear that the team’s top priority was to scale Clubhouse as quickly as possible while not sacrificing quality
• Putting creators first: another point Paul never understated was the team’s prioritization of the platform’s creators, building tools that would allow for creator monetization
• Improving discoverability and suggested content: at the time of this project, Clubhouse was actively building out their topics directory and algorithms that would make finding relevant rooms progressively easier

Early sketches of how different screens might behave

User Interviews, from power users to newbies

I spoke with Clubhouse users — both power users and more casual community members — to uncover friction points they currently had with the app’s discovery experience. These interviews showed gave me the following insights:

• Keep it lightweight: most users preferred room discovery to be a spontaneous experience, not necessarily wanting to schedule upcoming rooms in their personal calendars
• Cluttered Hallway: most users were confused by how the hallway was currently curated, and who of the people they followed were in any given room present
• Hallway as a source of discovery: despite the cluttered hallway experience, most users still relied on the hallway to find new rooms, despite there being an existing (but not yet robust) “Explore” tab
• Friends first: when deciding which rooms to join in the hallway, users unanimously wanted to see which of their friends were in any given room

Affinity map of my user interviews (made using Evolve)

So how might we make the Hallway a clear and concise place for spontaneous interaction, while facilitating lightweight out-of-network discovery?

UX Solution: Streamlining the Discovery-to-Hallway pipeline

I developed a simple yet powerful UI that makes wayfinding within your hallway and rooms easier. It also makes bringing rooms found through the discover page into your hallway a breeze.

In order for this solution to feel cohesive and not siloed, I needed to implement a near-full redesign of Clubhouse, broken up into 5 main experiences.

Play with the final prototype here.

Early Wireframes

Experience 1: The Hallway

The Clubhouse Hallway currently (left), and reoptimized for more functionalities and access to controls (right)

Users wanted their hallway experience to feel more intentional and within their control. To achieve this, I established a top-level hierarchy of:

• ongoing vs. upcoming, to allow users to not only see active rooms but get a quick overview of scheduled rooms within their network
• filters by topics of interest, selected by the user during onboarding, and
• sort rooms in your hallway by people vs clubs you follow

An additional UI decision was to only present people you follow within the rooms in your hallway. This would alleviate the current issue of ambiguity surrounding the names users currently see in the room cards in their hallways.

Navigating the reimagined Hallway

Experience 2: Room preview

Room preview in action, where users can see a full list of which friends are inside any given room

Currently in Clubhouse, clicking on a room in a hallway immediately drops you into that room’s conversation.

Since identifying friends in any given room was a high decision factor for users joining a room, I wanted to design a way for users to see whom they know inside before committing to join.

Experience 3: Discovery

Clubhouse’s Explore tab currently (left), and redesigned as an immersive discovery experience (right)

Currently, discovery in Clubhouse is siphoned: users go to the Explore tab to discover people and clubs by categories and keywords, and they go to the calendar tab to discover both active and upcoming rooms across all of Clubhouse.

Bringing a room to your hallway via Clubhouse’s Calendar tab currently (left), and reimagined as a simple bottom sheet function (right)

Most participants actually didn’t use these tabs to achieve their primary goal of discovery. Instead, they adopted workarounds such as discovering clubs through user profiles, discovering people through rooms, and discovering rooms primarily through their hallway, limiting the scope of content they were being exposed to.

An immersive discovery experience with rich filter and sort options

While I designed UI solutions to make these workarounds more seamless, I wanted the discover page to be the go-to destination to accommodate for all these use cases, allowing users to search for people, clubs, and rooms by Clubhouse’s growing topics directory, in addition to keywords.

I also integrated an additional sort functionality to further facilitate discovery.

Sending an out-of-network room to your Hallway

Users also wanted an easy, lightweight solution to discover and access out-of-network rooms.

The ability to send a room from the discover feed to your hallway without committing to following that room’s moderators, corresponding club, or scheduling in your personal calendar was the biggest challenge of this project, involving many iterations in order to feel intuitive.

Experience 4: Active Users

Clubhouse “Available to Chat” flyout currently (left), and reimagined as an “Online Now” tab (right)

A close cousin to the hallway, your active users screen is where all your Clubhouse people and clubs that are currently online live. 83% of users interviewed mentioned scanning this screen to quickly identify what rooms their friends were in.

I added a much-requested search bar to further facilitate friend-finding, as well as a sort drop-down menu to reach an even more important distinction: who’s actively participating in a room vs. just listening in.

Discovering active users by different sort options

Experience 5: User and Club Profiles

Clubhouse User Profiles currently (left), and after consolidating clubs as one metric (right)

87% of users discover suitable clubs to follow via user profiles directly. There exists a further hierarchy within clubs: followers (who receive notifications and see club-branded rooms in their hallway), and members (who, in addition to the above, can also start club-branded rooms themselves).

In Clubhouse’s current design, the clubs a user follows vs. clubs a user is a member of are in disparate locations: in the user’s following list and at the bottom of their user profile, respectively. This was confusing to users wanting scan all the clubs associated with a particular person.

Navigating both User and Club Profiles

By making clubs associated with a user a consolidated metric, users visiting that profile can more easily see what clubs that person belongs to, and immediately follow without visiting a new screen.

On the club level, being able to access metadata such as previously held rooms, upcoming rooms, and club admins can help a user get a more effective overview of the club.

UI & Branding: A Case for Dark UI

In bringing all the pieces of this experience together, it became clear that adding too many visual elements would disrupt the visual hierarchy needed to move through the app with ease.

Additionally, the typical user experience on Clubhouse is already so immersive and emotive, often spanning all hours of the night — I wanted to take advantage of this use case and implement an elegant UI that emphasized Clubhouse’s few content types harmoniously.

A snippet of the Style Guide that guided my work

Usability Testing: How effectively is findability and discoverability throughout the app?

After conducting my usability tests, I created an affinity map with insights, behaviors, and findings during the tests.

Most users moved through the app with little to no missteps, but for many participants, there was one main point of friction that disrupted a key pillar of this redesign:

It was still unclear how to access a room you saved from the Discovery page to your Hallway.

Usability Testing Insights & Priority Changes

Initially, I designed for upcoming out-of-network rooms found in the discover tab to appear in the hallway by the user starring the room. These would then appear in your hallway algorithmically, further discoverable via the “sort by” drop-down menu. There were a few problems with this:

• The original design essentially treated these rooms as saved items, which inadvertently (and incorrectly) prioritized these rooms over other rooms found in your hallway
• This treatment could have greater implications of disincentivizing spontaneous room creation, or unfairly prioritizing out-of-network rooms in general
• Beyond this, embedding a saved item in a sort drop-down wasn’t intuitive or an expected place to find this type of content

Setting notifications on the room, club, and user level

Conclusion: Lessons learned & where we go from here

Going into this project, I knew this would be an ambitious challenge for a young designer. What I didn’t know was just how intricate and all-encompassing that challenge would be.

I learned that working on a highly publicized and highly beloved product comes with a lot of external pressure and internal emotions to do right by (seemingly) everyone.

There are the power users with fierce attachment to existing structures, and new users who can’t fully experience the nuance of an audio app as a static prototype.

Then there's the small but mighty Clubhouse team, who are actively iterating their product on a weekly basis, potentially launching imaginative solutions themselves for the same challenges I’m working on. And even others I haven’t imagined yet.

Against a constant stream of public conversation over an exciting product that felt almost ethereal, I’ll humbly admit that there were times where this pressure got the best of me and I felt like a total imposter who bit off way more than she could ever chew.

The biggest lessons this project taught me were the delicate balance between perseverance when faced with complex challenges, grace in the wake of perceived failure, and when to be okay with “good enough” (for this iteration, of course).

In the end, I’m extremely proud of what I was able to accomplish with this project at this stage in my design journey. And I often reminded myself of my favorite mantra that led me to product design in the first place:

“All I wanted was a job like a book so good I’d be finishing it for the rest of my life.”

Product design is that job for me, and I’m proud to say that while this project (and all my others) will never be fully finished, I breathed as much life into it as I could — I hope you enjoyed it!

In this article, I'll share my experience and the lessons I learned attending (and winning) my first hackathon (spoiler alert: you're not actually hacking anything...😁).

One of the reasons I love the world of design so much is that its constant evolution requires you to maintain a growth mindset. You always have to be eager to upskill or explore a new craft. And as someone who finds great fulfillment in a meaningful challenge, this works especially well for me.

And so I put it to the test: I humbly signed up for my first hackathon, only moderately aware of what such an event entails. I was even less certain of what valuable contributions I could bring to the table as a (very) Junior UX Designer. Challenge accepted.

The first hurdle was finding a hackathon to participate in in the first place. I was overwhelmed by the number of choices out there, and found that a majority of hackathons were for students-only. This left university graduates and current bootcamp students like myself in a gray area.

Nonetheless, I set my sights on the more inclusive and social cause-driven events I could find, and reached out to the organizers to confirm my eligibility after applying.

A few exchanges later, I was accepted into DubHacks, the largest 24-hour hackathon in the Pacific Northwest.

After putting my imposter syndrome aside, forming a team, and getting through an exhaustive 24 hours, my team’s project went on to win the Best Use for Social Good category. Here are some things I learned from the experience.

via GIPHY

Why Every Hackathon Team Needs a Designer

I’m pleased to report that what you’ve heard many times over in design school or in tutorials is true: not everyone thinks like a designer.

My team consisted of brilliant developers who were able to quickly deduce how to use their knowledge to build a software tool, but were less well-versed on how to build a viable product.

A good designer knows that a product is not merely the sum of its parts, but is a coherent and cohesive experience — this is exactly the unique perspective a designer brings to the table at a hackathon.

As a designer on the team, it’s your job to look beyond what you're building on a mechanical level, and constantly direct the team towards the greater, more human level of what you’re creating.

Yes, the framework and the tech stack are vital, but what good is the greatest technology if it’s unusable (or unclear) to the people who need it most?

Whenever our product’s positioning started to feel too broad or unfocused, I’d do my best to reign it in, reminding the team who we were building for, what our primary use cases were, and what problem we were trying to solve.

What the Designer Does on a Hackathon Team

If you’re a designer who wants to participate in a hackathon and you aren’t sure what deliverables or actionable steps you should take throughout the process (like I was), here’s an overview of what my involvement looked like.

Landscape Analysis

This is a crucial aspect of your hackathon project that shouldn’t be overlooked. Your project will not only be judged by its execution, but also its viability — what problem is it solving? Which users does it help? How do you know this?

This is a great chance to tap into your Design Thinking process and get to the root of the problem you’re building a solution for.

For me, this involved doing extensive research into the issues surrounding our chosen problem area, as well as the existing tools in the market that aim to solve similar (or different) issues.

I also snuck in some user research by reaching out to relevant acquaintances for short, informal user interviews to gain a better idea of their experience and pain points in this area.

This was an invaluable step in our process. When it came time to present our project, we not only had a minimum viable product to showcase, but the research to validate the need for our product in the first place.

I took a deep dive into the world of web inequity for those with vision impairments and limited broadband

Task Flows and Sketches

Due to the rushed and scrappy nature of hackathons, your finished project will not be fully fleshed out. This means it’s important to at least include the most essential features.

Creating your product’s primary task flow(s) helps the developers jump right into working on the most important functions first. This is especially helpful if your team ends up not being able to complete the development of your other task flows by the submission deadline.

Rough sketches of what the interface will look like help developers contextualize what they’re building from the start and provide important constraints, however loose.

These were the first deliverables I sent to my team when the hackathon began. I explained to them the main task(s) we should aim to develop, and walked through my sketches of the interface, making note of the most important components on each screen (mainly our CTAs).

The basic task flows that our product would need to include

Wireframes and MockUps

Wireframes take your rough sketches one step further and give your developers even more important constraints to work with. Using tools like Figma or Zepplin to share your designs with your developers makes the best use of your time, as they can inspect and use the corresponding code.

Adding high fidelity mockups in your presentation helps showcase your work and make it feel more real/functional than your MVP, which will most likely look like your low-fidelity wireframes.

My team didn’t officially start coding the front-end of our product until I sent them low-fidelity wireframes. After I shared the designs for the main interfaces, I spent a lot of time designing multiple screens and high-fidelity wireframes that we never would have had time to develop.

Instead, I’d recommend focusing on the main interface(s) your devs will be building, and then flesh out a high-fidelity version for the purposes of your mockup and presentation.

To showcase the design in our presentation, I placed a PNG mockup of our product’s landing page in a device (using a Figma Community file template), as well as an additional short promo video I made using Rotato.

My low-fi wireframes, most of which did not see the light of day outside my Figma file

Project Management and Presentation

As a designer, you have a holistic perspective on what your team is trying to build beyond the code. Coupled with the landscape research you conducted, this lends perfectly to taking the lead on building your team’s final presentation.

Your presentation is the “big sell” of your project — without it, your product has no context, and can’t be judged by the panel. Your presentation doesn’t need to be immaculately designed in and of itself, but should include a few key points, such as:

• An introduction to your hack and team members
• The problem you’re trying to solve
• Your user base and business use cases, and how your product solves for these problems
• Tech stack and product features
• Long term impact of your product
• Difficulties and complications you encountered, and what you learned along the way

I built our presentation in Canva, which allows for easy collaboration and embedded media.

Designers have the unique advantage of not being pigeon-holed into one sole workflow during hackathons, which allows you to move your team along if/when they’re getting lost in code.

This establishes important time limits and constraints, and helps make sure you distribute your time and tasks efficiently.

Throughout the 24-hour event, I reminded my team of our upcoming deadlines: what time we should have our MVP finalized, when we would start practicing our presentation, and our submission deadline. I left sufficient buffer room for each in case anything went wrong or got delayed (which, in the world of hackathons, is a near guarantee).

via GIPHY

Where Empathy Meets Strategy

Our project idea was born out of my passion for making the web more accessible for people with disabilities and limited access to the internet.

I strongly believe design (and tech) is a tool with which we can dismantle exclusionary systems in favor for more inclusive ones. And this commitment to serving underrepresented groups fueled our work throughout the event.

I was lucky to be on a team with a member who already had some hackathon experience which allowed us to streamline our process. But looking back, there were other clear steps we took which contributed to our win in the Best Use for Social Good category.

Here’s my short list of tips to keep in mind to conquer your first (or any) hackathon experience as a designer:

1. Start Early

I don’t mean that you should begin any actual hacking earlier than the event start time, of course. But I do suggest getting to know your team, synthesizing some project ideas, and coming up with an action plan before the hackathon actually begins.

Our team hopped on a Google Doc one week before the hackathon to list out each of our core skills and propose 2 project ideas for us to later vote on.

Before the hackathon even started, we already had a good idea of who our team members were, what we were good at, and what we’d be building in the 24 hour timeframe.

2. Do your research

I can't overstate the importance of research in your process. It not only helps you reach your problem statement and validate the world's need for your project, but also serves as a reminder during the more daunting hours of the event what impact you’re hoping to make.

In moments of insecurity, I’d look back at the research I’d done in this problem space, remind myself of the quantifiable need for a solution, and use that as fuel to keep pushing.

3. Be Agile

I learned pretty quickly that, perhaps unsurprisingly, building a minimum viable product from scratch in a short amount of time gets messy. Not everything you set out to build in the beginning of the hackathon will make it into the final design, and that’s okay.

This is a great environment to be scrappy, fail fast, iterate, and streamline your workflow as much as possible.

4. Communicate clearly and frequently

Our team communicated mainly via Facebook Messenger, where the developers could quickly troubleshoot and bounce ideas off each other.

I used that communication channel to keep the team updated on what I was working on, make some UI notes, ask if anyone needed me for anything.

I also used it to remind the team of what I needed from them, be it some tech copy to put into our presentation or a reminder of the hour deadline we agreed to start reviewing our project by.

5. Be passionate

The cliche is not lost on me, either, but it’s true. Even your dream design job may come with some projects you’re not super excited about.

Hackathons, on the other hand, provide the unique opportunity to build something you exclusively excited about, under no obligation other than your own will.

Whether it's a social cause or a creative technology, finding a project you’re deeply passionate about will help guide, sustain, and validate your work from beginning to end.

via GIPHY

TL;DR: Get out there and be great

I hope this guide serves both as a framework for the seasoned designer to help structure your workflow during a hackathon, and as inspiration for the young designer to participate in the crazy, chaotic, thrilling, and rewarding world of hackathons head-on.

Had I let my fear and intimidation get the best of me, I would have missed out on a tremendous learning opportunity. Beyond design deliverables, my first hackathon experience allowed me to practice my communication skills, work closely with developers and find a common language between us to help progress our work, and become comfortable working under tight timelines and constraints.

These are all skills that are invaluable to a designer on any level, but they're especially insightful for a junior in the field who may not yet have ample opportunities to learn by doing.

So I encourage any and every designer reading this to be brave and be great — I’ll be cheering you on.

I have built and designed apps and websites, and helped scale products at companies small and large, from my own startups all the way up in size to Google.

I have learned about digital design best practices through a mix of trial and error, development cycles, successful launches, product failures, user feedback, and the inevitable iterations that have followed.

I want to pass along what I have learned.

My experiences can hopefully enable you to better understand how digital design works and the role of the designer in conceptualizing products.

Through these lessons you will be able to bring products to market in a more timely and efficient manner and better serve your users.

What is Digital Design and Why Does It Matter?

The formal definition of digital product design is an iterative design method employed with a formal approach to solve a practical problem. Sounds somewhat complicated, right?

It doesn’t need to be.

Using simpler language, a digital product designer discovers a current problem, proposes the best solution possible using a mix of technologies, and introduces it to a market.

Digital design is considered a subset of product design because digital design is all about the building of products - but via software.

The skills you are learning and developing on freeCodeCamp will help you think strategically and technologically about how to solve problems. This is closely tied to the practice of digital design.

In order to implement digital designs you will need to identify opportunities and know the desires of your consumers.

Digital Design and The Real World

Digital design focuses on users.

Customer obsession starts with the user and works backwards.

If you are new to digital design there are a few tactical steps you can take to learn what customers value and how you can leverage a mix of UI, UX, and design thinking to solve tangible problems.

What problem are you solving?

Firstly, work vigorously to earn and keep customer trust by understanding what your product and design are meant to solve. Answer the following questions: why does this product exist? How will it be used?

Digital design done well can have a profound impact on users.

Bringing together intuitive user experiences and simple user interfaces can help your customer best understand how your product works.

A friend of mine worked to help build the iPad reading experience. One story he shared with me is how digital designers made it effortless to “turn the pages” of digital books.

The action of swiping a page, much like moving paper in a real book, evidences how design, UX, and UI efforts can come together to create delightful user experiences.

The next time you swipe a page on your iPad, think about why the experience feels entirely natural and simple. Digital design, done well, is magical.

Innovate and simplify

Secondly, digital designers expect and require innovation and invention and always find ways to simplify. As with your focus on customers, you need to be externally aware, look for new ideas from everywhere, and cannot be limited by a “not invented here” mindset.

When designing websites, for example, it's important to do a few things really, really well. I learned this when building and optimizing my own websites.

I had a mentor who advised:

“Know what you do well, and how you can do it better. If you are designing your website, you know that time is valuable and every additional second your user’s stay on your page, the better. Strong design can shave excess latency from pages and increase the efficiency of the serving environment and that is something to strive for.”

Notice that this advice is specific (i.e. design for speed) yet also broad (improve your user’s experiences in the best way that you can).

When thinking about digital design, take time to deeply understand the levers you can pull and how those levers will yield better experiences and results for your users.

Experimentation is key

Thirdly, experiment.

Digital design, unlike the designing of physical items, can be improved rapidly through sprints and code deployments.

Software is adjustable.

By starting with your customers and working backwards, seeking to simplify, and constantly iterating, you can be insure that your design will eventually stick. If you haven’t reached that point, keep trying.

Here is a mental experiment I like to play with my friends.

Think about the last time you purchased an airline ticket online. How many steps did it take to navigate from the landing page to the confirmation of the payment page?

Why do you think airlines make users go through this check-out flow? How would you improve and simplify the process?

A great way to improve your digital design skills is to practice on another designer’s property. See if you can improve upon it.

Digital designers see being great at something as a starting point, not an endpoint. Through iteration and experimentation, a digital designer can take things that work well (or poorly) and improve upon them in novel and unexpected ways.

If you are new to the field of digital design, that should excite you.

Examples of Digital Design Done Well and How It Helps Users

I want to conclude with examples of digital design done well. I provide examples and images and explain why the digital design is intuitive, simple, and relevant.

If you want to develop your skills in this field, take time to not only think about how you would improve other’s sites but also learn from what leaders in the field do, and why.

Example #1

Elemental Labs provides an incredibly intuitive graphic to help users understand the difference between their product and a competitor’s product. Without reading anything else you intuitively understand that their product is marketed as cleaner, purer, and simpler.

The contrast between colors helps the eye visually understand the message and is an example of great digital design.

Also, notice how grams - a common unit of measurement - is replaced with milligrams. This makes the user feel like there is more sugar (29,000 mgs of sugar feels like a lot).

Example #2

Woven is a fun calendar app that makes group polling easy. I have used a variety of software tools to coordinate groups and it's always a bit messy.

Look how clean the infographic and call to action are. Without thinking deeply about the product you can clearly understand how the product works and why it will benefit you: simply pick a date, poll people, and see which date is best for the group.

I love products that combine compelling design, UX, UI, and are incredibly easy to navigate.

Example #3

For those that want an example from the world of digital and physical design, a particular favorite of mine is LFA Machines.

Their product set is complicated: they offer both semi automatic and fully automatic capsule filling machines. For many people, this technology is abstract as they have not seen machines like this in person.

So what does the site do? It offers a video that is automatically playing when you visit so you can see how the device works and what benefits it provides. This digital design brings together simplicity, clarity, and customer obsession all in one.

Example #4

Here is one final example.

If you want to start a podcast you might experiment with different digital podcast software. One that combines simplicity with easy usability and a terrific digital design standard is Buzz Sprout.

When a user visits their site for the first time the user is prompted with compelling and straightforward guidance, tutorials, and advice on how to create a podcast.

These radio buttons say it all: they make the selection process very user friendly and expedite the podcast creation process. In just a single button the design brings together strong design and product aesthetics and usability.

Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have seen many new contenders for Sketch’s crown. Three of them that have made the biggest strides are Figma, Adobe XD, and InVision Studio.

These four tools have many pros in common but there are some differences too. For example, the first comparison, Adobe XD vs Sketch, makes sense especially since both have a similar interface which is user-friendly and has a minimalistic style.

In this article, I analyze how the most used design apps compete and what their unique features are using my experience acquired while working at Creative Tim.

Adobe XD

Adobe XD was developed and published by Adobe Inc. XD, released on 18 October 2017. It is a vector-based user experience design tool for web apps, mobile apps, and voice apps available for macOS and Windows. There are versions for iOS and Android as well that help you preview the result of your work directly on mobile devices.

XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and individual objects can be exported.

The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.

Comparing Adobe XD vs Sketch makes sense especially because of this similar interface which is user-friendly and has a minimalistic style.

Sketch

Sketch is a vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS. It won an Apple Design Award in 2012.

A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. Sketch is only available on macOS. This problem is partially solved by third party and handoff tools.

When Sketch first came out it completely disrupted the interface design space, but Adobe XD and Figma have recently come forward as new challengers. They offer unique functionality like prototyping and live collaboration.

I’ve recently been researching these tools for my side project, uxtools.co, and wanted to share what I believe the be the most noteworthy decision points. Also, from my point of view, learning to sketch is very useful and it does not take to much to become a Pro.

Figma

Figma came to the stage in 2016 with initial funding of $14M.

With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.

Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.

InVision Studio

InVision Studio is a new piece of software, released in 2019, that allows designers to build more advanced animation and micro-interactions. Studio also integrated with InVision’s link to Sketch via its Craft plugin.

InVision Studio has got a nice dark UI by default, that helps developers focus on the work to be done in the evening. However, with macOS Mojave, every app can look like this quite easily. When they created it, they were inspired by another design tool - I am thinking about the Sketch app.

Apps Comparison

1. Pricing

Budget can be a big deal when you’re working with your own resources. Some of these licenses have educational and promotional pricing (often 50% off), so don’t miss that part. For example, Figma will get you there for free as long as you're not working on a team.

• Figma: Free for individuals! You can have 3 projects for free, or you can upgrade to unlimited projects and team functionality for $12/month (billed annually).

• Sketch: $99 per license that gets you the Mac App for life and access to the next production versions of the app.

• Adobe XD: It offers free and paid plans, depending on an individual's or team's needs. Paid plans start at $9.99/month.

• InVision Studio: Free right now.

2. Platform

Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.

• Figma: Browser! Figma recently released a Mac app and Windows app (not offline-capable, though).

• Sketch: Mac only.

• Adobe XD: Mac and Windows. Subject to the same limitations as the CC suite.

• InVision Studio: Mac and Windows.

3. Live Collaboration

Nobody likes to send at the end of the day “version 3.0”, “version3.0.final”, “version3.0.final.final”. Live Collaboration can help us, especially live comments.

I imagine these were the same concerns that surrounded the release of the highly innovative Google Docs suite. Google Docs, however, turned the Microsoft Suite on its head with live collaboration, and now Figma is seeking to do the same thing with UI design.

• Figma: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.

• Sketch: Not natively, but a plugin, Picnic, is looking to change that. Also, they have Sketch for Teams.

• Adobe XD: It offers real-time Coediting, launched at Adobe MAX 2019.

• InVision Studio: Not currently possible, but can generate share links.

Image: Figma - Argon Design System Pro

4. Handoff

Recently a few apps have been developed specifically to deliver specs (sizing, spacing, color) to developers, but design tools are starting to integrate this functionality natively.

• Figma: Because of live collaboration, developers can easily jump in (regardless of OS) and access the designs. Figma now neatly prints the handoff code for CSS, iOS, or Android in the right panel.

• Sketch: They've recently launched their own native developer handoff feature — Cloud Inspector. There’s even an entirely free alternative called Sketch measure that works just as well.

• Adobe XD: It offers design specs that allow a designer to create a shared link that contains measurements, assets, and automatically-generated CSS code snippets.

• InVision Studio: They have “Inspect Now”.

Image: Figma - Argon Design System Pro

5. Offline

This is so important. Some online apps can protect your information when Wifi goes down, but you need full access to open, use, and save from the app offline.

• Figma: No, in an AMA they stated they don't have any current plans to add it.

• Sketch: Sure.

• Adobe XD: Yep.

• InVision Studio: Yes.

Image: AdobeXD - Argon Dashboard Free

6. Prototyping

There are literally dozens of these apps nowadays, but they might become extinct as Adobe XD brings prototyping directly to the design tool. Keep your eye on these.

• Figma: Yes! It's very basic but feels like Adobe XD without the transitions. Also, there's a nice Framer integration.

• Sketch: Yes!

• Adobe XD: Yes, native prototyping within the app. Adobe XD also supports voice prototyping and keyboard/gamepad support.

• InVision Studio: Yes, you can create prototypes and animations.

Image: InVision Studio - Argon React Native

7. Symbols

Symbols can make your work easier. These have completely changed the design process. Forget building and duplicating list items over and over, let symbols do the work for you.

• Figma: Good to go. Symbols now have states, constraints, and overrides.

• Sketch: The symbol functionality in Sketch is very impressive, and continues to improve. Symbols can be updated across entire documents and can resize responsively (that means less work for you when changing screen sizes).

• Adobe XD: It offers components that can be used throughout a document as well as linked across documents. It also allows designers to create variations of a component for different interactions, known as component states.

• InVision Studio: they have components that are a close approximation to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allows designers to quickly build-up, mix, and match components intelligently across their designs.

Image: Sketch - Material Kit Pro

Conclusion

Sketch has a big disadvantage here because it is only available for Mac users. And as such, it lets tools like Figma and Adobe XD innovate beyond the basic necessities.

Also, in terms of design tools, Adobe XD provides a robust set of responsive while the Sketch doesn’t have this feature built-in (but it has many plugins). If your tool does something better than the other, it is often enough of a reason to switch over. The browser-based approach that Figma has taken is also something to behold.

When talking about Adobe XD vs Sketch, the first one’s future is looking very bright and will win over many Sketch users. InVision’s change of focus may ensure its survival but one thing is for certain - Adobe XD is here to stay. The Adobe powerhouse is strong, and smaller companies like InVision and Sketch will have to work hard to stay relevant in the future.

People usually prefer to design and work in just one place. If you’re a part of a team, then Figma is undoubtedly for you.

After all of that: first is Figma, second is Sketch, third is Adobe XD and fourth is InVision Studio.

Overall, when talking about the best design software, these four tools are extremely well-suited for modern designer needs.

Try all four out to see which one is better for your use cases. I hope this comparison - Adobe XD vs Sketch vs Figma vs InVision - helped you decide which design tool is better for you.

Resources:

https://www.figma.com/figma-vs-sketch/

https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/

https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/

https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio

https://helpx.adobe.com/ro/xd/help/components.html

https://www.sketch.com/docs/

When I was 14, I discovered HTML. Thanks to my computer science teacher at school. And from there I started working on HTML. A few months later, thanks to a friend who was a graphic designer, I also discovered Photoshop. I started combining the design with the code to make web pages with the text editor of that time — Notepad.

I was one of the best students in my school, which meant to everyone what I should be as an adult — an Engineer. On my part I love to spend time on the internet, reading, discovering things, and perfecting my knowledge of design and web development. I created an online community. A project to study for the examination of admission into higher education in my country. And I became well known, to the point that some people from Google Spain contacted me to participate in one of their projects. When they discovered that I was a 14 year old boy, it was not possible, however I had my first contact with Google.

After graduating from high school, I enrolled at the university to study electromechanical engineering as recommended by my parents. At that time I felt empty. I felt that in the six semesters I had been studying I was not learning anything that I thought was interesting or wanted to do for the rest of my life.

In college I was learning things that didn’t help in anything I wanted to achieve. The classes were very boring, the people I was studying with didn’t seem incredible to me as to consider them colleagues or future members of my team. I was learning a lot of calculus, mechanics and electricity, but only theoretically because most universities don’t have the infrastructure to do practical classes on these subjects. And they don’t encourage you to think beyond passing the exams.

I also had a job as a teleoperator for Spain and I hated it completely so I decided to leave it also to have total availability of time.

Spending less time at the university and trying to bring my hobbies with me, I started meeting a lot of interesting people in online learning platforms where I started to sneak around without my parents knowledge. This made my performance in college to drop and after thinking about it, I decided to talk to my parents and tell them about what I had in mind. I wanted to quit college.

After many conversations, some fights and his great disappointment, my father decided to give me the opportunity to leave him for a while and achieve something important with what I liked so I got to it. As soon as the semester ended, I wrote to one of the platforms of education in which I participated most. Platzi, commented on my case and I was invited to their offices in the capital of my country, 400 kilometers from my city.

Platzi HQ, 2016.

Without my parents approval, I decided to take the risk of traveling there. I met a lot of people including my best friend Juan David. They helped me get on my new way of life.

The first thing I did was to retake my personal projects. I contacted Google again to participate in the project that I had not been able to participate in because of my age. And since I was 20 years old, I could do it. I was accepted and after two months I received one of the first things that confirmed that I made the right decision. I was invited to Google Spain, all expense paid by Google. Being Latin American, to think of a trip like this is something really difficult and I was going to be paid everything. It was incredible.

I returned to my country eager to get a new job where I could apply everything I had learned. I was looking for a couple of weeks until I got a job again, this time in a very large company with a diverse team and where I started working as a Digital Graphics designer.

Getting your first job is one of the most complex things you are going to encounter. Most companies look for young people but with a lot of experience which is clearly difficult to find.

In my experience, what best helped me to find my first job and what I would recommend would be:

• Create a personal brand:
  Take care of your professional social networks. Have a good Linkedin profile, follow the people you admire, write about yourself, the things you like, and want to achieve. Add the courses and projects you are doing.
• Have a portfolio:
  It is very important to apply what you are learning. The best way to do it is to create real projects. Create companies and implement all the digital processes. Create improvements of websites or products you like as you would like to see. And share it in sites such as GitHub, Dribbble, Medium and Twitter, among others. In most jobs, your portfolio is more important than your resume.
• Teach what you learn:
  The best way to learn is by teaching. Participate in learning platforms (communities) and help your peers, participating in these forums. Join social networking groups and demonstrate what you know.

In my first job I began to invest all my free time in studying web programming in platforms like Platzi (Spanish), Treehouse, Acamica (Spanish) and Udacity. I started helping the development department because I learned from them and sometimes I helped them solve problems. I told my boss what was happening and after a test I was able to move to the engineering department as a web developer. It was incredible the first week. I could demonstrate all my talent and thanks to it in 3 months, I was promoted to development leader. A position in which I am right now. I am in the process of a new promotion in another country.

Googleplex, november 2017.

I’m also continuing with my project with Google. A couple of weeks ago I was invited again, this time to the offices of Mountain View, California. I met more incredible people and spent some crazy days with some of the top designers and engineers of the Google team.

What I can say about my case is that from the moment I decided to leave university to the point where I am now as a development leader it has been a year and a half. I am 22 years and I am working on what I like, in projects with one of the most important companies on the planet. And knowing many countries, people, and amazing cultures.

All thanks to having followed my heart and having left the university. Don’t be afraid to follow your heart, as Steve Jobs said:

Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t give up. As with all matters of the heart, you’ll know when you find it.

Things I learned from my experience so far:

1. Take care of your time

Most people invest their time in leisure. Watching TV, netflix series, movies, and many other things that are not productive at all. Do the opposite and spend all your time reading, studying, learning. Knowledge is there, on the Internet. It’s just a matter of having a little dedication and taking care of all the time you have available. This is the difference between successful people and those who are not.

2. Surround yourself with people who inspire you

Having people around you who help, support, and motivate you to learn is very important. You’re always going to become a bit like the people around you. So you should try to surround yourself with amazing people who help you become incredible.

3. Participate in communities

In every city there are communities of people who come together to talk and learn about a specific topic. This is a great opportunity to meet the kind of people you can learn from. If you don’t find a community in your city, you have a chance. Create your own!

4. Create projects

Some people believe that just by taking courses and reading about the subject they are interested in they are learning but they are not. The best way to do it is to apply the knowledge you are learning in real projects. This will help you face real problems and you will be much better prepared when you start applying it professionally.

5. Love what you do

There is a big difference between people who work hard, those who do it out of obligation and those who do it out of passion. If you do things out of obligation you won’t do them so well or get the same results as when you do them with passion. Love what you do, enjoy the stress, the hard work and the incredible results it brings.

I hope you enjoyed my experience. I hope they have been helpful to those who are going through something like my case. Don’t be afraid, if you do what you like, work hard and do it with passion. Nothing can go wrong. Thank you for reading it and I’d appreciate your feedback.

You can follow me in Twitter or Instagram.