Digital Product Designer Workshops

This is the presentation of first workshops for digital product designer. You can also check the second and the third or read the full story.

Download presentation

I've chosen manatees because of their natural ability to adapt. They are also super cute and look like swimming sausages. Also, the cover itself is strongly inspired by O'Reilly series.

In the introduction I asked everyone to introduce himself, talked a bit about the open form of the workshops. People should be able to ask questions and share comments at all times.

We can partially manifest our product through interface. Interface is the space where the things meet.

Therefore, interface is a space of interaction. It defines how users interact with things. As it may sound a bit abstract, let's try to see some analogies with reality.

We can easily compare breadcrumbs with Hansel and Gretel, as basically it's all about navigation and re-tracing own steps.
"Jaś i Małgosia" is a polish title.

Graphical User Interface is just a reflection of everyday things. Of course, these things melt together and we can't talk about differences between online and offline nowadays, but it's nice to realize it's not so abstract.

A door is a really interesting example. Not only because its clear analogy to login functionality, but also thanks to Don Norman.

As we've seen that it's about the reflection of everyday things, we can state that also rules that were used to design these things can apply in the Internet environment.
We should design our interface so well, there is no need for description. It should be self-explanatory.

What is Norman door? How can we benefit from that knowledge? Interface should be as clear as possible in communicating idea.

Good interface is transparent, meaning that we are not aware of its existence while using the product. It's like shooting a gun or playing a guitar - you don't really think about performing an action, you just do it.

As we already got a vision of what's a good interface let's think a bit on how we can execute it. During the process, we have to remember to always work within the context. It may vary, but let's divide it in four groups: users, resources, technologies and the company.

Users are our prime focus. There are many ways to define the needs and find out more about our loved ones.

It's nice to think that your user is drunk. To defend our thesis, we have to figure out what makes a drunk person drunk. What's the anatomy?

Blurred vision is one of the points.

Even though page is blurred, we are still able to perform actions thanks to the visual hierarchy and good contrast.

Drunk people get distracted easily. If it's the pre-game and you want to go to the club you want to be there instantly. In reality, you have to get a taxi with your address, know where you're going, have valid credit card, pay for the entrance, get to the club, interact with people. Take your user step by step.

As in everyday life, when you are driving on a highway, you get to see the speed limit sign twice. It's the same with interfaces - make sure that user really wants to delete whole project, he may not understand or see it at first.

Good example of the repetition and its importance is the case of hamburger icon.

Drunk person gets emotional really fast. There is a thin line between love and hate.

Sometimes it's just best to look above the shoulder and watch the drunk master.

Most importantly, a drunk person is not stupid. This person is still intelligent, it's just about being drunk.

Next thing we have to remember about are resources. We have to be aware of our budget, roadmap and the time given. Not only that, but also capabilities of our team and market.

As designers, we have to be in close contact with our developers in order to be familiar with technologies they're using. Perhaps it's better to use already made elements that exist within particular framework, rather than re-inventing the wheel.

We live in a capitalist world and we have to adapt. Not only that, but also the processes within the company are crucial.

Typical design process (does not exist) would start with definition of the problem, afterwards you proceed with a fast sketch that's being transformed to prototype. Once you are satisfied with that, there's a development after which you try to measure your progress and iterate.
It's important to remember that these are just guidelines, sometimes the problem is so easy to solve it may be best to start development immediately.

We can't really talk about something 'typical' or 'classical' in terms of product design, as it's constantly fluctuating.

We start with defining product. What are the goals? Who are the users? What's the market potential? Do your research.

Once completed and we got the clear scope, let's sketch a bit. We'll discuss it in details soon.

Let's get more into details and here is the time to give some colors to our sketch. User interface should just be a boost to user experience. Therefore think deeply about visual hierarchy and what's the goal behind this big, red button.

Once everything's set - time for a development, during which it's really important to talk to developers. There may be some edge-case scenarios you have not thought about. How does this look like hovered?

Somehow we have to know if we've succeeded. There are various of sources. Tables, heatmaps, users behavior. We all need to know that.

If we have performed analytics well, we probably know by now that something can be upgraded. If not, then we just follow the roadmap and introduce new, better functionality.
Repeat! Till you die, probably. Never settle.

As we already agreed upon the importance of the context, we have to define our own. In our company we got two developers: front-end and back-end. We also work with our CEO.

It's not really the MVP. There are many products out there, we have to think about the competitiveness of our first version of the product. It's not the minimum viable product, but the minimum product people are willing to pay for and / or engage with.

Let's work on the roadmap a bit. While designing, we have to have context in mind, as stated before. One of the crucial elements is the page's capacity that's going to be defined by our roadmap.

That's the outcome we want to achieve: simplified flow of user. How can we get him to convert in fastest possible way? At this point, we have to figure out how our user got access to the website as well. Was this ad? If so, was this ad of a particular dog, or a whole platform? What about search engines? What about partnership websites? We got to answer many questions at this point. Designing is about defining and meeting the needs of the users.

As we communicated via e-mail I would also like to introduce Slack.

Workshops started with defining functionality, given the two groups of users:

  • 1. People who like dogs, but can't have one for various reasons.
  • 2. Animal shelters, dog owners that are travelling a lot and foundations.

After brainstorming we took functionality that was most common for groups, and transformed everything else into roadmap. Then we've drawn user flow. As homework participants were supposed to define flow of adding a dog to database.

Second workshops →