Categories
Uncategorized

Architecting Your Future: Conquering Imposter Syndrome

View the original post

Imagine walking into a packed conference room (or jumping on a zoom call) for a meeting on a pressing topic. As you find your seat, you start to feel like the temperature is rising and your heartbeat quickens, your mind races through the questions that could be thrown your way. The meeting starts and things begin on a good note. The discussion is moving forward and then it happens: someone directs a question at you. It feels like a game of hot potato and all you want to do is get that question out of your hands! You answer quickly, gauging the faces in the room as you respond, wondering who here will expose you as a complete and total fraud. 

As two designers new to the tech and product space, we both have had our fair share of experiences with imposter syndrome. Shara is a high achiever, woman of color who made the switch to tech late in her career. Attending bootcamp with peers 10 years her junior, she often felt insecurity about her decision to transition into product design. Would anyone take her seriously? Madeline spent over 7 years working in documentary film. When she wasn’t filming interviews, she was cleaning camera lenses. Making a complete career shift into UX design not only felt like she was jumping into a deep ocean without any swimming lessons, but that she was up against olympians with established records and achievements.

Conquering Imposter Syndrome

Many of us have felt that familiar feeling: the fear of being exposed or being seen as incompetent or incapable to our peers. That feeling is imposter syndrome. It’s an internal experience of feeling inadequate and phony, compounded by the feeling that we don’t belong. The assumption that one’s achievements are dumb luck often takes the place of feeling accomplished. 

Imposter syndrome can cripple the confidence of the most established professionals. The phenomenon can induce a lack of confidence, depression, and anxiety, not to mention missed professional opportunities. Have you ever turned down a speaking engagement or not raised your hand to lead a special project? Our inner critic can keep us from taking on tasks that can propel us forward and stunt our professional growth. That false narrative may sound like this:

“I don’t know what I’m doing.”

“No one is going to take me seriously.”

“I think they’re going to find out that I’m a total fraud.”

“Glad that worked out. Pure luck I guess.”

So, how does this impact our future? Understanding imposter syndrome, what it is and who it affects, allows us to empathize, recognize triggering situations, and reframe the perception of self so that we can actively work towards changing the narrative. 

Personality Assessments

Personality assessments offer clues about our behaviors and our relationship with self that unlock valuable insights. Shara’s go-to assessment is 16 Personalities. This assessment dives deep into general tendencies, our relationship with others, where we thrive and struggle in the workplace, and touch on our parenting tendencies. There is also the DISC assessment and the Enneagram. The DISC assessment Breaks down four main personality profiles: (D)ominance, (I)nfluence, (S)teadiness, and (C)onscientiousness. Assessment results will outline our behavioral style, motivational style, and drivers exposing how we prefer to get things done and why we’re motivated to do them. Similarly, Enneagram is a system of nine interconnected personality types that outline how we interpret the world and manage our emotions. Truity has all these assessments in one place, complete with blogs and other resources to leverage. Shara’s motto is to take what’s helpful and leave the rest.

Framing Challenges with “5 Whys”

The “5 Whys” technique, often used in UX Research, can help us discover the root of the problem we are facing. This method helps us better understand where a challenge stems by uncovering blockers that continue to persist in our life. For example, Madeline found that she persistently held back and didn’t speak up in large meetings with key stakeholders. With this exercise, Madeline was able to identify the reason why she stayed quiet during meetings: she held an underlying assumption that she shouldn’t speak on issues because she had never talked about them in front of the group before. With clarity around the root problem, Madeline was able to take back control over the deception she had been unwittingly telling herself.

Young man sitting at a booth typing on his laptop.
Journaling is a low-fidelity method that allows us to spot the moments when our inner critic is most visible.
(Photo by LinkedIn Sales Solutions on Unsplash)

360-Degree Review

When we are working to silence our inner imposter, gaining outside perspectives is a great way to grasp a variety of perspectives aside from our own. A collection of  feedback from direct reports, peers, managers, and senior leaders, the 360-degree review is a great way to dispel assumptions we have about our contributions to our teams. Using Google Forms, Typeform or SurveyMonkey, we can quickly compose a survey to collect unbiased perspectives. Ask peers, ‘When working with Madeline, how would you describe her interpersonal skills?” Let the inner UX researcher conduct interviews for quick access to feedback. We might gain perspective on our efficiency and ask if our approach is seen as effective, and consistently improving. Oftentimes, we’ll find that our colleagues have a different perception of ourselves. The imposter may feel that we are not completing tasks efficiently, but our colleagues actually see us as a pragmatic and thorough problem solver. 

Hire a Career Coach

