Being an UX designer and a UI designer in one person
Some tips to overcome the differences and avoid pitfalls
The differences between UX and visual designers are often discussed, and many people advise to have two persons for this roles, like Craig Morrison on usertesting.com in his article Why you shouldn't hire a UI/UX designer.
In general I agree with his opinion that you should have two seperate roles for UX and UI. But what if you're one of this UX/UI designers being pulled into both directions every day? I think there are many UX designers who also have the role of a visual designer.
Being an UX and a visual designer in one person
It doesn't matter how you came in to this position. Maybe this was exactly the person your company was looking for or maybe you grow into this role realizing that the experience a user has with your service or product is important.
Some tips to make your life easier
Orientate at the user centered design process
In general it helps to orientate at the user centered design process, that helps to not skip steps. You should always work iterative even if it's only one iteration. Read more about the process on UX Mastery.
Don't start with a visual idea
Many designers think in a very visual way and a new project automatically generates visual ideas in there heads. This is not a bad thing, but you should be aware that it's probably to early for visual design ideas. In order to be able to move on
- Write down or sketch your visual idea(s)
- Put them in the drawer and get back to them later
- Force yourself to start again with research
Research Phase - marketing research is not user research
In this phase problems can occur with mixing marketing research with user research - for example general values and attitudes like income, political or religious beliefs and so on are not very important for user research. They may be important for the visual design in terms of style, but for the user experience design concentrate on the goals of the users not on general values.
Some data from marketing research may be useful, for example the age of your users. Think of this when recruiting users for testing.
Design Phase - Don't make prototypes pretty
In this phase the workflow, wireframes and prototypes are designed. Take care to not drift into details like alignment, spacing or colours.
Often it's also hard to explain the difference between a wireframe and a design to a client or make it clear that the step before the actual visual design should not be skipped. I have the impression, clients are looking forward to the design so much, that they misunderstand a wireframe for that. Sometimes it then helps to make wireframes and also make a design of some small detail that isn't affected by interaction like a header or a splash screen. So you can give them an impression of how the design could look like and at the same time make the difference to a wireframe more clear.
This is a very tricky part. How do you make this difference clear? Do you have suggestions in this point?
Start testing with prototypes
It's important to start user testing already with prototypes. People give more easily feedback when the product or the screens don't look finished. They don't want to criticize something that looks like someone put a lot of work into it.
Also if you start testing at the stage of the design or even the finished product, you already did lot's of work that may need reworking.
After user testing, don't forget to rework it into your prototypes. And do again some testing before starting with the visual design.
Put your designer hat on - Visual Design
Now it's time for the visual design - put on your colourful designer hat (or maybe your black nerdy glasses) and start designing based on your wireframes.
To get fresh ideas and don't be to attached to the wireframes, make some rough sketches, play with colours and forms. A rectangle in the wireframe has not to stay a rectangle - it can be a triangle, a circle, a half circle...
Also remember that grouping and orientation can be worked out in different ways then putting things in a box. :)
Also find some time to test the visual design in user tests, you will get feedback if your design gives guidance what to do and is clear and understandable.
These are some tips for problems that I experienced. What problems did you have and how did you solve them? Happy to discuss this in the comments!