Re-designing Sketch
How to improve something that is already very good?
Re-designing an existent product is not an easy task. Many people think when they hear about “re-design” as the process of making the product from scratch again, at least in design terms, but that’s not always the best approach because you’re taking huge risks. “What happens with the current value of the product?” That’s the most common concern, and just by that fear to not lose the product’s values, many of them continue their lives just stacking new features. It’s understandable, but in the long term, that product will lose the capability to innovate and will become a “Frankenstein’s monster.”
I have some ideas for a more effective re-design process, but to test it, I don’t want a crappy product to work on because that would be easy to solve. I’m choosing Sketch for 2 reasons:
- First, it is not a bad product; actually, it’s pretty good and is a very valuable player in the market. How to make better something that’s already very good? That’s the kind of challenges which are more fun.
- Second, I know it well because I use it every day. Having a deep knowledge about the product is quite important.
Before I begin, a disclaimer; usually in a real re-design project you should take into account the feedback from many users and make a deeper analysis with stakeholders and other designers. In this case, for practical reasons, I’m only taking into account my feedback. It’s not ideal, but let’s say that for the purpose of this exercise, it’s just OK, because I don’t have a team to do it right.
First steps
First, we need to analyze the product from a higher perspective to a more detailed one. From top to bottom. We need a clear picture of what needs to be changed and what is working well (the current product’s value). You can read many books on how to make this analysis, but just keep in mind a really simple idea:
“What is not broken, doesn’t need to be fixed.”
When I said to start from a higher perspective, I meant making the evaluation of the product’s core objective:
- Q: Is the product achieving the basic user’s expectations?
- A: Yes, so it’s not broken here, we can continue.
A negative answer to the previous question will require reviewing the product from their foundations, reviewing the strategy, the assumptions, the KPIs and many other fancy terms, but I don’t want to bore you with that. Let’s move on to the fun part.
Technical Analysis
Now let’s get started analyzing technically how the product works and how it is solving the user’s needs, starting with the layout. In Sketch, it looks like this:
Each block of the layout has an objective, and based on each objective we can figure out what can be improved. For example:
- Block 1, objective: Navigating among the layers and pages. It’s not broken entirely, but we can make some minor improvements at a visual level to increase the understanding of the showed information, the readability.
- Block 2, objective: Having open ‘easy to manipulate’ big board. Definitely, it’s not broken, I love how easy it is to create my artboards and to drag them to organize and build visual structures. Nothing to improve here (for now).
- Block 3, objective: Having all the necessary tools to manipulate the properties of my objects. It’s kind of broken. Why? Because even when it’s way better than Photoshop, it can be a little bit overwhelming for new designers to understand it. It’s not a critical blocker, but there is some visual work to do, to make it more understandable and visually more digestible.
- Block 4, objective: Honestly, I have no idea, but I guess it is to have high-level options to do something (?). This part is broken. Why? Because it is taking a lot of space on the screen and the value for my workflow (remember, I’m only using my feedback for this exercise) is minimal. It can be better and even can help to improve the value of the whole experience.
Good! Now we know our main challenges. Of course, each challenge can be composed by smaller challenges, more detailed ones. But again, this is just a small exercise. Summarizing, until now it took us a reasonable amount of time to discover things that will help us to improve the product without damaging the core values. In other words, we can move on with the product improvements reducing risks.
Style / Branding analysis
Sorry for the use of the word “branding” here, but the English dictionary still hasn’t invented a word for the “product’s visual personality,” a concept that is not the same than what we understand as Branding. I’ll probably need to write another article to share my thoughts on the matter… Anyway! I separated this topic because a product’s personality is spread among all its components. So, what is the state of Sketch about this? Not bad but definitely it can be better. Right now Sketch is using a lot of native visual components. Luckily, Apple provides a very decent components library, but if we want to move the product to the next level, Sketch needs to have a more original and distinguish personality.
How can we do that? How can we discover what the ideal product’s personality is? Sadly, again for the purpose of this exercise, we have to skip a lot of this work, because it’s not easy and takes time, usually involves a lot of discussions, moodboards, interviews, etc. So I’m going to take a shortcut analyzing this part from a very subjective perspective.
For me, Sketch is clean and useful; those are the best values that the product has. It is not as messy as Photoshop, it’s friendly and just using it a bit you will notice that it shares many of the Apple’s values about UX. So if these are the visual added values, let’s make the improvements based on that. Designing something very clean and even easier to use.
The results
I’ve worked on this for a week, and after some very productive days, here are the results:
Let’s see the improvements based on each block in more details:
Block 1
The challenges for this block were just a few; the main one was to improve the readability. To increase the readability first, we have to understand the hierarchy system of the elements:
- Pages > Artboards > Layers / Groups > Layers / Groups (…)
Considering that, the approach for this challenge was to make a better distinguish of the hierarchy without touching too much of the good UX that the product currently has.
It is not a huge change, but this combined with a more original and clean visual style, like the decision to keep the zebra stripes only for the open artboard, it seems like an effective solution for this block. Moving on.
Block 2
As I said before, there are not too many things to modify in this block. Whatever, all this clean space give us opportunities to move some general features, like the zoom or the manage of Grids and Guidelines to this part. I’ll explain the reason in the Block 4. As example, with the Guidelines activated the block looks and works like this:
Putting these options here, mainly the ones related to the guidelines, it improves the experience. In the original version, I haven’t made too much use of these features, not because I didn’t want to, it was because the features were too far away from the main interaction in the board, it was less accessible. This change fixes that.
Block 3
This part is complicated because it changes according to every selected object. I’ll use just one case to explain the improvements, which is mostly about visuals. The “stacking sections” approach is pretty clever, but the visual organization of some objects with this solution now is less messy and cleaner.
As a bonus, I always have my Craft plugin displayed, it’s very handy. So thinking about plugins, I made some minor improvements. Although the major improvement will be explained in the following block
Block 4
Here is the heavy work. As this block is the one that needs more attention, let’s see the improvements from scratch.
I divided the block into 3 areas:
Area 1: The main objective for this area is to have an accessible way to add new objects. Right now, everything is merged into just one button, but there are 2 kinds of objects that need special treatment: Symbols and Text styles.
Symbols is a very powerful feature that helps us not just to save a lot of time, it also helps us to keep consistency across our designs, so if all the symbol structures we build in our designs can be more accessible, then it will be clearer to understand how to use these symbols better. Many designers with the current product don’t even know that this is possible to do, and that’s a huge problem to solve.
Text styles right now live as part of the properties bar. We can introduce best practices if we are to put these styles as part of a cleaner structure. That’s very important because when you implement a design, you have a predetermined structure in the code (h1, h2, h3, p, links and more HTML labels). It would be great if your design matches with this structure, that will encourage best practices around texts from Sketch, turning designers and front-end engineers into better friends.
Area 2: This area is made to be versatile because it will change according to the elements we’re selecting. So the version for the case when we are not selecting anything will be to allow favorites objects. This should be a very practical feature because we always have objects like Buttons, Symbols or anything that we are going to use a lot across our design, and it will be nice just to drag them into our artboards.
In the following case, I’m selecting something, a shape, the area changes according to the needs, because for example if I’m selecting a vector shape like a square, then I’ll need access to options to manipulate that shape. That currently exists, but now they have a little bit of more sense.
There are a lot of other cases besides shapes where this part of the block can be more useful; texts, symbols, images, etc. Each one with their own needs. That should turn this part into a more useful and smart component. I’m not covering all the cases, but I’m sure you get the idea ;)
Area 3: This area is for general options, starting from something that Sketch right now is missing and is vital; the managing of plugins. Yeah, I know, you can find those options in the software top bar, but considering that plugins have become a very active community that is expanding the possibilities of the product itself, they deserve a better place, don’t you think?
The other options are the same as we see them right now in Sketch. Just very minor adjustments like improving the way buttons look. This has been intentional to reduce the height of the whole block. Every pixel that we were able to reduce, it would be better for the Block 2, where all the fun things happen.
You probably noticed I removed some options from this Block, like options related to the guidelines and grids, and the zoom option. The main reason was to clean the room for more priority features. Let’s be honest, zoom is a heavily used feature, but there are shortcuts for that, which turns the element into a more informative object than actually an interactive one. And about the grids and guidelines, as I explained before, the problem is accessibility. These options are closer to the main object now: the artboard. That should help to increase that missing usability.
Bonus
What is a great software without a great welcome box? Again, the purpose is not to reinvent the wheel because right now Sketch has a pretty good welcome box. But just as a personal suggested change…
And that’s it. It has been a really fun little project. I hope this exercise can help to have a clearer picture about the process behind re-designing a product, applying good practices and overall, just using common sense in every small decision. I’m sure in more talented hands the results could be better, that’s why I have a final suggestion; don’t let your personal thoughts interfere with the major objective to make the product better, involve other people from your team if you have the opportunity.
Have a nice day!