Coaching offers an opportunity to dive deeply into our strengths, opportunities, and our relationship with ourselves. A career coach helps establish our coaching goals, identify self-sabotaging behaviors and destructive patterns, and gain insights that would have otherwise gone unnoticed. Working with a coach has given Shara a clear understanding of her leadership strengths, her communication style, and a heightened self awareness. She feels empowered to own her career and a vision of the type of leader she wants to be.

Seek Mentorship

Additionally, identify a mentor, someone to trust and respect in or around an area of expertise, who can provide transparent and direct feedback. Mentors help direct us towards opportunities for growth and keep us from straying down unproductive paths. A potential mentor could be a former manager, a leader within our current organization, or even a LinkedIn connection. Casually reach out to them to begin developing a relationship. It’s a process! The dynamic between mentee and mentor will evolve over time. Be sure to be prompt to meetings, have clearly defined topics to discuss, and always thank them for their time.

Journaling

Journaling is a great vehicle for cathartic expression and reflection. With consistency, this exercise reveals patterns and trends, exposing the origins of fraudulent imposter feelings. In her journal, Shara captures significant events that occurred during the week. Her journal helps uncover patterns that would otherwise go unnoticed, like incessant feelings of insecurity when presenting and defending her designs. By identifying patterns, Shara overcomes her own challenges of imposter syndrome.    Build consistency by creating a journaling habit. A successful habit consists of three parts: a cue, a routine, and a reward. For Madeline, her cue is to journal on Fridays, the routine is to reflect for 5 minutes, and the reward is to step away from her desk and have a cup of tea. Creating new habits can be difficult, but strong habits are realistically reproducible. Start with simple micro-commitments to build a journaling routine into an effective habit. Ultimately, journaling is a low-fidelity method to reflect and uncover patterns, and highlight themes that reveal the moments when our inner critic shows up.

Architecting Your Future

Imposter syndrome is complex and can show itself at any stage in our careers. We can leverage these methods and tools to help us understand and conquer the falsehoods we unconsciously hold onto. With each gained perspective, we reclaim some control over our deceptions and take action to become the architects of our futures.

Madeline Packard and Shara Rosenbalm are presenting a workshop on this topic at the 2021 Information Architecture Conference. They’ll explore design methods and offer a few tools to battle imposter syndrome and subdue your inner fraud.

Featured photo by Jose Escobar on Unsplash

The post Architecting Your Future: Conquering Imposter Syndrome appeared first on Boxes and Arrows.

Categories
Careers

Are You Hating Your UX Job? — Here’s Some Tip to Get Motivated

View the original post

What Hate You Most As a UX Designer?

Continue reading on UX Planet »

Categories
Uncategorized

Doing a UX re-design for your product

View the original post

In the race for great product UX, re-designs are the necessary pit stops. And executing them in a right way can make all the difference in the race!

formula 1 pitstop
F1 pitstop

“It is not the strongest of the species that survives, nor the most intelligent. It is the one that is most adaptable to change”.

And in this VUCA world, digital products are being re-designed faster than ever to adapt to change!

With growing user expectations, increased competition, and rapid technological advancements, products now require frequent yet efficient cycles of re-designing their users’ experience. But what exactly is a UX re-design?

Re-designing a product is akin to renovating a house. Suppose you have a cozy two-bedroom house that serves all your present needs. Now due to aging, you notice the walls require re-painting so that the house continues looking good and to keep it safe from weather damage.

renovating a house

Similarly, a product can be re-designed to keep up its visual appeal. Or it can also be done to maintain its health, by addressing any known issues of its interface. Like re-painting won’t require you to really change anything in the foundation of the house, re-skinning of a product would be limited to its top visible layer and is termed as UI re-design.

Now, consider a need for more rooms in the house for your growing family. Well, these modifications would require you to look into the foundation/blueprint of the house and then plan whether the need can be solved by simply adding something to the current structure or by re-building it from scratch.

In the same fashion, a product’s users and their needs may have changed or evolved over time. To address it, you may need to change the deeper layers of the product, terming it a UX re-design. What differentiates this from the former is its holistic nature, giving an opportunity to check all the way through to the foundation of the product.

A UI re-design is just one part of a complete UX re-design. More than just bringing fresh colors and nifty fonts, a UX re-design also deals with the change in personas and use-cases of the product. It’s about observing and embracing the way users and their behavior may have changed over since the product was last designed. You may go further by exploring the new tools in the ecosystem of the user, any new competitors in the market, or even a new “why” for the product.

How to do a UX re-design

The scope of a re-design is gauged by goals and the process of re-design is quite similar to that of designing a new product from scratch.

