Logo Siclo
We shape Technology with Passion

UX and UI workshop

time 5 mins
Share

On June 11th, Schoolab Asia welcomed Eric (our CEO) and Paul (UxUi designer) to run  a workshop about the nature and importance of UX/UI when designing an application or a website.

Schoolab is an incubator and project accelerator specialized in innovations; they support and accelerate projects led by start-ups as well as public organizations and large companies. We have had the chance to meet several start-ups among their incubees, who attended Siclo’s workshop.

 

What are UX and UI ?

 

When talking about UX and UI design, it is important to distinguish them.

“UX” stands for User Experience; it prioritizes functionality, usability and user adaptability in the design of a product. UX design aims to make the usage of à digital product as pleasant and/or rewarding as possible. In a metaphorical car, UX design would be making sure that the seats are comfortable, that the wheel is pleasing to touch, that the sound of the engine isn’t aggressive for the driver’s ears. It is everything that makes the product “feel good” for the user.

 

“UI” stands for User Interface. That means that the UI is everything a user will directly interact with as they use the product; the job of the designer is to make it as easy and intuitive as possible. In the car we talked about earlier, the User Interface is everything that the driver uses to drive: the wheel, the mirrors, the pedals, the hand brake... A user interface is very similar to a joke: if you have to explain it, it’s not that good. A simple look should make it obvious for the user.

 

The benefits of a (great) UXUI design

  • For early stage entrepreneurs, UxUx design is their first opportunity to turn their vision into something tangible, visuals that can be used to “sell” the vision to potential partners (Investors or future team members…)

  • When put on a (properly targeted) audience hands, visuals are very powerful vehicules to trigger users feedback, test assumptions and get closer to finding a product market it. Indeed, although it is very hard to give feedback out of the blue, giving feedback on prototype you can see and interact with is a lot easier

  • Changing a design is a lot easier than reworking a product once it has been built. Investing to get the UxUi design right will save a lot of efforts and waste on the full product life cycle

  • It allows you to optimize your budget, by laying down everything you want and how you want it to look before starting to code. Would you consider building a house before an architect has drawn the plans?

Siclo's design expert, Paul Sagot used this opportunity to teach the attendees the process of a good UX/UI design.

UX/UI design works through a four steps process:

  • Understanding: Understand the business objectives, the users' needs, the competitors…

The goal here is to understand the context of your product before you start designing it. You need to know what you need it to do, but that is not all of it: through interviews and surveys, you can also learn what your future users will need the product to do. In addition to this, a thorough benchmark would allow you to know what is the state of the market you are trying to enter and how you can differentiate yourself from your competitors.

Finally, establishing the limits set by technology defines the amount of liberty and creativity you have at your disposal while designing the product.

 

  • Sitemap: Organize every function of the app/website to obtain an overview of it.

By laying down a tangible schema to represent the page architecture of your future product, you can have a clarified vision of the function of every page/screen of the future product. This is a crucial step in understanding what you are doing and where you are going.

 

  • Wireframes: Define screen elements and interactions.

There are two important rules to creating wireframes for your application: you want them to stay as simple as possible and keep it monochrome. The point is not to design beautiful screens, but functional screens. A successful wireframe is the skeleton of the mockup.

 

  • Mockups and prototype: A fully-designed prototype.

Once you have completed all the previous tasks, it is time to add less practical elements: the colors, the fonts, the images and the button icons, for instance. The main question when realizing a prototype is “What do I want my users to see first?” Call to action elements, titles and a good contrast are essential here.

 

The attendees were especially engaged in the presentation as Paul asked them to try and design their own wireframes. The participants had to draw their own perception of a good login screen, that would be easy to use, and to link it with a homepage offering a feed of posts (title/image/description) as well as a "Create your own post" page. By giving them precise instructions, Paul allowed them to work with their imagination in a quick, productive way. He used this exercise to make every attendant understand exactly what UX and UI are about.

 

In only an hour and a half, the attendees learned the principles of UX/UI design and many of them appeared to be quite inspired by this new knowledge! If you wish you had been there, keep an eye out for Siclo Mobile workshops, since it is definitely not the last one we will present.


Jun 13 2019