User Journey Map
Prototype
UI Designer
Micro-Interaction
Design Library
Animations
MY Role
My portfolio is really a synopsis of my career journey. I wanted it to feel more like a mood board than a traditional portfolio. It reflects my transition from fashion into tech and shows the creativity and storytelling that shaped my work. Even though it is more of a mood board, every single component card you see and every interaction that is represented are things that I created on the platform. So it is a mood board made up of elements I actually built.
For example, here with CareScout. This was a startup within Genworth focused on social impact. It was a marketplace for policyholders to find quality home care and nursing services. In my role I worked on UI design, micro interactions, the design library, and animations. If you are interested in the deeper problem solving behind the visuals, you can click into the case study where I walk through the challenges and how I solved them.
To earn CareScout's Quality Membership badge, providers must consistently deliver exceptional services, thereby instilling confidence in the families they serve. This initiative strives to streamline healthcare searches, ensuring access to reliable and accessible healthcare
These component cards represent the high-quality nursing homes that partner with CareScout. They display all the amenities available within these homes, providing a comprehensive overview of the services and facilities they offer.
For the mobile component, we encountered challenges when transitioning mobile to desktop due to the extended content. To address this, I implemented an interactive solution, preventing the need to alter the component design from its mobile to desktop version for breakpoints.
This animation was crafted using micro interactions for a 404 and system error page. Additionally, I transformed them into GIFs using the same approach.
This animation was created using micro interactions and later transformed into a GIF using a plugin GiffyCanva, enabling developers to hardcode it for interactivity. This technique was originally introduced as a means to avoid patent infringement. Uncompressed GIFs can also serve as a valuable intermediate format for graphics programmers, as they allow access to individual pixels for reading or painting.
Gif to create animation in development
This micro-interaction, aptly named 'Obstruction,' was meticulously crafted using a custom bezier curve in Figma. It adds a unique touch to the design, enhancing the user experience
Crafting the 'Obstruction' Micro-Interaction
Creating interactive designs to boost sales team effectiveness and engagement.
Typography
We use three weights of the GT Walsheim font family, Bold, Medium and Regualr.
Design Library
The Design Library comprises an extensive collection, encompassing both desktop and mobile components used throughout the website. During our interview, I will gladly share this extensive body of work with you through Figma. Here's a glimpse of some of the components
Versatile and Interactive Buttons
The buttons are not only responsive in terms of layout but also adaptable in size. Additionally, they possess interactive hover features, enhancing user engagement and functionality
Efficient Element Access Guidelines
Throughout my design library, I have established a rule of thumb that simplifies navigation and accessibility for UI writers and project managers, ensuring efficient access to each element.
Form Fields
Seamless Platform Switching: Header Design
designing the headers for both mobile and desktop, this here is the mobil header . I employed a system of nested components, instances, and variants, allowing seamless switching between platforms. Furthermore, I integrated small asset set of icons accessibility
I've created responsive form fields that are available as variants for different states, complete with icons and features to enhance user interactions when filling out forms.
Responsive Design
I often liken responsive design to solving a Rubik's Cube; you need to adjust and interchange elements within the constraints of auto-layout until you find the perfect fit.
Meet The Team
Habibah Malinur
Interaction Designer
Thom Mitchell
Design Director
Sabina Diaz
UX Contractor
Tess Anderson
Ux Researcher /Contractor
Contact
I'm always looking for new and exciting opportunities. Let's connect.
917-609-3655