You start by gathering the brains behind the product and set them on a journey to re-think all the way back from “what” you have today to “why” and for “whom” you have it.

This can be achieved in two parallel streams:

  • First, identify what is and isn’t good in the current product. This is done by analyzing the user feedback and the analytics generated from the product in its current usage. This can include qualitative feedback as well as quantitative data points like drop rates, navigational patterns, and A/B tests.
  • Second, validate your current state of knowledge about the users, their needs, and the market space. This is followed by filling in the existing information gaps and updating the research artifacts.

This step is also known as a discovery workshop and it re-establishes empathy with the users and lets you also re-evaluate the competitor offerings.

Following the discovery phase, you can proceed with re-defining the personas and their use cases accordingly. Once ready with these, the next layers of UX design can then be re-worked to achieve fresh UIs, which are then ready to be tested with the users.

Testing a re-designed product early and often is as important as doing so with a new one. Apart from testing with newer personas if any, testing with existing users is also very significant, as it opens an opportunity to check if they are welcoming of the changes. There have been numerous examples in the past of massive UX re-design failures, reasons for which have varied from inadequate user research and testing to throwing too much of a change at once!

It must be noted that overdoing changes all at once or doing them just for the sake of novelty increases the risk of backfiring from users, as it adds an overhead for them to re-learn the product functioning for no great benefit in return. In the end, it’s about striking a sweet balance between “change is the only constant” vs “humans resist change.”

So, if your product is missing trending features like social logins and voice commands, or the pandemic has changed the business around your product, or maybe now is the time for you to consider the incoming Gen Z as your targeting audience…a UX re-design is the way to go!

Originally published at https://iongroup.com.

Doing a UX re-design for your product was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Case Studies

Improving Valorant E-Sports Experience — UI/UX Case Study

View the original post

Improving Valorant E-Sports Experience—UI/UX Case Study

Enabling fans with a viewer experience which is as good as the game itself

Cover Image for Improving Valorant E-Sports Experience (by Sumeet Pandhare aka itssumeetp)

Context:

A bit of context, for the uninitiated — Valorant is an FPS (first-person shooter) game released by Riot Games in June 2020. As Valorant describes it is — a 5v5 character-based tactical shooter game, where the agent you choose is one of the most important elements of the game as each agent has its own set of abilities, utilities, and ultimate ability unique to them.

Within months of launching the game officially, in September 2020 Riot announced their first Valorant e-sports tournament — First Strike. Scheduled for December 2020, the gaming community was ready to see yet another Riot e-sports masterclass (considering their history with League of Legends).

The event was held on Twitch where the broadcasting team overlays the graphic elements over the game footage from the actual match and streams it for the viewers. So this is the part where I come in. This combination, of game footage and overlay elements, is where the problems mentioned below lies. I am trying to solve the issue of these overlaying elements and the value they provide to the user.

My Role:

I took up this project as a solo designer and was responsible for everything in this case study, which includes conducting user research, competitor analysis, UX trials for various wireframes, designing the UI and testing the final designs.

Duration: 6 weeks (≈ 100 hours)
Date: 28th January — 6th March, 2021

Comparison (Before/After):

Final Design comparison with current experience (by Sumeet Pandhare aka itssumeetp).

Problem:

During this event, the majority of the viewers faced the same issue — Not being able to consume and track the utilities, abilities, and ultimate ability for any of the players/agents in the match. It prompted viewers to pay more attention to the casting team and their brilliant commentary.

Goal:

This project aims to improve the viewer experience for Valorant e-sports by giving them the agent statistics in a much clearer and intuitive way. It also includes researching any other problems and fixing them to overall boost the viewer experience.

Valorant First Strike overview along with insights from primary user research (by Sumeet Pandhare aka itssumeetp).

Current Experience:

The following images showcase viewers’ problems after a series of surveys, interviews, and secondary research. Apart from the central issue of not being able to track the statistics of each agent’s abilities, I recognized other problems following a series of user interviews, secondary research in online gaming communities and user surveys.

Some of the problems with current experience:

  1. Not being able to track agent abilities, utilities and ultimate ability.
  2. No clear indication of a player who has achieved his ultimate ability.
  3. Not being able to recognize which player is the spike carrier.
  4. No information on which team’s agent has deployed a particular utility (in case each team has similiar agents eg. Killjoy, Cypher )
  5. No clear distinction between attacking and defending team in scoreboard.
Image showcasing current experience (by Sumeet Pandhare aka itssumeetp).

Competitor Analysis:

Since this was the first event by Valorant, I decided to look at the competitors and see what worked well with the viewers and what didn’t. I looked at events from few of the most popular first-person shooter games.

