I am a professional UX/UI Designer, Graphic Designer, & Entrepreneur with a background of designing for various print and digital media platforms. I like to consider myself a “jack of all trades, master of none” as 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, Roche Bros, Redeux Energy, & MFour) using best rooted UX/UI practices. I’m a firm believer that there is no limit to creativity so being able design for all different types of projects allows me to feel limitless on what I can create.
When collaborating with other designers, I enjoy working independently, while also maintaining malleability with colleagues.
Presently, I started my own small, side business called Manifest - Art & Design where I design lifestyle apparel, custom apparel, and also offer freelance design services. I am currently seeking a part-time position so I can continue to explore my business venture, while also pursuing 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.
Problem to solve: For a consultant project, I was tasked to create a simple Remote Control App that would be connected to an Insulin Pump. The Insulin Pump Remote Controller would primarily be used at home for patient’s with Parkinson’s Disease. With this in mind, I needed to create a controller that would be easy to use for this type of user.
Process: During this project, I did in-depth research on a Parkinson’s patient in order to understand the disease and learning that this typically happens when someone is older. From there, I started to utilize the workflow the client provided for us on how this would specifically work. Once I completed with my research, I started to iterate concepts based on what this specific user would need. I then had the UI Design Director give me critiques of my iterations in order to determine the highest quality deliverable.
Concept: Understanding the user was the main task in order to make this device user-friendly.
People with Parkinson’s struggle with shaking & stiffness of the body. With this in mind, I created a device with larger than normal buttons for easier touch targets taking into consideration that they may be shaking while using the device.
The user is typically older so using bright colors that stand out on the screen is essential for the user to see them at first glance.
All components are color-coded in order for the user to know whether something is a neutral, positive, or negative action.
Because this user is not typically tech-savvy, creating a workflow that directs them on what the next step is within each screen, was essential in creating an easy to use application.
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
Problem to solve: For this client project, we were tasked to redesign an application for screening the hearing of newborn babies in a hospital.
Process: . The client provided us with images of older versions of the application they previously built out, brand guidelines, and the hearing screener manual to help us design a user-friendly application. My main job was assisting the Senior Designer in organizing the information architecture of the application and building out the component library. Our main focus when creating the workflow was mastering the user experience for screening patients or managing patient data within the application.
Concept: For our concept, we chose a teal blue color that was in their brand guidelines since teal is considered a calming color, which we wanted to be representative within this baby hearing screener. We then built out high fidelity wireframes for each screen based on the guidelines provided and common UI patterns. This resulted in an easy to use workflow for each section.
There were two workflows for this application, the overall clinical workflow and a quick test flow where healthcare workers can skip some of the steps and just perform a screening.
Problem to solve:
Everyday, trucks and moving trucks come to Boston and their GPS leads them to the infamous Storrow Drive. Storrow Drive is known for having short bridges where larger trucks can’t drive under. This leads to at least one accident a day, resulting in damage to the truck, damage to the bridge, and traffic build up.
What if there was an app that created a route to avoid any bridges their truck couldn’t fit under? That’s where Bridge Buddy comes in. Simply enter the height of your truck and the GPS will create a route that avoids any areas where your truck could get in an accident.
Process / Concept:
See images with captions for design process and examples of concept iteration.
Step 1 - Mind map: In order to brainstorm my thoughts, I created a mind map to flesh out my ideas on what a user would specifically need for this application.
Step 2: -UX Brief: For this step, I created a “best at” statement. This is the thesis to my whole application in order to focus my application on one specific resolution.
Additionally, I brainstormed different scenarios a user may think about when using the application. Once completed, I included a feature / component that would solve that use case scenario.
Step 3: User Personas: I wanted to really understand the type of person that would be using this application so I brainstormed three different users and their situations on why they might need an application like this.
Step 4- Inspiration / Mood board: Once I understood the type of person that would use the application, I created a mood board that represented the style I thought would represent this type of user.
I figured this would be used more by men since about 80% of all truck drivers are male versus female. With that in mind, a more masculine style application, but with a modern twist was what I was going for.
Step 5 - Card Sorting / Information Architecture: Before diving into the actual design of the application, I wanted to build out what screens would be needed. Specifically, the basic workflow and how each screen would be connected to each other with this simple card sorting / information architecture exercise.
Step 6 - Sketching / Low Fidelity mockups: Before building out the high fidelity mockups, I started to iterate the wireframes of each of the screens and what information would be needed on each. From there, I consolidated the screens I believed to have the best solution and built out a quick “happy path” of some of the main screens in the application.
Figma was the main tool I used for this part of the process..
Step 7: High Fidelity mockups - After creating the low fidelity mockups, I use those wireframes to start building out the high fidelity mockups of the application.
Note: Not all screens are shown here, but wanting to specifically show the an up close visual of the “happy path” of the application.
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.
Problem to solve: Chip Kidd is a famous designer that wrote a book called Cheese Monkey's. Although, the book cover itself is very bland and does not necessarily represent a creative designer. Our professor requested for us to redesign the book cover so it is more representative of the designer and also a movie poster alongside with it.
Process: Knowing that my professor wanted it to be more representative of Chip Kidd, I decided to have my design represent his personality, which was very quirky. With this in mind, I chose three main components I wanted to utilize, his glasses, the monkey, and the color yellow. From there, I started to iterate and play around with different way to organize these components.
Concept: The circular glasses he wore were a very unique so I figured it would be a good object to utilize for my design. I then decided to illustrate my own monkey so it appears more quirky than his original book cover monkey. Lastly, I also wanted to utilize the color yellow. The bright yellow color accentuated my design in order to stand out on the bookshelves.
I also designed a movie poster if this were to ever be a movie. Since Chip Kidd is so artistic, I imagined his film to be more of an art film so I made the movie poster more artistic in comparison to a more commercialized movie poster.
A redesigned layout of the Cheese Monkey's book cover by Chip Kidd.
I created a movie poster if the Cheese Monkey's book were to come out with a feature film placed on a side street in New York City.
A two-dimensional view of the Cheese Monkey's book cover.
A two-dimensional view of the Cheese Monkey's movie poster.
DESCRIPTION COMING SOON
Problem to solve: For this project, I worked with the stakeholders in the identity management security team of UL to help them build a digital platform that provides various services to ensure their security devices are safe and secure.
For this specific service, we were asked to build out a workflow for their Device Security Target Level Assessment.
Process: I joined 4 half day Sprint meetings where I interacted with the stakeholders to fully understand how this process would work. We answered some “how might we” questions for each section of the flow. We then wrote out what features/components/information might be needed on each screen. From there, we sketched out various parts of the flow. Once decided, I was tasked to lead the last part of the sprint and build out high fidelity wireframes in Figma. The stakeholder then decided what concept he would like to move forward with while also providing me with constructive feedback to improve the wireframes.
Concept: To summarize the concept chosen, a user must go through three steps: they must scope, define their target level, and complete a questionnaire to check if their device is reaching the target level they are striving for. Once completed, the user can view their results and accept or reject recommendations so their device can reach a certain target level.
The screens shown are some of the mains screens a user would see when starting the assessment.
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