UX design with Google Docs and Sheets — part 2
A complete feature planned, designed and iterated with a spreadsheet
⛱ Hey readers
This is the second part of the UX Design w/ Google Docs and Sheets series. To read the first part ☛ go to this article.
In this article, I will walk you through a real-life example in Transifex where we redesigned from the ground base the search filters behavior and component in Editor and across product, a change that has an effect (positive so far :) to thousand users and organizations worldwide. You can read the product update here.
⚽️ Our goal
The intention of the redesign, based on customer feedback and requests, was to create a solution that will be:
1. easy to use for users that are accustomed to keyboard or mouse
2. visually clear, authentic and inclusive, compatible with our design language
3. modular to work in different conditions and views and adaptive to future additions and functionality.
In the next lines, I will share how I approached the problem upfront, done my research and rationale outline, designed the UI, communicated and presented it to the team — by utilizing a single spreadsheet.
Keep reading…
😇 I confess
I guess there is an important factor I haven’t mentioned to this and the previous article about UX Design with Google Spreadsheets.
What’s the reason that forced me to use a spreadsheet?
I’ll attempt an honest critique to the newly molded design tools industry, which I admire — don’t get me wrong. I notice a fundamental issue with this new visual design tools and plugin- for-everything ecosystem.
The issue is that all we designers get so deep into the rabbit hole of fine-art that many times it is practically impossible for managers, clients, engineers to understand the lilliputian details that we are so proud of.
It’s just difficult to comprehend the effort and struggle behind it — and this is quite normal if you’re asking. We also don’t fully understand the connections between each line of code a Python routine.
We live in a representation but we don’t have to think that way.
The tools that assist us, accommodate an environment that is visual — it is an enhanced vector-based WYSIWYG editor — which is awesome because enables everyone to rapidly create extraordinary complex visual elements, but if you want to communicate this to someone who spends 10 hours a day writing code and this is the evidence of truth him/her or want to show a design to someone who half the day is in calls with clients and C executives and is familiar with numbers, charts, and diagrams, then a gradient in a button, a revised outlined icon set or a Bauhaus-like typeface with detailed Kerning — is not that important to them at that point.
We don’t not fully understand the intellectuality in other people’s work, but! we all can see and recognize effectively if there is or not logic into something.
We all understand if something makes sense or doesn’t. We all have this instrument* that can distinguish non-logical operations and conditions and this is what design should accommodate.
*Logic is the instrument (the “Organon”) by means of which we come to know anything.
http://math.wikia.com/wiki/History_of_logic
💪We have superpowers — in finding inconsistencies!
Another problem when we create and present prototypes to people is that all tend to hook on small inconsistencies, deviations of their current view and perspective.
If a box is a bit larger than it used to be someone in the room will notice it 99% of the time and this eureka moment can derail the whole presentation and change the topic from the solution and the logic behind an approach to the visuals, colors and the looks.
You don’t want that. Nobody wants that.
Besides, and I might sound a bit philosophical if a design is not clear and not understood the creator must step back, reframe the thinking, process and the format of the design and find new ways to communicate with the audience.
It is not user-centric. It’s user-caring that motivates us.
So instead of risking the whole research and design sprint to explain irrelevant questions about font sizes and colors, the solution is quite easy. Use a medium that is raw, novice and benefits discussion about the will and intention, and is not the mere representation*.
*Schopenhauer’s — Key Concepts Representation (Vorstellung)
http://critique-of-pure-reason.com/schopenhauers-key-concepts-1-representation-vostellung/
Remember that, it’s in designer’s loyalty to communicate all the little details, the fine interactions and animations, the aesthetics and visual balance of a design — which is exceptional and great — but also the assumptions, the study, reasoning, logic and user journey.
To be totally honest everything mentioned before has happened to me more than one times. There where times I had to explain that it is iteration1-wireframes prototype, or that some elements are refinements of our design library and we can try and test, or that during implementation we can align with the style guide but we should look behind the shapes, colors, and words and see if there is value in the depicted solution.
I know from first hand that it’s not good when it happens.
It leaves you with a feeling that you need to sacrifice the brain process, that the designs have no value, that you personally over-invested in the little details or haven’t done extended research.
It’s all false by the way. There is nothing wrong with this process — but it is something else wrong, the format.
📈 Dedicated to Lotus 1–2–3
As I said, because I’ve been there and faced all these communication problems with the team and stakeholders, I searched for new ways:
1. to document intention, logic, research, analysis
2. to compose information architecture, creative thinking, and form
3. to bind all elements under a project-like structure
4. to display prototypes and visuals not as a necessity
A spreadsheet if you look at it closely is pretty similar to a millimeter or grid paper which is what most of us used to mockup interfaces. I remember boxes of notebooks with a small or large grid depending on the class (Math, Geometry, Typography).
Moreover, a spreadsheet does not provide high-level visual design & prototyping tools (typography, vectors, color profiles etc.) — this is not a tool for design like Sketch or Illustrator — but instead it has a scripting engine that can help manipulate and generate data, make calculations, do conditional formattings with ease and lot more than a design software doesn’t have.
So this design-agnostic charisma of spreadsheets encourages you to stay focused to the core problem that you’re trying to solve and leaving the creative part to be done in a subsequent design phase.
And this was it. A spreadsheet was the medium for me to design everything. From competition analysis to customer request and of course — actual UI work, by painting the cells with color and creating dropdowns, menus, interactions.
🛣 Learn, Explore, Define, Ideate & Design.
I already wrote about my design process in a previous article. Based on this process, I created a spreadsheet with 5 pages named from those pillars or steps.
I will not explain more about each step of the design process but I want to focus on the Design because that was the breaking point in my experience.
Creating a design in a spreadsheet is challenging.
You don’t have shapes, no snapping, no components, plugins etc. — but you have cells, rectangles, the grid that you can use and create the basic structure of elements, components, and layouts.
With all this in hand and some pictographs, Unicode characters and emoji, I was able to create my design proposal for search and filters in Transifex editor.
The spreadsheet approach was so successful and facilitated so much discussion and debate that it was kind of shock to me as well.
I remember discussing it for days in our Design UX meetings and no one (really no one…) has ever mentioned anything about how this will look in the end but instead, the discussion was more about information structure, the intention of the solution, technical constraints, future additions, performance and value proposition.
We were all aligned, in the same page. We were in an intellectual, creative balance ☯️
As a person, I have to admit that when I see people get inspired by design, when I see my audience all of the sudden understand innovation, possibilities ahead, and vision — it is something that makes me happy and proud that I selected this path in my life.
Note: The spreadsheet approach proved to be really accurate. At the time of writing I re-discovered how close I was in the defining filter topics — or large groups that are most useful and important based on request and user input. It turned out that Analytics validated exactly the early assumptions.
👋Conclusion
There are times that people need to see rationale, logic, research and data and some other times they want tangible examples, prototypes, and vision.
For each audience, for each project, there are different rules and the creative thinking process should adapt to this new environment — you and I as designers should be flexible and agile.
This article is written to remind us that in order to communicate with users and design for the world you might not need fancy extreme animations to showcase your ideas, but you are able to utilize the most simple objects and products like a spreadsheet or a piece of paper to document, sketch and present your solutions — and in many times this representation of your truth will be better understood by coworkers, clients, stakeholders and users.
As D. Rams said, “Good design is as little design as possible”. If we can’t design with less that needed, then we will never achieve true simplicity in our work and thinking.
Thanks for reading.