The games which I analyzed as a part of competitor analysis (by Sumeet Pandhare aka itssumeetp).

Conducting this analysis gave me an understanding of what viewers are already accustomed to while viewing e-sports events and providing insight into various layouts used by different games.

Takeaways:

  1. There are two conventional ways stats are structured — either vertically using a sidebar at either side or horizontally, at the top.
  2. E-Sports aren’t just about the players and the viewers; casters are as crucial as the screens which viewers see. They control the narrative of the matches and micro-events within the games.
  3. Events stick to the conventional placement of maps and other sections and try not to create a massive difference between player experience and viewer experience of any given game.

Wireframes:

There are two main micro-events in the actual gameplay — the round phase and the buy phase. These two events make up about 85% of the entire viewing experience apart from Pre-Match events, Agent Selection phase, Post-Match events, to name a few.

Trust the Process:

While designing the wireframes for the in-round phase, I initially decided to skip low-fidelity wireframes and jump to high-fidelity wireframes instead cause I assumed that e-sports viewers are more accustomed to seeing vibrant colours, and it will be impossible for them to understand what the low-fidelity designs are meant to be.

This was a huge mistake.

High-fidelity wireframes are not only time-consuming, in the sense that making many iterations or versions of a single screen is a tedious process, but also making changes to them based on user feedback takes a lot of time.

Users can usually understand low-fidelity wireframes without having a design background, especially IF the wireframes are well designed. So don’t jump to high-fidelity wireframes, even for user testing.

What I mean by this is that low-fidelity wireframes not only save time but also test the intuitiveness of the screen. If the wireframes are well designed, the users WILL understand what it is and give you good feedback.

Low-Fidelity Wireframes:

After wasting three days trying to make high-fidelity wireframes, I finally decided to go with the actual process and create low-fidelity wireframes. The following are the wireframes I designed to get user feedback and decide what to go ahead with.

Image showcasing low-fidelity wireframe for top bar layout (by Sumeet Pandhare aka itssumeetp).

Top-Bar Layout takeaways:
The horizontal layout at the top is kind of a radical approach. When I tested this wireframe, there were a few concerns from the users:

  1. It seemed very “top-heavy” with fundamental changes to the layout that people are used to from their player experience.
  2. The map at the bottom left and kill-feed at the bottom right produces cognitive stress.
  3. Apart from this, it has a functional error. The huge top-bar reduces visibility when viewing from the player’s POV, which is a considerable detriment especially considering how much Valorant involves verticality aspect in their maps.
Image showcasing low-fidelity wireframe for side bar layout (by Sumeet Pandhare aka itssumeetp).

Side-Bar Layout Takeaways:
Users were more receptive towards this approach, and it didn’t challenge their previous interactions with Valorant’s First Strike event. There were still a few iterations to be designed to make this side-bar variation a better experience for the viewers, but these were some of the insights:

  1. Having the stats on the side was highly beneficial as it didn’t hide any part of the actual gameplay. Professional players have an excellent aim positioning so having enemy players on the sides is highly unlikely, making this a better alternative than the top-bar layout.
  2. The player experience resembled the viewer experience, making for a better visual structure.
  3. This was also because the majority of the player and the viewer base had come from a single competitor — Counter Strike: Global Offensive.

Design Iterations:

Following the user feedback and choosing to go ahead with the side-bar layout, I started designing the first screens of the in-round phase and the buy phase.

In-Round Phase:

The in-round phase screen is undoubtedly the screen that viewers see for the longest time during an e-sports event. For this screen, I made a few variations of both the agent stats and the scoreboard. Below are a few of the variations I came up with. After designing the few variations, I did user interviews and A/B testing to develop the final design.

Few variations for the scoreboard which will be used in in-round experience (by Sumeet Pandhare aka itssumeetp).

Scoreboard Variations Takeaways:
Testing these variations gave a few insights. Trying to fix a problem and making it evident that you have solved the problem is not always the best way to do things (i.e. in 3rd variation). There has to be a balance between things.

Image showcasing few of the variations for Agent Stats showcased in in-roud experience (by Sumeet Pandhare aka itssumeetp).

Agent Stats Variations Takeaways:
Giving viewers the exact health and shields’ count seems like a good idea but isn’t as most of the gameplay in professional leagues is a one-shot or two-shot interaction. So if the viewer can see that agent’s health is low, it doesn’t matter if the health is 40 or 78; the player is one-shot away from death for most circumstances.

Another thing that is usually followed in games is placing the health bar at the bottom, especially in the gameplay. In e-sports, viewers are used to seeing health bars up top, especially when the layout is a sidebar layout rather than a horizontal layout on the top.

