November 2021 - Present
in-House | Minklist Digital Inc
https://in-house.com
Overview
Role and Responsibility
Product Design Lead (UI)
Tools
JIRA software
Confluence
Figma
in-House is a synthetic ESG proprietary platform that allows teams to provide 100% anonymous consensus feedback without the use of emails, logins, or personal information. We believe that if a family can hear each other, they will cease looking for reasons to be afraid of one other, hence we have no agenda other than to provide you with this tool. We use it ourselves, and it works because we have learned to listen. We feel that a new day has arrived... for everyone.
For this early-stage firm, I used my Project Management skills to train and oversee the design team. I revamped their design libraries and organized their atomic design system, followed up with the newest design trends, developed a responsive approach, in addition, defined requirements and hand-offs.
Challenges
Change in requirements
Changing requirements from the PO and stakeholders are rather usual. When I receive requirements, I make sure to do my homework and understand what the team is working on right now and when the new requirements can be implemented.
Inconsistent Designs
When I spotted an inconsistency in the design that the team had created. With the support of PO, I created a Design Rule-style guide so that the team can follow a consistent flow in the future
Communication barriers
The product team is made up of designers and technologists. To keep the sprint flow consistent, there should be communication between the teams. This presented a challenge during design hand-offs. To counteract this, I built a product requirement document that included both design and development user stories, as well as all of the product's critical linkages in one place.
Design System
It is critical for all organizations to implement an 'Atomic Design System' for their product. Where you'll start by making atoms (i.e. Icons, labels, colors, typography, so on). These atoms are then involved in making molecules (i.e. headers, footers, tabs, input text, so on). Now that we've constructed atoms and molecules, it's time to create organisms out of them (i.e. postcards, progress section, and so on). This will allow us to focus more on the design and less on knowing where all the elements come from.
For in-House, the system was already built. I redesigned the entire component library which had inconsistent elements, created a style guide for the designers to follow, and have consistent flow throughout.
Style Guide
The next important part after the components is created is building a style guide. This helps a lot for any new or junior designer to follow the brand's style guide and also additional layouts of alignments play a big part in having a consistent design throughout the product.
For in-House I created a Design Rule book on the confluence with all the design alignment rules as well as pictures from Figma for visual representation.
Prototype
For the goal of discovery and marketing, an emulation/animation mockup was built, which is a visual depiction of an interactive product that people may engage with. The users in this example were the discover and marketing teams, who will test the prototype, provide feedback, and do market research.
Prototyping is my area of expertise, and I can make mockups interact just like a real product. Figma allows live typing and text erasure in addition to the input text field. Prototype versions, on the other hand, enable the DEV team to grasp how the interaction works in a more visible form. This results in more efficient product delivery.
The video containing prototype I have created is below
Responsive Design
It is important to have communication back and forth between DEV and the Design team. Understanding what the developers need for responsiveness was challenging, but with a few meetings and going through what each team needs and can give. Helped me understand responsive handing over developers' breakpoints with the responsive layouts is the start.
When working on the design in a responsive following 'Column Grid' will help in the long run for the designers to layout the structure without affecting vertical spacings. So, the front-end will not have to write complex code. There are several ways to create a responsive design, some designers use constraints and some do not. But when I was working on responsive for in-House, I realized just like interactive components helped in prototyping, constrained components helped in responsive.
So, designers do not need to recreate elements for responsiveness and reuse the mobile components on different breakpoints. Also, understanding how big or small the product is and deciding on how many breakpoints you need to form a complete responsive version.
If the product is small, then setting minimum large screen to be the limit and sizes are that will have viewport absolute positioned. While the big products can have multiple breakpoints on larger screens depending on their audience. Also, when we talk about breakpoints keep in mind to follow the most commonly used rather than the latest sizes.
Project Management
Following a straightforward lean agile workflow. I was in charge of the Design team and trained them to follow design guidelines and agile approaches.
For both the designers and the developers, I've written user stories and OKR type tickets. To create and manage sprint progress, I used JIRA software. Confluence was also utilized for Product Requirement Documents, roadmaps, meeting notes, and hand-offs, among other things. As a result, I've demonstrated my exceptional UI design and PM talents at in-house Inc.
_logo_svg.png){kind=logo}
Tickets
Sprints
Design Validation
User Testing
PRD
Information Architecture
Action items
Design guidelines
Project Deliverables
Style Guide
Retrospective
My performance at the company was recognized quickly, and I was promoted twice. I started as a designer, moved to Manage the design team, and then finally to Design PO.
Some problems arose during the process, which I was able to overcome using my strategic thinking. I assisted a startup in establishing a lean-agile framework for its SDLC and hoping to establish an orderly documenting procedure that everyone will follow in-house moving ahead.
