It has also been one of the biggest contributors to many success stories, for example — Jeff Bezos invested 100 times more into customer experience than advertising during the first year of Amazon, and AirBnB’s Mike Gebbia credits UX with taking the company to $10 billion.

Clearly, good user experience is good for business.

More so than ever, we are in need of more UI/UX designers to carry on this challenge. Undoubtedly not an easy role, UI/UX designers need to equip themselves with a certain sets of skills. Which brings to the next question— what sort of skills?

From our experiences, we could list down these skills in two categories — core skills (technical skills needed to excel as a UI/UX designer) and personal attributes (might seem secondary, but they are actually important to level yourself up to be a better UI/UX designer each day).

This week, let’s talk about core skills needed to become a UI/UX designer. Onward!

Core skills

User research

Bigger companies might have a dedicated team to perform user research, but it is important for a UI/UX designer to get herself involved in the research from the beginning. This could give her more insight into the nature of the business, get herself acquainted with the clients & their problems and how they behave — which actually could help with the direction of the design later.

Wireframing

Wireframing is the step which allows you to define the information hierarchy of your design, making it easier for you to plan the layout. It is as MVP as it can be in the design process, especially if you want to start designing and you want to confirm with the client or the team on the layout.  Once it is confirmed, it is actually faster to start designing since you already have the structure.

This beginner’s guide to wireframing is very helpful for you to start building your own guidelines.

Visual design

In order to transform the wireframes into mock ups, suffice to say you will need to have basic visual design skills. Our designers use Photoshop for this before getting the designs signed off and handed over to the development team, but best to check with the team you are working with on their preferences.

You might be thinking — “but I started with print design and I wanted to get into UI/UX, is it too late?” Absolutely not! There is an abundance of free UI/UX courses online you may find on Coursera, Hackdesign and many more. You may only need to start adapting your existing design practices to UI/UX. 

Prototyping

Prototyping can be defined as ‘a simulation or sample version of a final product, used for testing prior to launch.’ Prototypes are used to test products, fix issues and confirm requirements before sinking further into development. Prototype testing can save time and money since it can be used to identify earlier usability issues and reveal areas to be improved.

A lot of apps can be used to develop faster prototypes. Our team swears by InVision, but there are many others such as UXPin, Atomic and Sketch.

If you’d like to read more, UXPin here has a good article on a guide to prototyping.

Basic coding

We all hear of all these arguments floating about — “should designers learn how to code?”. The answer would be, “yes, but as much as possible to understand how development would work later.”

The designs done by UI/UX designers are eventually going to be translated into code, so it is helpful for UI/UX designers to know basic front end and programming knowledge. This is so that you could know what’s possible to be done before sending your design files to the developers without risking on their timelines or resources. It is vitally important, according to this discussion, that “UX folks have (at least) a theoretical understanding of “FE-related things”, including semantic page structure, optimization techniques, impact of JavaScript, graceful degradation/progressive enhancement, accessibility etc.”

Metrics and analytics

There is a possibility that user research will not be included in the scope of a project, so how do you start designing? First off, UI/UX designers do not design blindly. Your design decisions should be informed from experiential and data-driven decision.

UI/UX designers need to have some basic understanding on translating data so that we can use them to accomplish goals and achieve customer’s satisfactions. InVision has this good article on how to design with data.

Writing

In his annual Design in Tech report lead by John Maeda, he suggests that besides coding, the other one “unicorn” skill a designer should have would be writing. While many designers have noted the value of leading design with content, there are some others who are still persistent to start writing more due to many reasons. Well, we should not have.

Writing could also help immensely in articulating your design justifications to clients, or your team members. Furthermore, when you write, we empty up our mental estate in order to make way for more information to come through. We also remember better!

There is no magic to writing, and if you would like to start, here are some simple but powerful UX writing tips for designers.

Moving forward

Evidently, there is no shortcut to become a good UI/UX designer. Depends on your organisations or whether you work alone, sometimes not all of these skills are needed but it would be helpful to branch into all of these core skills as much possible.

After all, user advocation doesn’t take a day!

Next in Part 2: So You Wanna Be a UI/UX Designer : Personal Attributes.

(Thank you WOCinTech Chat for photos!)

The post So You Wanna Be a UI/UX Designer appeared first on Stampede: the strategic design & technology company.

In the first couple of months at Stampede, I was assigned to an intense training regimen. Instead of some run-of-the-mill online course, the team at Stampede came up with a personalised course that would help me sharpen my strengths while shrinking my weaknesses.