Complete In-Round design:

Complete in-round experience (by Sumeet Pandhare aka issumeetp)

Buy Phase:

The buy phase is a 30-sec period between two rounds where teams can buy guns and abilities and plan their course of action for the next round. For a long, most FPS games have been giving the former more importance, and understandably so, as the buy zones in most FPS games are very small, but for Valorant this is a crucial differentiator.

Valorant provides ridiculously huge buy zones for each team, making the team’s initial player and utility set-up an even more vital element for the match narrative and is still an untapped feature in the viewer’s experience.

Viewer behaviour in the buy phase suggested, they care about the initial team/utility set-up and want to see that in a much better way than a small map on the top left. Following are a few of the different variations for the buy phase, which can be used on a case-by-case basis. The first two designs should be ideally used for the first 20 secs of the buy phase, and the last design should be used for the last 10 secs to provide player POV once the buy phase has ended.

Complete buy phase experience (by Sumeet Pandhare aka issumeetp)

User Testing:

Once I designed the above variations, I tested the designs with 10 different users. Following are the details:

Goal:

To provide users with agent statistics in a much clearer and intuitive way.

Test Metrics:

  1. Task Completion Rate
  2. Satisfaction Rate
  3. Qualitative Feedback

Tasks:

  1. Find the number of abilities an agent has remaining.
  2. Find the number of points needed by an agent to unlock the Ultimate.
  3. Find the agent’s positions at any given time.
  4. Find the location of the spike carrier at any given time.
  5. Find the economic value of the team during the buy phase.

Results:

Overall, my designs increased the average ease of overall task completion rate from 5.1 to 9.2 (1 being hardest, 10 being easiest) while enabling viewers with a much more intuitive experience in finding all of the agents’ statistics.

Infographic for Results obtained after testing designs with 10 viewers (by Sumeet Pandhare aka itssumeetp).

Additional Designs:

Additional designs along with before and after screens (by Sumeet Pandhare aka issumeetp)

Insights Gained:

  1. As mentioned earlier, this project gave me one of the biggest learnings I have had until now — TRUST THE PROCESS. All the design processes are time tested, they do work, and trying to go past them based on personal choice can prove detrimental.
  2. E-Sports is not up-and-coming. It’s already here! The sheer number of hours watched in few months despite being the game’s first official e-sports event is staggering. Giving time and resources to improving these experiences is a necessity.
  3. Iconography. This was a bit of a surprise. Throughout the design learnings, I have always seen experienced designers talk about icons. It’s always talked about in the context that all icons in the project should look good together, have the same round edges or square edges, and have the same stroke widths. But during this project, I realized the good icons are scalable, they need to convey their value at 16px as well as it does at 96px.

What about the Valorant Champions Tour ?

I had started and finished this case study 2 weeks before Valorant Challengers Tour had started with its first match. As we know, VCT has shown an improved experience compared to Valorant First Strike, but there are still issues with it, which are addressed by the designs in this case study.

Next Steps:

Now, I plan to connect with the designers at Riot and get their feedback and reviews on this case study. I want to know more about their thought process, how and why they designed the event in the way they did. Were there technical issues that prevented all this? Time constraints?

If any other e-sports designers are reading this, I would love to have your feedback as well. Connect with me with the links down below:

Sumeet Pandhare | itssumeetp

LinkedIn | Instagram | Twitter | Let’s Talk

I want to thank Sanketh Sampara for mentoring me throughout this project and providing me valuable suggestions.

Disclaimer: This article is based upon my experience, all views are my own and do not represent the opinions of any entity whatsoever with which I have been, am now, or will be affiliated.

Improving Valorant E-Sports Experience — UI/UX Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Uncategorized

Faster user experience: Optimistic UI

View the original post

Optimistic UI; a design and application/web-oriented method to improve the user experience. Its use and operation are slightly different…

Continue reading on UX Planet »

Categories
Figma

If you’re a designer, then try those figma plugins to boost your productivity!!

View the original post

7 Figma plugin that boosts my productivity.

Continue reading on UX Planet »

Categories
Conversion

4 Ways to Convert XD Files to PSD

View the original post

4 Ways to Convert XD Files to Photoshop PSD

Adobe XD to Photoshop PSD conversion

Yesterday, I shared some Adobe XD design files with a client. His reply was not what I expected.

“Love the design, but can you send this again in Photoshop?”

Uuuuuuuuuummmmmmmmmmmmmmm…maybe? 🤔

Truth is, I didn’t know how to convert an XD file to PSD or if it was even was possible.

