I am a professional UX/UI Designer & Graphic Designer with a background of designing for various print and digital media platforms. I have worked on a multitude of projects that span from designing instructional manuals, medical packaging, SaaS platforms, logos, ads, mobile applications, and company websites (Origin Wireless, Westinghouse, Roche Bros, Redeux Energy, & MFour) using best rooted UX/UI practices.
When collaborating with other designers, I enjoy working independently, while also maintaining malleability with colleagues.
Presently, I started a side-hustle, Manifest - Art & Design LLC where I offer a wide range of freelance design services: UX/UI Design, Graphic Design, Mural Design, & Custom Apparel Design for small businesses. I am currently seeking a position where I can continue to explore my business venture, while also nurturing my creative growth elsewhere.
Problem to solve: At Matter Communications, I was tasked with designing the UX/UI for the Origin Wireless company website. As seen on the homepage, Origin Wireless uses “Origin’s WiFi Sensing™ technology and custom applications transform smart devices into virtual sensors for a true intelligent home ecosystem — transforming the way we work, play, and keep our homes and loved ones safe.”
Originally, the website appeared outdated. It was difficult to understand what the goals of the company were and how Origin Wireless differentiates to their competitors. With this in mind, we were tasked with revamping the website to feel more modern and fresh to their targeted audience, while also clearly describing the purpose of the Origin Wireless brand and why they are the go-to company to utilize for wifi-sensing technology in comparison to their competitors.
Process: I teamed up with the Art Director, Copywriter, Web Developer, & the Video Team to build the improved visual story of the website. My main role was collaborating with the team and the client to ensure we include all the information they wanted to tell their company story in an organized and cohesive experience for the customer.
Planning: Once we agreed on what information was absolutely needed, I then provided advice on other elements they may want to consider.
Site Map: From there, we created a site map on a website called SlickPlan that outlined the structure and information of the website before building out the low-fidelity wireframes.
Low-Fidelity wireframes & UI concepts: Once the sitemap was approved, we moved onto the low-fidelity wireframes, while simultaneously designing the UI concepts of the homepage.
High-Fidelity wireframes: Once the UI was approved, we transferred this style onto fifteen different high-fidelity wireframes that would eventually be turned into the guidelines for the developer to build out the website in WordPress.
Animation: The client also wanted some animations to show how the Wifi Sensing technology functions so I worked with the animator to ensure the videos on the website visually summarized how the technology functions in specific environments.
QA: I worked directly with the developer to ensure the website matched the wireframes, while also QAing the website to ensure there were no bugs or any mistakes before the launch date.
Concepts: We shared three different concepts with the client using the UI of the homepage as an example before building out the interior pages (see the other two concepts at the bottom of the page). The client loved that we utilized their secondary color palette vs. the original brand colors, teal & black in order modernize the website. They also loved the use of circular shapes and lines to visualize invisible wifi-sensing technology, which is why this concept was chosen in comparison to the other two concepts.
To learn more about the final UX / UI design of the website, visit https://www.originwirelessai.com
Problem to solve: At Matter Communications, I was tasked with redesigning the UX structure of the original MFour website. We worked with the client to better understand their goals, which included the company wanting to highlight the benefits of the MFour SaaS platform. They also wanted to visually tell the MFour story and why their SaaS platform is the most innovative platform in the marketing industry.
Process:
Planning: We worked with a few team members from MFour to understand the current strengths and weaknesses of the site.
For example, the original website focused mainly on their services, but did not provide much information about their SaaS platform, which is what they wanted the new website to focus on. As the UX Designer, I rewrote a structural outline of the website that focused more on highlighting the SaaS platform and the other services became secondary.
Customer Interviews: I teamed up with the Strategy team to meet with various customers in order to better understand the strengths of the current website and also the main pain points of the website so we could consider this information when building out the UX of the website.
Outline & Site Map: I collaborated with the strategy team and the copywriter to outline all the information needed in the new website using notes from the planning process and customer interviews. Once the outline was created, I transferred this information into a site map so the client had a clear understanding of how the website would function.
Desktop low-fidelity wireframes & Mobile low-fidelity wireframes: Once the site map was approved, I started to build wireframes for desktop and mobile in Figma to provide the client with a visual understanding of how the website will be organized and function based on my knowledge of information hierarchy.
Interactive Prototype: From there, I built an interactive prototype in Figma that the client could utilize in order to better understand how a customer could navigate the site.
Concepts: I teamed up with the Art Director & Graphic Designer where each of us designed an individual concept to present to the client based on a specific idea that represented the company offerings. Although my concept was not chosen, the client liked the idea of using screenshots of the actual platform to showcase to the customer, while also utilizing illustrations of graphs and charts so the customer has a general sense of what the SaaS platform provides at first glance.
To learn more about the final UX / UI design of the website visit https://mfour.com
These wireframes were interconnected in Figma to guide the client through the UX of the website.
I got the opportunity to present this to the client as a potential UI option utilizing their brand guidelines. I mainly incorporated graphs and charts to visually represent what the company does, which is gathering data and statistics in their MFour SaaS platform of consumer shoppers.
Overview: RAMS (Regulatory Affairs Management) platform has been one of my main contributions at Emergo by UL. To summarize the platform, RAMS is a new software created by Emergo by UL where medical companies can utilize our free and premium services in one digital space. The service include tracking registered medical devices in an account or by country. Each registered device also include certain reports that are needed and you can build out those reports right on the site as well.
RAMS is constantly evolving and services and features are being added often to improve the website. My role is working with other designers and the Product Owner in a 2-week sprint cycle to design the new services and features for the developers.
Problem to solve: Our Product Owner requested to build out a new service in RAMS called product classification tool.
Process: The PO provided us with some information on what the tool is supposed to do and the various questions that could be asked. With this information, I utilized the RAMS style guide to build out a simple work flow where the user can walk through each section in a step by step process. Once completed, their class results would be determined.
Concept: Here, is an example of the product classification tool and some additional screens of the desktop version converted to tablet and mobile.
Project Overview:
Tasked with developing a Remote Control App for an Insulin Pump, tailored specifically for patients with Parkinson’s Disease, this consultant project was driven by the imperative to create a user-friendly interface for individuals facing motor and cognitive challenges.
Design Process:
Deep immersion into the world of Parkinson’s patients served as the foundation of this problem to solve. Recognizing the demographic skew toward older age groups, extensive research was conducted to grasp the nuances of the disease and its impact on user interaction. Leveraging insights from the client's recommended workflow, I refined concepts to cater to the unique needs of this user group. I reached out for valuable feedback to ensure the delivery of a premium-quality product.
Design Concept:
Central to the design ethos was a profound understanding of the end user. Acknowledging the motor difficulties experienced by Parkinson’s patients, I prioritized accessibility by enlarging touch targets, facilitating ease of interaction amidst potential tremors.
- Vibrant, high-contrast color schemes were meticulously selected to enhance visibility and aid in intuitive navigation, catering to the visual needs of an older demographic.
- To further streamline usability, a color-coded system was implemented, providing clear visual cues for differentiating between actions.
- Guided workflows were integrated seamlessly into the interface, empowering users with clear directives at every stage, a vital feature for individuals navigating unfamiliar technological terrain.
Step 1: Gathering client references
Step 2 - Concept Iteration: I screenshotted the original Figma board so you can see how I started to iterate concepts based on the client references that were given to us. As you can see, I created various ways to design each screen until I determined the best solution. I also kept track of components (buttons, icons, graphics) on the upper left hand of the board to ensure I am using the same components for each screen.
Step 3 - Narrowing down concepts: Once I received some feedback from other designers, I started to consolidate and revise some of the screens in order to narrow down to the best solution.
Step 4 - Final Concept: The following screens are the finals screens after delivering to the client and revising the screens based on any additional feedback we received.
Final screens workflow
Project Overview:
Tasked with the redesign of a crucial application aimed at screening newborns' hearing in hospital settings, our team embarked on a journey to enhance usability and efficiency for both medical professionals and newborns' families.
Design Process:
Equipped with insights from previous application iterations, brand guidelines, and the hearing screener manual, our approach was anchored in meticulous organization and the creation of a cohesive component library. Collaborating closely with the Senior Designer, I played a pivotal role in structuring the application's information architecture. Our primary objective was to streamline the user experience, whether it involved screening newborns or managing patient data.
Design Concept:
Drawing inspiration from the client's brand palette, we opted for a soothing teal blue hue to evoke a sense of tranquility and assurance, aligning seamlessly with the sensitive nature of newborn hearing screening. Through the creation of high-fidelity wireframes meticulously crafted in accordance with established guidelines and UI conventions, we sculpted an intuitive workflow that facilitates seamless navigation and interaction across each application screen.
This application featured two distinct workflows: the clinical pathway and a streamlined quick test flow. The latter offered healthcare professionals the flexibility to expedite the process by skipping certain steps, enabling efficient screening, while also maintaining accuracy and thoroughness.
Problem to Solve: Sleep Deprivation in the work place is a serious problem happening in office environments. To solve this problem, I designed my own product called the Koala.
Process: The process of designing this brand and concept took me 10 weeks. I worked closely with the design director and senior designers from start to finish. I started off by brainstorming ideas, creating a mood board based on the target audience, which would be a male / female white collar worker. Once brainstorming and researching was complete, I sketched and iterated different concepts. Here, you will find my final solution to the overall brand which include the logo, landing page for the website, and campaign strategy.
Concept: The Koala is a different take on an affordable sleeping pad that can be placed in any office space. Why the name Koala? Koala’s are known to be one of the sleepiest animals on the planet so I designed a simple logo to represent this.
A visual representation of what the Koala product would look like.
An additional campaign strategy for the Koala company.
Problem to solve: In my typography class, we were asked to create a booklet that represented two well-known fonts.
Process: For this project, I researched the international typographic style in order to create a booklet with this look and feel. From their, I iterated multiple concepts for each page until I determined the best solution for each.
Concept: Here, you can find a few of the pages of my final concept, which takes on the international typographic style look and feel, while also telling the story of the two typefaces.
DESCRIPTION COMING SOON
Problem to solve: We were requested to write out and design two instructional manuals for a syringe and a drug vial adapter kit. The manuals main purpose is for the user to understand how to go through a series of steps to perform an injection with the vial kit.
Process: I worked with the Senior Designer and the User Researcher to write out the steps on how a caregiver would perform the injection. We used a use related risk analysis and our expert knowledge of performing this type of injection to write out the steps. From there, the Senior Designer organized the information and I created the illustrations determining what should be shown in context for each step.
Concept: We delivered three concepts to the client, but the client determined that this three row concept was their favorite as it broke up the information well with the first row describing the standard IFU information and the last two rows describing the steps.
Problem to solve: One of my main roles as a designer at Emergo was designing instructions for use for various medical devices.
For this IFU, we were asked to design an instructions for use for a pen-injector.
Process: I worked with another designer to help out writing the instructions for each step so they are accurate and concise ensuring all warnings are mentioned based on a use-related risk analysis. From there, we designed the layout and illustrations for the IFU. The other designer focused on the layout, while my main role for this task was drawing all of the illustrations for each step.
Concept: The client decided that they liked this concept the most with minimal requested changes.
Close up images of steps 1-3
Close up images of steps 4-6
AI Illustration of pen-injector