Cindy
Masri
User Experience designer
UX/UI Designer based in Houston with a background in Construction Technology & Graphic Design, and a strong passion for bringing ideas to life.
Balancing the art of creativity, logic and analytical skills to build an effective and engaging solution for the user
USER RESEARCH
Before any pen comes to paper for a new design solution, it's imperative to include a research phase to learn as much as possible about the intended user(s) and their actual needs.
My process during a discovery phase includes:
- Creating User Personas
- Speaking to current customers for Q&A
- Gathering business requirements from stakeholders
- User Journey Mapping
- Understanding user pain points and current processes
- Competitive Analysis
- Speaking to any Proxy Users in the company
USABILITY TESTING
After the design phase, it is a great advantage to get real user feedback and validate the assumptions made during the discovery phase, have the user's needs and wants been met?
My process during a usability testing phase includes:
- A/B testing
- Moderated usability testing
- Unmoderated usability testing
- Customer feedback interviews
GRAPHIC DESIGN
With my creativity and technical skills, I've delivered media with various platforms to transform my clients' brand and messaging into something powerful
GRAPHIC DESIGN
With my creativity and technical skills, I've delivered media with various platforms to transform my clients' brand and messaging into something powerful
I specialize in turning complex ideas into
engaging experiences
Designing is more than just a profession to me; it is my passion.
I take pride in producing exceptional results that bring a positive change to people's lives. As a curious and diligent person, I find joy in exploring the realms of design, user thinking and usability, always looking to enhance my skills in every possible way.
As a designer with a decade of experience in Graphic Design, I have focused on building my knowledge and critical thinking skills to better serve the user.
Through my work, I find it intriguing to gain insight into different perspectives, attitudes, and behaviors. I believe that as a great designer, it's important to ask "why" and explore all options to find the best design solution that effectively solves the problem at hand.
More about me
Experience
2021-Present - HCSS Construction Software
UX/UI Designer
2020 - 2021 - HCSS Construction Software
Business Analyst with UX Focus
2017-2020 - HCSS Construction Software
Digital Media Specialist for HR Services
2017-2017 - HCSS Construction Software
Digital Media Intern for Recruiting Department
2015-2017 - Lockwood, Andrews & Newnam, Inc Civil Engineering
Digital Media Specialist for Marketing Proposals
2013-2015 - ETMedia
In-House Digital Media Specialist for all branding services
Education
2018 - University of Houston
Bachelor of Science in Digital Media
Expertise
- Mobile, Web, Tablet and Desktop design
- Wireframe & Mockup Design with Figma/Adobe XD
- Conducting User Research
- Conducting User Interviews
- Conducting Usability Testing
- Knowledge of users in the horizontal Construction Industry
- Representing products in Expos, Conferences, Tradeshows
- Logo Design
- Project and Construction Site Photography
- Graphic Design for print, mobile, or web
- No-Code app design using Glide and Bubble
- Adobe Creative Suite Power User
UX DESIGN Mechanic Time Card - designed for mobile experiences
Tools used: Figma, Adobe Photoshop, Adobe Illustrator
The E360 Fleet management platform at HCSS needed an upgrade from the Desktop experience to an on-the-field mobile experience for Mechanics to document their work via the mechanic time card, and for Fleet Managers to manage the time cards of their workforce.
How:
This project required in depth research of the Mechanic and Fleet Manager personas, their day-to-day jobs and how time is logged for work tied to Work Orders. I interviewed multiple customers to dig deeper into their pain points, and interactions needed for this experience. I worked with the PM to ideate workflows regarding interactions with different statuses and phases of a time card's life, such as error, rejections, including notes, etc.
Using the iOS interface and interaction standards, I worked to redesign the desktop experience to reflect the workflows the user would take, ensuring the important points and statuses were always visible to the user, and including the familiar feeling of interacting with other mobile products.
UX DESIGN Product Test Lab app - designed for mobile
Tools used: Figma, Glide, Adobe Photoshop, Adobe Illustrator
Check out this mobile app for yourself at https://ptl2023.glideapp.io
Every year, HCSS hosts a User's Group Meeting conference for thousands of customers to learn more about their current HCSS products and what's new. This conference is the perfect opportunity for the Design Team to conduct moderated usability testing since we have thousands of our users available in person at one time! This app offered a solution to the check-in process of the usability tests that the customers wanted to participate in, as well as hosting information about what is involved with each test.
How:
This check-in process had previously been done using Google forms and was notoriously a very disorganized experience for the customers and for the Design team hosting the testing. I aimed to provide an all-in-one experience for the users to learn more about the features they could give feedback on, and to go ahead and check in or book an appointment for later. The interaction design of the front end allowed the customers to enjoy learning about what tests best suited their roles, and make them excited about giving valuable feedback about the features they currently use. The check in system allowed for the organizers to easily manage the queue for each usability test and spend less time worrying about documentation of each check in.
UX DESIGN HCSS Careers Website - designed for mobile & web experiences
Check out this website for yourself at https://careers.hcss.com/
Tools used: Figma, Wordpress, Adobe Photoshop, Adobe Illustrator
The Recruiting team at HCSS desired a new website dedicated to careers, for potential applicants to learn about the company, stay up to date with openings and apply directly in the site.
How:
I aimed to follow the HCSS branding guidelines that the HCSS products and software follow, but also wanted to give it a more creative spin to entice applicants to discover more about the personality of the company.
By interviewing recent applicants/recent hires, I identified the pain points of the recruiting process and sought the information they were searching for in their hiring journey.
UX DESIGN Column Chooser for HCSS Pre-Construction -
designed for web experiences
Tools used: Figma
The product team for HCSS Pre-Construction needed a redesign of the dialogue that appeared when a user wanted to customize the columns that displayed data in their project list
How:
Creating a new solution for the information was tricky simply because of the information density, and the quick identification of many elements that the user needed to mentally note in order to make a selection.
I aimed to display elements in a clean and organized fashion, improving the navigation of categories and adding easy ways to manipulate all of the data/make a mass selection.
UX DESIGN Activity Codebooks Dashboard -
designed for web experiences
Tools used: Figma
The product team for HCSS HeavyBid Desktop needed a very outdated desktop workflow transformed to the web with an easy access to set metrics for data analyzation purposes
How:
I started with a thorough discovery phase to find out what metrics current users were commonly running reports for to organize their data, allowing me to come up with the four most popular metrics to add in for easy access in a dashboard format.
For each of the metrics, I manipulated the visualization of the data, prioritizing the most important data points as columns for readability in a table format that can be easily exported to share.
UX DESIGN Estimate Mapping feature for HCSS Pre-Construction -
designed for web experiences
Tools used: Adobe XD
The product team for HCSS Pre-Construction needed a new feature in their product to allow Estimators and Estimating Administrators of construction companies to link their historical estimates to their database of jobs, to fully manage their business data for any part of the Estimating lifecycle.
How:
I started with a thorough discovery phase interviewing multiple current users to explore their current processes of manually linking estimate data to their jobs using Excel or other methods outside of HCSS products.
I worked with the technical team to create a workflow and interface that would allow users to approach the workflow in two ways, according to their business practices or preferences; linking estimates to projects or starting at the project level to bring in historical estimates.
UX DESIGN New Filter Component using REACT - designed for mobile, tablet and web experiences
Tools used: Figma
The product team for HCSS Plans needed a way for users to filter the items in the main screen of the product, the sheet view.
How:
I started with research and learning from the developers about what was possible with the current tech stack of the product and if we could introduce a REACT component as a viable solution.
I worked with the technical team to create a workflow and interface that would allow users to navigate the sheet view screen with constant access to the filter bar at the top of the screen, and filter controls that made sense for what data was being filtered or manipulated.
UX DESIGN Linking JIRA issues to releases - designed for web and mobile experiences
Tools used: Figma
The internal QA team needed an easy way to link JIRA issues from ongoing project work to new releases for an internal release site. The user needed to be able to identify the type of JIRA issue, as well as other descriptive information and a way to quickly open the JIRA card in a new tab for more information.
How:
I helped the QA team identify the route they'd like to go with: use MUI components for their site and slowly start the process of transforming the rest of their site to follow MUI standards, or to manually code this design with their current tech stack. Once we were in alignment with the benefits of using MUI components and futureproofing the site, I started to ideate and design a workflow for how the user would make selections and view their active selections.
UX DESIGN Selected Annotations Panel - designed for mobile
Tools used: Figma
The HCSS Plans product team needed a way to view selected annotations across multiple sheets of a Plans set in one centralized panel, and manipulate the selections as well as confirm their units of measure in reference to the cost code they will be exported to for the foreman's time card explaining the work they completed that day.
How:
I worked with the PM of this product to interview current users about their daily workflow of foreman documenting progress of their work on a job for the day in order to translate it to their time card. This process existed in a different way on the web platform but needed a mobile friendly way for foreman to complete this process on their iPads while out on the field at the end of each work day. I used the research about user's current workflows and painpoints of the way they do it on the web or on other competing platforms to design an interaction for this solution. Using iOS standard and the product's established branding, I elevated the web process to now be available on mobile. I also iterated this design by validating the proposed solution with users with moderated usability testing and asking deeper unbiased questions.
Connect with me on linkedin - @CINDY MASRI
Let's get to work!
Houston, Texas
cmasri95@gmail.com
(832) 870-2233