So I Googled it and turns out it’s not easy. Photoshop and XD are both Adobe products, but the XD to PSD conversion isn’t supported.

There has to be a way.

I’ve now tried the four methods that exist for converting XD Files to PSD and written this post. If you have questions, here you will find answers.

Photoshop is Still Super Relevant for UX and UI Design

I find it weird that it’s hard to convert Adobe XD files into Photoshop because there are so many UX and UI designers still working on it exclusively. True, Photoshop’s popularity is declining. Designers continue to flock to shiny new tools like Figma and XD, but Photoshop is established and breaking people’s habits takes time.

I don’t understand how Adobe hasn’t anticipated this behaviour and made it easy to convert from XD to PSD. They must know that people are using Photoshop as a UX tool because in 2015 they added artboards to Photoshop. I digress.

There are Four Ways to Convert XD files into PSD

In this article, I’ll go through all of them in this order.

  • SVG
  • SVG + Illustrator
  • XD2Sketch
  • Photopea

How to Convert XD files to Photoshop via SVG

Rating 1/5 ⭐

Converting XD to Photoshop via SVG is visually accurate but there is one big reason you don't want to do it.

Export an SVG from XD and try to open it in Photoshop, and your entire design is flattened into a single layer. Another problem with SVG exporting is you’ll lose all pixel-based images.

Your jpegs and pngs aren’t going to survive the trip into maths and back.

If all you want to do is display a picture of your design in Photoshop converting XD to Photoshop via SVG is a viable option, just be aware that editing this design file in the future will prove very difficult. I didn’t do this, because I didn’t want to give my client a single layer design file.

How to convert XD files to Photoshop via SVG

Step 1

Click here to export your XD canvas as an SVG.

Step 2

Export the whole canvas

Step 3

Open the SVG file in Photoshop. Depending on what application you have set to open SVGs by default, the icon may look like a web browser or a code editor.

I’ve set Photoshop as my default application for SVG files.

Step 4

Importing the SVG files into Photoshop at high resolutions takes ages. If you’re short on time, or just testing out the results, lower the resolution.

Here is the output. Just like we expected, there’s only a single layer.

If you send this, the client can’t do anything with the design without remaking it from scratch. I don’t consider this a solution.

Pros of SVG

  • It’s free
  • It works

Cons of SVG

  • Output is a single layer
  • Dead-end for all components.
  • Resizing issues
  • Loss of pixel-based graphics
  • It takes a very long time to rasterize images at high resolutions
  • Not a viable solution

Converting an XD file to PSD via SVG and Adobe Illustrator

Rating 2/5 ⭐⭐

This method which for lack of a better name we’ll call the SVG Illustrator conversion is a dirty hack. Your SVGs take a trip through Illustrator, but the advantage of this method is it outputs a Photoshop file with LAYERS.

Yes, it will destroy your layer structure and flattens most of your shapes, but it isn’t completely flat. There are still layers, and I guess it’s theoretically possible to edit this back into a useable design document.

I’m just worried that it might be quicker to throw it in the bin and start again.

Step 1

Export your XD canvas as an SVG.

Step 2

Open the SVG file in Adobe Illustrator. Notice how you’ve retained your layers as clip groups? For some reason, Photoshop can’t do this, which is why we’re using Illustrator.

Step 3

Export the file from illustrator as a PSD document

Step 4

Make sure you click Write Layers in the Photoshop export options. It doesn’t take a long time to export at a high resolution 300 ppi is fine. You also want to preserve Text Editability and Maximum Editability.

Step 5

Finally, you open the converted PSD file in Photoshop and there you have it.

You’ll need to invest some serious time into tidying up this design. It really decimates your layer structure and flatters most shapes.

These freebie design files are simpler and fared a lot better than my real design files.

The conversion is okay. It’s better than going straight into Photoshop but not by much.

Pros

  • It’s free

Cons

  • Practically unusable — merges and flattens layers.
  • You need to have Illustrator
  • Doesn’t convert artboards

___________________________________________________________________

Paid Options

___________________________________________________________________

In the end, I had to spend money to convert my XD files to Photoshop.

I was reluctant to get out my wallet still believing an Adobe to Adobe conversion should be a simple task.

As the hours dragged on I realised I just wanted it done.

I found two “paid solutions”, and I’ve tried both of them.

For the sake of this high effort medium post, I’ll demo them to you, so you walk away from this article with a full sense of how to convert XD to Photoshop.

How to Convert Adobe XD to PSD with Photopea

Rating 2/5 ⭐⭐

Photopea is an online tool that’s capable of all kinds of conversion.

XD to PSD is just one of many options.

I’ve used Photopea before and thought it was free but turns out it’s not. There’s a free time window. The first 15 minutes in every two hours.

