Recently, when I was studying the design of Dashboard, I saw an article on Medium about the design process, which summarized the author’s experience in the design process over the past four years. After reading it, I gained a lot and translated it to share.
1. Before design
Ask the client to provide three or four examples of what he likes, what he likes, and what he expects from the design.
Communicate with development and product; The goal is to eliminate as many problems as possible before starting development.
The “user profile” is super important. It lets you know who you’re designing for; When the solution is ambiguous, it can be effective in helping to pick the best one.
Set a clear goal. If it’s a new project, make sure you and the client have clear design goals. Anything can be a goal, so define it.
Create a project folder. For example, you could have an Inspiration folder, where anything you see that feels good is thrown in for moodboard later.
2. Lo-fi phase
The whiteboard phase
Here’s how I work:
If you add a new feature or redesign a process, everyone sits in a meeting and sketches ideas on a whiteboard, on paper, on an iPad. This allowed us to put everyone on the team in the designer position (product, etc.); Pick two and see which one is better.
This is where we talk most about extreme edge cases, and at this stage, it’s very important to define the edge cases. Don’t wait until the design stage to think about these issues; Even worse is to wait until the development stage to think about it, you’ll waste a lot of time and energy.
List all the information on the screen (what information the user needs to enter)
List all the information to be entered by the user, and use the process.
Write down exactly what the user types into a particular page and how he or she achieves what he or she wants.
Write down all possible scenarios
All dashboards and apps have different states. Don’t skip this step. During the design phase, we want to make sure that we address all of these situations.
Create stunning diagrams in Sketch that look cool. But a lot of times, especially when users first enter your product, they will see other states of your product (initial, blank…). So be prepared in advance.
Below is an example of how we deal with empty states.
Prepare the first Diagram
This step directly affects the lo-fi prototype.
Thanks to the whiteboard phase. We identified all possible states, user input, and desired goals.
In order to summarize the interaction flow, I drew the Diagram, using only squares to represent each page, with the name of each page marked below.
Camunda Modeler is a Diagram drawing tool that allows you to export SVG and color it into Sketch. (But opens slowly) : Examples – Camunda BPM Platform
3. Design phase
Mood board
The design phase started with the creation of the MoodBoard, as there were many images collected in the Inspiration folder. Before I started drawing at the pixel level, I mainly used moodBoard to discuss my ideas with colleagues and describe some visual concepts.
The first draft
Design is always a continuous process, and there is a long process of iteration before satisfactory results can be achieved.
In order to get the first feedback and start the discussion, I didn’t think about pixels in the first draft, I would drag and use the elements I had used before, and I had a decent page in less than a day.
You can start with a simple prototype to test how the pages relate to each other.
Write down instructions (signals)
Guiding signal is one of the key factors of user decision, and is an important part of design.
There’s nothing worse than a beautiful design with a confusing visual language and users struggling to figure out what to do next.
First trial test
A first draft can quickly create a prototype in Marvelapp or Invision.
It’s great that you can share a prototype link with other people, take a prototype to validate a process or scenario, talk to each other,
This way, you can easily test problem points and have a real user validate a design decision without wasting energy and time.
The rules
Especially when working in a team, it can be hard to keep your files clean! However, some general rules can be established.
A powerful sketch renaming plugin is recommended: Rodi01 /RenameIt
Tip: Put everything on the canvas
I used to have the bad habit of carving a beautiful title when the rest of the board was blank.
Later on, I learned to put all the content elements into the drawing board first, first out. It’s much easier to go into detail when you have the overall conceptual layout.
Create UI elements like Legos
One great feature of Sketch is “Shapes with Resizing Properties”. This makes it easy for everyone on the team to design.
Our Sketch files can now be completed by drag and drop. You can give any of your team members a blank canvas and they can create almost hi-fi drafts.
So, we can skip the wireframes and start with real pixels. This greatly facilitates the process of turning wireframes into real designs. Any PM can create wireframes, which I can then easily convert to hi-fi.
4. Evaluation & delivery
Rule description
The main goal was to communicate my ideas to the team and make it as easy as possible for developers to get the best resources for them. This to me is definitely the most important part of my job as a designer.
Documenting all interactions is part of the job. I will write this at the bottom of each page in Sketch.
It is a good way to deliver a design with an explanation of all the key points. So everyone can read your drawings quickly in the future.
Diagram
Show the Diagram during the presentation, but also type it out and discuss it with your team. But now I think there are better options, like the final prototype.
The final prototype
Prototypes with interactive jumps are important.
There are usually 3-5 drafts before the final prototype.
I usually export all the states ready in Sketch before.
As mentioned earlier, you can use Marvelapp or Invision, and you can add comments to complete the interaction design instructions.
If the work is done according to the requirements, the author can check the work in the real pixel state and check the flow.
Short videos are better than documents
I used to make a video showing the whole operation process with the screenshot of the page and send it to the customer for report. Using videos to explain everything I’ve designed.
It was a good validation and consolidation process for me before the presentation. During the presentation video, I figured out all the issues and clarified all the interactions I had designed.
This is also a good way to work for remote teams. Everyone can replay the whole thing and think about it whenever they want.
Dynamic effect
You can use After Effects or Principle. Kinetic efficiency is a good way to explain how you want this or that to move or hover.
Styleguide
Another key point for engineers is to understand how events react in different situations.
Imagine the error state after typing an error message, the unclickable state of the submit button, where to place the cursor in the input box, and so on.
Development would be happy to have a common component document that shows the different states of all the elements.
5. Final validation
After delivering the design to the development students, we focused on the next stage: validating our design
Inspectlet / HotJar
When the design is turned into code, Inspectlet or HotJar will be used to observe user usage if possible.
I’m always excited (or frustrated) when I see how users are using the Dashboard navigation bar or what they’re doing on their personal pages.
Inspectlet is very useful in collecting information about all users. It is also suitable for large projects.
Inspectlet is used in our corporate projects.
Mixpanel
Mixpanel is great for validating our goals (especially the goals we set at the beginning of the process).
Mixpanel can count how many users complete a particular process; How many users lost before setting up an account; How many people jump from the home page to the storage page and our most valuable product page.
For my personal site, I use the free HotJar feature to generate heat maps and record how at least a few people are viewing my personal site.
Google Analytics
I can’t write big projects, but I can write some simple code. Recently I was interested in user click areas and was looking at the Hotjar heat map. Then I decided to set up a basic click tracking in Google Analytics. So you can relax
Get the user click path on your site. I know how many people jump from X to Y, and what percentage of them.
As you can see, I’m tracking every button, every link. I attach a different label to each of these anchors. This helps me easily track the user’s behavior path.
For example, I found that the use of top-level navigation was 5 times more than the use of emphasized link text entries.
Intercome
Once we have completed the initialization process, we are in the process of receiving messages from the internal system.
What we’re trying to do here is make sure that all the pages, the text itself, are meaningful and provide real help to the visitor.
Make sure the email leads users to a page they’re happy to go to, and try to provide specific help articles and information to guide them through the process.
6. Review after design
The target
I was working on five projects at once, but I was frustrated because I couldn’t push them through to completion.
Now, my goal is to get at least one thing done every month. This “thing” can be any 2 sub-pages on my personal website; A new product; A customer’s new landing page, etc.
Keep yourself going and enjoy getting things done.
Don’t get too attached to Dribbble
Dribbble is a great place for us designers to attract new clients and showcase our work, and I’ve learned a lot from it over the years. But it has its disadvantages.
I’ve always liked cool images with perfect pixels, but that’s not what users really need or use.
Below is an example of Tapdaq, a nice image I posted for Instagram and Dribbble, and on the right is what the page looks like now. However, behind this is the information that I spent hours looking at how users were using their personal pages, and then came up with.
You might get 500 Likes for a cool potato or Pizza slide animation.
But what really matters is how your users manage the frequency of corporate e-mails, or how they filter out their performance analysis.
By Dribbble: Jan Losert
Original author:
https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146