Step 2: UX/UI and Design

Sean Jeon
BCIT New Media
Published in
3 min readNov 28, 2014

Now we are thinking about how people use it and how they see it!

Even though this post is about web design, but not yet. Be patient. We need to think about User Experience (UX)/ User Interface (UI) design first. During this time, we need to make many prototypes and user tests.

1. UX Design

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product.”

Simply how can we make it EASY to USE logically

So now we believe we have well thought and well made wireframe that contain our belief of how user will use it. Let’s make a paper prototype. Sometimes it sounds silly (like kinder garden homework), but it is very useful to find out how many step the user take to finish a task(s). Make sure we are testing with real contents for the task. No more dummy text.

WildSide Low Fidelity Prototype

Then we need to record how the testers use it with their feedback.

Do as many as possible for this test. Do not guess that users will use it the same as we do. And try to find out how users feel out the task.

“We should show users the ‘Thank You’ page once they have finished signing up.” — UX Designer

2. UI Design

User interface design (UID) or user interface engineering is the design of websites, computers, appliances, machines, mobile communication devices, and software applications with the focus on the user’s experience and interaction.

Simply how can we lay them out for users

This stage we can check main layout issues. Where actually people check first and how long does it take. In this prototype, we can test with color and with actual browser. If you are working with team and have a web designer, please do not work by yourself. We need to work together.

WildSide Medium Fidelity Prototype

After the testing, we need to make user feedback document and talk with the programmer for future step.

“We should move the button on the top for everyone” —UI Designer

3. Visual Design

WildSide Website Prototype

While we are doing UX/UI testing, we can think and work about visual design. We can finalize the possible colour schemes with detail design theme. When we think about design, we all know, we need to think about trends, but do not think that is the only way we need to do. Trends are just fashion. It is not the law! Think about how long we are going to keep this website, who is going to use it, and what is the purpose.

Also we need to think about what type and size of image we need for the actual website. This will save lots of time when we are coding actual site.

When we make the visual design, we need to prepare future change too. Keep all of your work files and originals.

This stage is not step by step. We need to think about whole visual packages. And there will be lots of testing, and fixing. So open your eyes and ears, but focus on the purpose and target audience all the time.

--

--

Sean Jeon
BCIT New Media

I am a student of New Media Design and Web Development at BCIT. IA,UX/UI, and graphic designs are my speciality. Let’s Talk about it.