I only needed to wait 28 minutes, so I set an alarm and did something else.

Step 1

Go to Photopea.com and open their editor.

Step 2

Click

file menu open and open your XD file.

I didn’t want to use my real design files for the medium article, so I used free files I found at https://freebiesui.com/xd-freebies/.

Step 3

Save the file as a PSD to your computer.

umm what

The Result

Photopea converted my XD files to Photoshop files, but the output wasn’t very good. I lost a lot of graphics and symbols and some of my border radiuses were removed.

Some artboards it converted perfectly, others not so much, and I’d estimate there are 2 to 3 hours of rework needed to get the conversion looking like my original XD document.

There are empty squares everywhere called tap targets leftover from the prototyping that was in my XD file.

Pros

  • It’s free
  • Great folder hierarchy and layer names

Cons

  • The resolution was also too low
  • Alignments were off
  • Primitive elements like simple coloured squares were just missing
  • Time-consuming rework required to bring design files up to scratch

XD2Sketch

Rating 4/5 ⭐⭐⭐⭐

XD2Sketch was an accurate and fast conversion, but it’s crazy expensive.

It spat out a PSD file that’s was “close” to ready and just needed some minor rework before I could send it off.

Full disclosure, I now use this tool on a semi-regular basis, so yeah I’m a little biased, but it’s earned my bias.

Here’s How you use XD2Sketch to Convert XD to PSD

Step 0

We’ll convert the same design files that we did with Photopea. This is what our files look like in Adobe XD.

Step 1

Go to this page https://xd2sketch.com/converter/xd-to-psd.

Or if you go via the home page, just make sure you’ve got the Adobe XD to PSD option selected like you can see in this screen.

Adobe XD to PSD

Step 2

Upload your XD file to XD2Sketch.

Upload your XD file to XD2Sketch

Step 3

Pay money. It ain’t cheap.

Pay for XD2Sketch

Done and dusted. Let’s take a look at how our Photoshop files turned out.

The finished XD2Sketch Document

The conversion is pretty good. All our artboards were copied across to PSD, and as you can see folders and layers are employed by Photoshop to neatly separate each of my styles.

I can make small changes to the strokes and modify all styles with a few clicks, and the developers can quickly get styles out of the layers.

Pros

  • Converted the names and structures of my components
  • Preserved components and artboards
  • 20 minutes rework tops before it’s ready to send
  • Saves a lot of time over rasterizing SVGs into Photoshop — which takes ages

Cons

  • XD2Sketch costs money

In Conclusion

This was an interesting learning experience and XD2Sketch is the best tool for the job.

I often use it to save time on big projects. If you have simpler design files and don’t want to pay money try the illustrator method or Photopea.

Thanks for reading.

I hope this article was useful. I wrote it because there’s not much quality info on this topic and I wish it existed when I was looking for solutions. Good luck!

4 Ways to Convert XD Files to PSD was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Uncategorized

UI Lessons from the Best Social Media Websites.

View the original post

Instagram, Twitter, Facebook, Pinterest — revisited.

Continue reading on UX Planet »

Categories
Forms

How to use Contact Form 7

View the original post

contact-form-7-large

Including easy-to-find contact information on the websites you build is a great way to help users get ahold of you (or your clients!) Sometimes, an email address is all you need, but if you’d like to automate the process with a little more functionality, a contact form can help ensure that you always get the information you need from the people trying to reach you.

While you could build your own custom plugin, there are a number of great form plugins already available that you could install — Contact Form 7 is one of them.  

With more than five million active installations, Contact Form 7 is the most popular form plugin in the WordPress plugin directory, and it’s a great solution for many of your form needs. 

It’s also regularly updated and includes lots of customizable choices, numerous options for multiple forms, and great support in general.

Ready to give Contact Form 7 a try? Let’s set it up!

Install it.

To install Contact Form 7, just go to Plugins > Add New. Search for “Contact Form 7” and click Install Now.

Build the actual form.

Once you’ve installed the plugin, navigate to the new Contact tab and select Add New.

Select the language you’d like to use, and again, hit the Add New button. 

Now we’ll build the actual form. As a default, you’ll see a form that asks for “Your Name (required),” “Your Email (required),” “Subject,” “Your Message,” and a Send button.

contact-form-7-form

From here you can add, remove, or simply edit any of these fields to meet the needs of your site. To add a new tag to the form, just click the relevant button (text, email, URL, etc.). A new window will open with further options, such as if the tag is required or if you’d like placeholder text until the user fills enters their own.

contact-form-7-options

