A Few Behind the Scenes before design begins....
My real-time experience always highlighted that using tools to create mocks/prototypes or any user-centric ideas is the last final 10% of the design process. The other 90% is the Behind The Scenes, which includes idea creation, user interviews, customer journey mapping, low fidelity mocks, and so much more! From my time in the field, I can confidently say that research is fundamental in any successful product.
CUSTOMER JOURNEY MAPPING
This is complete redesign of entire product by adding new features!
- Observation: observe the user to pick up on unspoken signals or behavioral clues as to how they are feeling.
- Understanding: Throughout research, seek to understand the user’s mental model.
- Analysis: Analyze the insights of gathered and try to identify patterns and trends.
Idea Mapping
The picture below shows how I map ideas out. It’s a simple way of getting the main point across to developers, clients, stakeholders, and other departments. Sorting these ideas out makes it easier for me to plan designs, prototypes, and high fidelity mocks.
Client Interviews and feedback
In-depth interviews
Before going to user interviews, I make sure to be prepared. My preparations include jotting down questions, simple product ideas, and searching for competitors. I always make sure that I have multiple essential design tools around me, like pencils and paper. Always encourage users to describe their thoughts and feelings when they interact with the product.
Apple TV App
Quantitative usability testing
This can be done two times, one at the begging of the project to gather the information, once mocks/user centric interacting of the idea is ready then re run with same client. If sometime it a big features i always take help of our own internal department to part of my testing by opening the feature at a time and update their experience that new and old comparisons. Time, and how east how fast, and what exact error he is getting which is also makes very helps to fix the bugs before going to client plate.
BRAINSTORM with team
Pencil and Paper are my assets
Sometimes paper prototyping is always the best to help get ideas across without creating low fidelity mock-ups. The picture below shows a large project that I created. Although it was a large project, I communicated ideas between designers, developers, users, and other stakeholders in the first stages of the user-centered design process with ease.
Low fidelity wireframes
Pencil and Paper are my assets
The below picture shows the first mobile app project I made back in 2010. This project, based on client branding, has nearly 5k users every day. is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. The first and most important role of low-fidility prototypes is to check and test functionality rather than the visual appearance of the product. This also helps to easy understand to backend developers, and also conducted user interviews before going to project start to develop. Users are very happy to see the flow and easy understand of all stack holders.
Design System -FIGMA
Component CSS driven Design System
Figma is a major change in the design world. Creating a reusable components and major using the grid layout either Material UI or Bootstrap. Color system, typography, form input elements, interactive components using latest Figma Beta version.
STYLE GUIDE HANDOFF
Branding and theming
As a designer, I need to hand in all the style guides and information over to the developers. I also need to give them Mockups, Specs, Assets, Interactions, and a Checklist. All these cover different aspects of the design solution. We send the developers everything. So, we to put it into one, simple, accessible document that sits on the cloud. It’s called the Design Handoff Document.
Branding wireframe
As a designer, I need to hand in all the style guides and information over to the developers. I also need to give them Mockups, Specs, Assets, Interactions, and a Checklist. All these cover different aspects of the design solution. We send the developers everything. So, we to put it into one, simple, accessible document that sits on the cloud. It’s called the Design Handoff Document.
Interactive prototype
Product design flow using sketch
Dashboard Design flow in InVision App
