Design Thinking for Web Redesigns

clem-boss — Sun, 23 Oct 2022 12:21:06 +0000

Since I've been working in corporate world, I can see that web redesign projects always lack on planning and methodology, resulting in solutions that does not solve any problem and that took a lot of time and effort to build.
Working in a team can be a bit messy, and we might lose sight of the bigger picture, so this article has the purpose to give concrete plan of delivery for a meaningfull solution that's ready for development, starting from a user experience problema.

Each phase can also be understood as semi-diamonds. Empathise is a time to diverge, define is a time to converge, ideate is a time to diverge, and so on.

IDEO, Divergent and Convergent Thinking

1. 💗 Empathise

This is the time to do interviews of actual users. Every use has to be considered, this work really needs to be exhaustive as we're in a "diverge" phase. You can look for templates to build a few really different personas based on those interviews.
Even if you don't see now how it will benefit your project, even if it might feel like a waste of time, trust the process and do your best working on your personas or you'll regret this later, asking yourself why didn't your project reached expectations.

Mindset : craving for accuracy. Don't judge, don't project your own needs, don't sort information you get.
Delievery : minimum 4 different personas, interviews of users filled with questions about their expectations.

2. ✍️ Define

Now it's time to take a paper and a pen, and to try to formulate the problems that emerged from phase 1 in the most precise way possible. It's good to start by "How to ..", "How could we ..." to produce a convenient output in next phase. But for now, only focus on formulating this question really well, an don't try to awnser it yet. You should really take the time that's needed for you to be perfectly happy with your problema.

Mindset : synthesizing everything discovered through phase 1, trying to both encompass and be precise.
Delievery : A problem statement sentence, but a really thoughtful one.

3. 💡 Ideate

Let's gather all your collaborators and do a brainstorming. Guided by the problem statement elaborated in phase 2, you would produce very different propositions or ideas. In order for those ideas to not be all similar, and get the most of this exercise, you should work on preparing an environment that's not judgmental. There's no bad ideas, and one "out-of-the-box" approach consists in playing a game of The Worst Possible Idea to generate new ones.

Mindset : not judgmental, focused on producing a lot of very different output, as you're in a "diverge" phase.
Delievery : Photos of the brainstorming whiteboard with sticky notes all-over. Drawings / writings that has been made by the team. Keep everything.

3. 🛠️ Prototype

We're not done yet, so this is not about the final prototype that you do on Figma. You rather do paper prototypes that doesn't take a lot of effort to make. Card Sorting can be a way to prioritize and gather information regarding sections of a website, and Crazy Eights can help you find the most appropriate layout for your web interfaces.

Mindset : keep in mind it's for testing and it's not the final output. Find a great balance between rapidity of execution and realism/ projection.
Delievery : Low-fidelity prototypes.

5. ✔️ Test

Here, a designer's ego might be threatened. Try to make the users you've identified during phase 1 to interact very purely with you prototypes. The difficulty here is to not try to guide their usage, but you rather observe what comes from the interaction between your user and your prototype. Tell yourself that every problem you might discover is an opportunity to improve.

Mindset : Observe, analyse, don't guide the user even if it feels awkward.
Delievery : Notes, or maybe videos of the user/prototype interaction.

To conclude, polyvalence is needed for an UX designer to be great, because each phase is very different in it's mindset. Also, for most of us, it costs effort to erease our pre-convieved ideas in order to only rely on proofs that users gives us.

Sources: Interaction Design Foundation, IDEO

Pure CSS Animations : A Walkthrough [no-library]

clem-boss — Mon, 17 Oct 2022 16:25:12 +0000

This is a walkthrough of what's possible to do animation-wise with only CSS.
It’s a good idea to reduce the use of third-party packages or modules, in order to keep a project light-weighted and stable.
That’s the reason why a developer might need to watch out for those pure CSS tricks that allows to do almost anything that's needed, and it's easy to implement in any web project.

• Keyframes Control

@keyframes my-animation-title {
  0% { transform: scale(1); }
  100% { transform: scale(1.3); }
}

Use the @keyframes at-rule controls to set different steps through time. Those steps will be displayed on a timeline based on the value in percentage before each set of properties.
You can set as many steps as you want.

in the example above, 0% and 100% can be replaced by from and to

To use it, declare the identifier in a css animation property, also as the duration.

• Animation property

animation: my-animation-title 1s;

Those 2 values are sufficient to begin to see something moving but there's a lot more that's possible to set. This property is a shortend for 8 animation-related properties that are :

<animation-name> corresponds to the @keyframes identifier.
<animation-duration> is the time between the 0% and the 100% steps.
<animation-timing-function> indicates the progress of an animation through time. Possible values will be linear, ease-in-out but also steps(3, jump-start). In that case, the animation will mark 3 stops, excluding the 0% step.
<animation-delay>, expressed in seconds, can be either positive or negative. It corresponds to the delay before an animation starts, and a negative value here will cut off the start of the movement.
<animation-iteration-count> is the number of times the sequence will be repeated. It's possible to either use a number or to use infinite keyword.
<animation-direction>: by default, the animation is going from 0% to 100%. Here you can set a reverted direction or you can alternate between normal and revert by using alternate.
<animation-fill-mode>: when the animation is finished, do you need to reset the initial position of your element or would you rather want it to stay at it's new state ? This is what can be set here, possible values are for example forwards or backwards.
<animation-play-state> here, only 2 values are available: running or pause. Use pause to interrupt anytime while keeping current position.

There's no need to follow a certain order, just place values inline and the corresponding properties will be recognized.

You can use multiple animations for the same selector, by separating each group of values by a comma.

Here's a Sandbox where you can experiment everything listed above.
Have fun with it !

Banner Image: Etienne Jules MAREY, Cavalier Arabe

DEV Community: clem-boss