An internship pilot slash design school.

At the end of June, IBM Romania has started its design internship program. To kickstart this pilot, we put the word out and 10 brave students form the University of Arts answered the call.

Alberto and I were asked to facilitate an IBM Design Thinking workshop to introduce them into how we extract ideas and shape digital products.

We only had the day, so we had to scale down the process to a minimum of steps that would allow our students to get an understanding of why and how. The decision was to teach them about Personas, Empathy maps, As-Is an To-be process. At the end they would illustrate a customer journey to have an overview of what they’ve just created.

In the meantime we showed them examples of our sketch file structure. What’s a UX map, how does it look like, wireframes, symbol library, finished UI and how we send them through Zeplin to our devs.

At the beginning of the workshop we asked them to write down their expectations. While at the end they were to come back to those statements and let us know if their expectations were met. Lucky for us they were.

I had no idea how much thought goes into the creation of even a simple design.

All the students enjoyed the hands on approach and we were very delighted when one of them stated the above. It all went really well and both parties were happy with the outcome.

Soon after, we sent invitations to five of them.
Their experience was to be split in two. User interface basics which Alberto had ownership over while I had to ramble about User Experience.

School in July

We welcomed our rookies with fresh new MacBook Pros, lots of coffee and presented their learning schedule for the next eight weeks.

High on caffeine, they opened their .fig assignment files and moved the first pixel in hopefully a new career as a designer.
Obviously we were not looking to replace any design school but we’re confident enough that with sufficient reading they will move a lot faster than enrolling in a lengthy design course.

The curricula.

Week 1
– Intro meeting
– Open discussion about UI/UX
– Tools Overview
– UI Basics. About.
– Figma Tutorials

Week 2
– Design 101
– Design Systems
– Grids / Guidelines
– Figma tutorials — Tasks and freehand.

Week 3
– Wireframing
– Prototyping
– OS Specific
– Frameworks / CMS
– Tools and Dev handout

Week 4
– UX. Getting Started
– Design Thinking. Getting started
– Preparing for the final exam.
– Research

Week 5–8
Final exam — Design an application or website.

Reading

About Face: The Essentials of Interaction Design
The Brand Gap: How to Bridge the Distance Between Business Strategy and Design : a Whiteboard Overview (Aiga Design Press)
The Elements of User Experience: User-Centered Design for the Web and Beyond (Voices That Matter)
The Best Interface Is No Interface: The simple path to brilliant technology (Voices That Matter)
Don’t Make Me Think: A Common Sense Approach to Web Usability (Voices That Matter)
The Design of Everyday Things, revised and expanded edition
Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences (Voices That Matter)
Thinking with Type, Second Revised and Expanded Edition: A Critical Guide for Designers, Writers, Editors, and Students (Design Briefs)
The Elements of Typographic Style: Version 4.0
The Smashing books.

Design 101

To give our students a crash course, Alberto created a quick document that would cover a bit of everything they need to keep in mind when creating a digital design for a website or an app. For this we decided to use Figma as the tool of choice because it’s free and they can use it at home for practice.

SPACING

– The 5 rules of design composition and layout

– Embracing space in interaction design

– Space Visual Elements Principles

BALANCE and ALIGNMENTS

– Alignment Principles

– Balance Principles

HIERARCHY

– 6 principles of visual hierarchy for designers

– 6 tips for better typographic hierarchy in web design

– “Hierarchy’ Design principle of Graphic Design

LINES AND SHAPES

– ‘Shape’ Visual element of Graphic Design

– ‘Line’ Visual element of Graphic Design

– What is brand identity? And how to design and develop a great one

COLORS

– Color meanings and the art of using color psychology

– The psychology of color in web design

– ‘Colour’ Visual element of Graphic Design

CONTRAST

– Contrast in Design Principles

TYPOGRAPHY

– How to use typography principles creatively

– How to choose fonts for your web design

– 14 typography crimes to stop committing

– ‘Typography’ Visual element of Graphic Design

TEXTURE

– Innovative approaches to texture in graphic design

– Texture Visual Elements Principles

SIMPLICITY

– Simplicity in Design

PROXIMITY

– Proximity in Design

FORM

– Form in Design Principles

FUNCTION

– Function in Design Principles

REPETITION

– Repetition in Design

BRANDING

– The importance of bringing branding to life

– Branding vs. brand identity vs. logo: what’s the difference?

Practice makes perfect.

Easiest way to start designing is to replicate other designs. So a useful exercise was to get an app or website from Dribbble, have to copy it and then continue with designing a feature of their choice. This would enable them to use all the learning above while having a starting point.
They would need to use different imagery and create their own iconography while keeping consistency.

The challenge

Having been inoculated with the proper knowledge. We chose to test what they have learnt and also introduce teamwork, a task that is of interest for them and also of a good incentive. In their case this was the University of Arts website redesign. They would need to go out and speak to their colleagues from different majors and years and also teachers.

Up until this point they mostly worked on their own as we would individually reviewed their work. This created a bit of competition amongst them but also they would help each other with more difficult tasks. Often we’d find the same solution — technique wise — for an UI element in all of their designs.

With this challenge at hand, they needed to start working as a team. We gave notice that we wouldn’t interfere anymore and they would decide amongst themselves on how to proceed, and who does what.

An interesting outcome.

As expected, things got heated quite quickly. Their team was composed of five members. Each of them had their own strength. Leadership, illustration, structure, typography, scale. They argued, rebelled, formed alliances and made peace threatened by the mongering deadline.

As time was running out, they quickly realized their strengths and assumed roles. Started booking rooms, using design thinking, hunted for markers and post-it notes, took pictures and documented the process and progress. We were later invited to see the personas, empathy maps, user journeys and wireframes.

Alberto and I stood in awe. And damn proud.

The outcome.

You could hear their hushed voices as they’d nervously repeated their part of the presentation. Their pulse jumping for each new person that would enter the Atena conference room housing their final exam.

Their infused common knowledge would be slowly released to alleviate IBM iX and Aperto’s leadership aching curiosity. You needn’t be a telepath to read the minds of the people watching and wandering if the investment was worth it and ready to be repeated.

Working lunch

It came to us as a complete surprise when the iX Design Lead arrived with a stack of pizza boxes and informed us this will also be a working lunch — Awesome.

In between bites and chewing sounds, our brave students started their oral spectacle. Suddenly our greatest concern shifted from giving a performance to having our guest not choking on their pizza while laughing at our jokes.

Having finished their slices, everybody focused their attention hypnotized by the projector’s light show.
Each student presented a step: Research, personas, empathy maps, user journeys, ux map, wireframes and the final UI Prototype.

One of the girls needed to take a chair to avoid causing a quake from all the shaking. Once anchored in the safety of her four legged inanimate friend, she proudly continued presenting the persona and empathy map.

People were surprised to hear how the user journey was made intentionally complicated by not having the persona pass the entry exam. And the awe came with the 3d gallery presented in the prototype. An actual 360 virtual tour available in a clickable prototype.

All this in close to three months? Wow!

Yes. All this.

In their own words

Conclusion

Having an arts and crafts background does not provide you with an advantage in the UI/UX world. Color theory might help you, but that’s about it. In all fairness our students had 0 background in design.

They exceeded our expectations by all standards. I am proud to say that they can get hired anywhere and can answer any question an interviewer might throw at them.

We hope that for the next session we will be able to improve the process and are open to any kind of feedback.