Once you hit Insert Tag, you’ll see a new line added to your form that looks something like this: 


[url* url-300 placeholder "www.website.com"]




That’s a good start, but you’ll want to add text above that tag so users know what you’re looking for. 


Start a new paragraph, enter your text, add a break before the tag, and then close it with a paragraph. It should look like this:



<p>Website URL <br />
[url* url-300 placeholder "www.website.com"] </p>




Once you’re done setting up your form, hit Save. Don’t worry, you can always make changes later on! 


Set your email preferences.


When someone submits a  form, you’ll get an email with all of the information they’ve provided. In the Mail tab, you can arrange the information in that email using the same tags from your form. At the top of the page, it’ll tell you which tags you can use. 


contact-form-7-tags


In the Message Body section, you can use those tabs to arrange how the email you’ll receive will look. This makes it super easy to see everything your clients submit. 


Again, once you’re done, hit Save.


Edit the automated messages.


The Messages tab allows you to control messages a user sees when they submit a form. This includes anything from error messages to notifying the user that their form was successfully submitted. 


There are default messages for just about every use case, so if you’re not too concerned about adding a unique tone of voice, you can probably skip this tab. But if you’d like to add a little personality to your form, these messages are a great way to do so. 


contact-form-7-messages


Once you’ve made any changes, go ahead and Save.


Add any additional settings.


The last tab, Additional Settings, allows you to add some specific code snippets to your form. You can view these functions here.


Once you’re finished with any additional settings, hit Save, then copy the shortcode from the top of the page.


contact-form-7-shortcode


Finally, paste that shortcode onto the post or page you want the form on, and voila! You’ve got a contact form on your site.




18 WordPress plugins to streamline your marketing efforts




Contact forms are just the tip of the iceberg when it comes to all of the great marketing plugins available for WordPress sites. 


If you’d like to find out more, check out this ebook for our favorite list of plugins for marketers! We’ve found these plugins to be simple to use, insanely reliable, and approved by developers (so you don’t have to worry at all about site performance). Ready to install your new favorite plugin? Let’s dive in!
Categories
Careers

This is the average design leader’s salary in 2021

View the original post

With remote work’s rise over the past year, companies can now recruit design talent from anywhere in the world. This monumental shift in hiring norms raises novel questions: Do companies pay enough to compete for talent in a global market? Do companies compensate their best design leaders well enough to stay?

Based upon feedback from the Design Leadership Forum, a members-only group of more than 3,200 design leaders, InVision set out to find an answer. They asked 600 global design leaders across 38 industries to disclose their real salary numbers, and, after analysis, found that the 2021 average design leader base salary is $168,000. Their findings are published in a new report, which also analyzes the data by industry, gender, race, operating model (remote/co-located/etc), and happiness.

Here, the report’s three most interesting salary trends:

Media and tech pay design leaders the most 

Not surprisingly, the years of experience was the most important variable to a design leader’s pay. Design leaders can expect to earn their highest salary—an average of $208,526—in their 25th year, up from $179,078 at year 20.

But pay varies widely by industry. Industries just now experiencing digital transformation (like health care and finance) tend to compensate their design leaders less than early adopters. Here’s an industry breakdown of pay:

  • Media: $176,250
  • Technology: $175,460
  • Healthcare: $164,625
  • Finance: $161,565
  • Retail: $160,806
  • Consulting: $159,064
  • Agency: $150,645
  • Other: $144,642
  • Advertising: $139,213
  • Hospitality: $135,625

Gender and racial pay gaps persist 

The report finds that race and gender still impact salary, particularly within the tech industry. Men hold nearly seven in 10 design leadership roles in tech. Across industries, men earn an average of $3,000 more than women. In tech, though, men in design leadership earn an average of $179,000 compared to women’s $169,000.

Race affects salary even more than gender—and the pay gaps can be massive despite years of experience. White design leaders on average earn $171,065 a year, compared to the average Asian design leader’s $149,592 and the average Hispanic design leader’s $142,121. The average Black design leader earns $125,108. On average, too, they had less experience than their white counterparts, suggesting they’re getting in the door later than their white counterparts. (As a telling note, too, Black representation in the survey was so small that the findings are statistically insignificant.)

There’s a consistent salary gap between happy vs. unhappy design leaders 

As companies transform, the digital customer experience at stores, restaurants, banks, doctor’s offices becomes more important than ever. That means organizations should value designers’ roles more than ever. But how much does it take to separate happy design leaders from unhappy ones? $30,000, according to the new report. The gap is consistent, too, regardless of industry or title average.

Want more?

Want more?, Read the full report

The post This is the average design leader’s salary in 2021 appeared first on Inside Design.