Currently, my training still continues, and is constantly being adjusted to what I need to improve the most; efficiency. This meant that I could not dwell too long on looking for a perfect solution every time for design problems. Instead, I had to look for the best solution in the allocated amount of time.

Rapid-fire design skills

To meet this goal, a training module was developed by Zana, who is in charge of our training. It was named ‘Rapid-fire Design Skills’, and was designed for me to complete a small design assignment every day within half an hour. These are one-off designs like a single screen mock for an app for website.

Within those 30 minutes, I needed to do as much as I could while delivering the best results as possible. There were times where I exceeded the limit because I could not muster up the willpower to stop working on those assignments.

That highlighted another reason why this training was relevant to me, because I’ve had trouble completing things until it felt perfect. The problem; it was never perfect to me.

When I got this assignment, it reminded me of the time where I started waitressing in my gap year and the management told me, soon I was going to learn to carry seven plates, when I could only carry three. I knew that I would never be able to carry seven, 500g plates and £200 worth of fancy dinner for them.

To explain it better, here’s a diagram.

When I told this to Shaza, our design lead — she said it was fine not to carry seven plates at the same time, but only if you can deliver them three by three in the same amount of time.

I realised that the point of this training was not so much delivering a perfect solution in a short burst, but rather what I could come up within that time. It focused on making me churn out drafts and ideas quicker, to increase my production speed and eventually get closer to the solution.

Understanding the brief

The first step is to read and fully understand the design brief. This is the most important step because the moment you misunderstand what needs to be done, it’s like setting yourself up for failure. At present, this step sits in my weak spot.

The Brief: A flight booking confirmation UI in desktop showing destination to and from, time of departure and arrival, flight time, class, price, and CTA to book this flight with at most three colour schemes.

Such a case was when one of the briefs I received, requested for a flight booking confirmation screen. I thought this was pretty straight-forward in the beginning but what happened was that I initially did not notice some of the elements that needed to be in the design. These elements were the flight and payment details, along with a ‘Book Now’ button on page. So the result of that mishap was a screen that users would see after they had placed a booking. The screen I needed to design was the one before that step.

Sample of the mock I designed.

The lesson I took from this was that, even with little time at my disposal, comprehending the brief is never a waste of time. In fact, this is the best time to ask questions to ensure that you fully understand the goal of the design.

Understanding the who and the why

Once I understand what needs to be designed, the next step would be to figure out who would be interacting with it. This step is where the UX part of my skills are tried and tested.

Users are varied, but understanding them is important.

Although the designs I’m working on are just a part of the training, I have to give it serious thought and empatize on who would be using this product. In the case of the flight booking website, the ‘who’ are the users looking to travel, and the ‘why’ is the reason they are booking tickets on the page. By repeatedly putting myself in the shoes of other people, I have gotten better at creating user-centric designs in a shorter span of time.

Research existing solutions and consider whether it works or otherwise

While it is great to come up with an original solution to solve a design problem, many times we do not need to reinvent the wheel. There are many common problems that have been solved in the past by someone else, and sometimes as an industry as a whole.

What I am trying to do at this step is to find out existing patterns that users are familiar with and would expect from it. Take for instance the hamburger menu. Mobile app users are highly familiar with this icon and the moment they see three parallel bars, it can only mean one thing; a menu.

Executing the design

Once these three steps above have been fulfilled, I can finally come out with a solution to the original problem statement. This step is the one others would consider as actual ‘designing’, where I arrange and manipulate elements of the design on the screen.

The most important factor is to make sure the design ‘functions’.

A large bulk of my time is spent here, and the goal of the training to speed through the assignment. I do not have the leisure to fine tune the visuals, so none of that pixel-perfect magic here. The most important factor is to make sure the design ‘functions’.

As this is an ongoing training for me, so far I have completed eight assignments (at the time of this post):

1. A mobile translation app screen
2. A desktop to do app
3. A mobile currency converter
4. An emoji keyboard web app
5. A colouring app
6. A flight confirmation screen
7. A Journal app
8. And a translation app screen

Did it pay off?

While the first few drafts can feel very unsatisfactory, continuous effort can help any designer to become more productive. The balance is coming up with something that meets your own quality standard while getting the solution out as fast as possible. Once you get the ball rolling, it’s only a matter of time where you’ll arrive at that quality of work you’re proud of, while staying on time.

Mark Zuckerberg, CEO of Facebook once said this,  “Move Fast and Break Things”.  As I work on this training more and more, I find myself gradually getting faster. Indeed I am also breaking things, but from there I know where I can improve and better myself as a designer.

The post Getting Up to Speed: Rapid-fire Design appeared first on Stampede: the strategic design & technology company.