PORTFOLIO
What I Have Been Working On
"Where science meets creativity!"
HEWLETT PACKARD ENTERPRISE
RAM QUEST
CACI / TICOMGEO
WIN REALITY
DATA VISUALS
LAUREATE
View Other Projects
Chess Vision
Pinheads
Other UI
Typography
SCCI
Digital Paint
Chess Vision
Pinheads
Other UI
Typography
SCCI
Digital Paint
Back to Top
Hewlett Packard Enterprise
HPE Greenlake
Case Study
Programs
- Figma
- Confluence
- Jira
Skills
- UX Design Thinking
- Visual & Interaction Design
- Enterprise Level
- Leadership, Team Work, Working with Devs
- Desktop
Projects
File Storage
Storage Fabric Management
Sustainability
Hardware Vectors
FILE STORAGE
Click the images to view them up-close!
PROJECT BACKGROUND
Project Information
For this project, I was the lead Senior Interactive Designer. I worked with my Visual/Pattern team, and collaborated with other UX Team Members. The project was then developed by a focused development team.
Companies need an effective, secure, easy to use, streamlined process for managing their file systems. This is where File Storage comes into play. With some companies having over 50 petabytes of data a year to manage, multiple regions, and multiple users they need a high performing application to help with all those needs. A lot of companies deal with complex management, infrastructure silos, poor performance scaling and low productivity. The goal of File Storage is to fix those problems.
Tasks & Mission
- Why do companies need it?
- Who needs to use it?
- What data needs to be accessed?
- Best way to access the data?
- Target devices, and users?
- Best way to streamline processes?
- Best design for dynamic use and AI?
DISCOVERY
Target Users
- Data intensive applications.
- Possible needs for large-scale AI workloads.
- Companies with multiple users/teams.
- Users that need transparency.
- Users that need to continuously upgrade their storage.
- Users that need quick insights.
- Users that need to maximize performance and simplify operations.
- Users that require seamless data sharing for collaboration.
- Example users: IT Users/Directors, Line of Business Owners, Data Scientists
Application Goals
File Storage needed to provide a cloud everywhere experience. It had to offer a single infrastructure to help with all kinds of workloads, along with max performance and scalability. It also needed to provide expedited job setup and completion, as well as being cost effective.
Research Goals
- Provide research team with needed user data.
- Keep in mind different user roles and needs.
- Get a clearer picture of what users are doing now.
- Figure out what works currently and what doesn’t.
- Look at similar products in the company for consistency.
- Construct interactions based on current user-based pattern library and best needs for the users.
- Create interactive prototypes for more in-depth feedback.
- Provide design work to Research Team for further feedback.
- Have multiple reviews, and iterations with UX Team, development and stake holders.
DEFINE
Plans & Solutions
- Local and centralized file sharing collaboration
- File share management and metrics
- Audit support for service operations
- File capacity and quota management
- Scale performance and capacity independently
- Will provide local and remote security measures
- Edge-to-Cloud Platform ™
- Cloud operation experience
- Focus on next generation businesses and AI that need high performance and shared storage
Helpful Features
- File Storage can handle multiple needs in one application.
- It has the ability to view multiple metrics and keep track of multiple issues on one dynamic dashboard.
- To access your data, all you need is a path to get there. This is where File Shares come in. File Shares hold your data and they can also be created and customized.
- Performance and Metrics
- Users and Groups Management
- Review and easily manage issues, announcements and tasks.
- Hardware Management
DESIGN
Intuitive and Innovative
The design of File Storage is being implemented inside of a web browser application, that would work best on a desktop but still incorporate dynamic features. Taking the goals, user-research, style guide, and feedback from the development team, were were able to begin to create the foundation. This was done through Figma wire-frames, UX trees, and task-focused interactive prototype iterations. My team and I were able to design a scalable, dynamic application that had the ability to allow for all the needed user goals. The features would be intermittently added over a specific period of time to help create the final full application.
The choice of using wizard modals is one of the ways that streamlining was able to be achieved. Combine that with the "Sliding Modal" that I helped create, we were able to provide an "access from anywhere" solution that wasn't confined to a specific page. Modals are also used to help users focus on single, contained tasks inside the information architecture. This helps to keep the provided information in smaller bites, grab the users attention, and give the ability to provide additional information without having the user lose focus.
From Revisions to Finality
We were able to create an application that offers an intuitive cloud experience, enterprise performance, simplified data management, effective productivity with faster insight, ability to supercharge the most demanding apps, and all with reduced risk.
Details pages were created to help users dig deeper into any of their File Shares and/or File Servers to help gain greater, granular details. Users are provided all the specific details they need to make informed decisions about how to manage and troubleshoot their files and systems. These highly relevant and intent-driven pages allow for users to view their current capacity usage, protection states, status of performance, manage settings and other specific areas, and view more extensive information about the inner-workings of the file or system.
Dynamic dashboards allow for quick overviews of files or systems, performance, capacity and protection. They are customizable, scalable and provide the ability to dig deeper. The idea for using tables was to give a clear, and easy to understand overview of all files or systems. Users can easily search, filter, and customize the information they see.
How File Works
- Built on the secure HPE Greenlake Platform.
- Cloud experience for all storage needs and connections.
- Create and share files from anywhere that use extensive networking and protocol capabilities.
- Provides local and remote protection options that can be customized.
- Works with HPE Greenlake Data Ops Manager to help manage servers for managing storage arrays and performing administrative tasks.
- Allows for customized capacity and quota creation which can be assigned to users and/or groups, or just for everyone.
- And much, much more.
Lessons Learned
Working with HPE on projects like File Storage, Storage Fabric Management, and many others provided me with an expansive amount of additional experience: From enterprise level knowledge, working on projects that must be able to work with other applications, 3rd party systems, physical hardware, and more. I worked with a close knit UX team, as well as researchers, developers, editors and the like. There was a strong drive to provide consistency, open communication, honest feedback, intuitive and innovative experiences, as well as an inclusive and dynamic environment. The value of a great team is priceless, and the ability to use my skills to help better a top-tier company, and its valued customers is a amazing opportunity and fount of knowledge that I will always carry with me.
Storage Fabric Management
For Storage Fabric Management, I was the lead Senior Interactive Designer. Storage Fabric Management allows for cloud-as-a-service to help manage your Fibre Channel storage environment. It uses auto-deployment, simplified SAN management, seamless configuration, resiliency for reducing deployment time, single pane of glass, manage multiple domains, end-to-end provisioning, diagnostics and monitoring. All of this through an intuitive, and simple to use interface.
Click the images to view them up-close!
Sustainability
This sustainability work is an exploration of an up and coming feature for HPE Greenlake Storage. This work is a collaboration with my UX team that I eventually helped to lead.
Click the images to view them up-close!
Hardware Vectors
The images below are vector/svgs that I created of hardware types that are being used by HPE Storage. The goal was to create them in a way that helped the important areas stand out, to be able to scale dynamically, to be easier on the eyes and allow for interactive immersion.
Click the images to view them up-close!
Ram Quest
Click the images to view them up-close!
Back to Top
CACI / TICOMGEO
Case Study
Programs
- Axure RP
- Adobe Photoshop
- Adobe Illustrator
Skills
- UX Design Thinking
- Research
- UI/UX Design
- Visual & Interaction Design
- Desktop, Tablet, Mobile Design
- HTML, CSS, JavaScript
Click the images to view them up-close!
PROJECT BACKGROUND
Project Information
The client had been using bare-bones applications and manual filing to schedule important asset gaining events which includes capturing images, videos and/or learning specific details about an event. Another problem was all the red-tape that went with those methods and the security that had to be upheld. Not only did they need UX design that was more human-centric and updated, they needed it to be faster, easier to read, smarter, smoother and above all else accurate! Within the military the standard practices of getting information, getting it approved, and then getting it to the right people is an important and sometimes life or death matter.
Tasks & Mission
- Why do they need it?
- Who needs to use it?
- What are levels of security?
- What data needs to be accessed?
- Target devices?
- How many integrated programs?
- Best way to speed up process?
- Best design for dynamic use?
DISCOVERY
Persona Example
Research Goals
- Interview different types of users.
- Keep in mind different tech levels, mental states, & ages.
- Get a clearer picture of what users are doing now.
- Figure out what works currently and what doesn’t.
- Look at similar products and possible incorporation.
- Determine what devices users will be using.
- Construct hypothesis, test, analyze & share data.
- Create interactive prototypes for more in-depth feedback.
- What sort of security do we need to include?
Interview Participants
- Gender
- 2 Males
- 2 Females
- Age
- 36 years old
- 50 years old
- 26 years old
- 24 years old
- Ranks
- Captain
- Subject Matter Expert
- Lieutenant
- Seaman
Summary
Different ages showed to have different skill level in the tech areas. They all agreed that the current methods were time consuming. The Captain and the Lieutenant’s biggest needs was to be able to quickly see what he needed to approve, review, or deny without getting bogged down by tons of other data. The Seaman said that organization and quick access to editing was greatly needed. The ability to see the status of the process. We also had to keep in mind the lighting situations because they had certain conditions that were reflected through the light color. The Subject Matter Expert was more of an on-going interview throughout the entire development process. He was able to help with what it was like to be in the field and what would work and would not work.
DEFINE
Task Flow Example
Prioritize & Hypothesize
- What sort of security is needed?
- What data & needs do they need access to?
- How will we speed up the process?
- Age, credentials, and tech experience?
Question
How might we create a secure, faster system and reliably deliver the right data?
Possible Solutions
- Set up an encrypted back-end system.
- Display only needed information with the ability to view more and/or edit.
- Add high level security to allow for different logins with different priorities.
Hypothesis Outcomes
We believe that a dynamic, responsive, and secure all inclusive application will achieve a faster opportunity for them to request, collect and approve events. We believe allowing the users to login with their specific credentials will only give them access to what they need to see and thus speed up the information transference. Specific Hypothesis: We believe that if we create a task system with a smart filter will allow users to quickly gain access to the most pertinent tasks and information they need to work on.
DESIGN
Responsive Wire-frames
For the final project we were going to use a mixture of HTML, CSS, and JavaScript/React for the user-interface. Therefore I needed to keep this in mind, along with the user research, when creating the wireframes. Through a number of user-focused interactive prototype iterations my team and I were able to come up with a scalable, dynamic, easy-to-use, smart system for user testing.
User Testing
Before we finalized the design we needed to perform user testing with potential users. I created an interactive prototype through Axure RP.
Testing Participants
- In-house QA
- Two Seaman
- One Lieutenant
- Subject Matter Expert
Testing Goals
We were looking for comfort level, ease of switching from one application to another, understanding flow, recognition of icons, and speed.
Example of Test Questions
- Current methods and time spent on them.
- Evaluated current software and practices.
- Asked about specific tasks and program integrations needed.
- Asked if the new system felt more reliable.
- Gathered data on emotions, ease of use, comfort, and understanding.
Example of Test Outcome
- Most icons were easy to understand.
- Praise for switching between applications.
- Difficulty in reading some of the text.
- 20% were confused at first.
- 35% said they wanted more information in tasks boxes.
- 70% had no trouble using the application.
- Sped up task completion by 65%
From Revisions to Finality
The final design of the program incorporated feedback from research, testing, and quantitative and qualitative iteration. Using our Pattern Library, that was largely based on the Google Material Design assets, I designed is a simple modern theme. It incorporated responsive scaling and design for any device. The iteration you see is just one of the many color themes and layouts a user can choose from due to the light change conditions. Thus the program would smartly adapt to those conditions.
Example of Changes
- Left nav allows for quick navigation through the different incorporated applications.
- The task grid allows for quick reference of the individual tasks with the ability to expand for more information or editing.
- The area allows for real-time view of the event location with estimated time and travel path.
- The schedule calendar allows for easy organization of tasks with pertinent information like vehicles, time, dates, overlaps, etc. You can even adjust for different time zones.
- Every section and application updates automatically whether through manual or drag and drop changes.
POST MORTEM
What I Learned
The first question is, would I do anything different now? Of course! One thing I definitely learned is that UX Design never takes a break and is always humble enough to become better. I definitely learned that good organization and effective interactive prototyping cuts down on development time and leaves more time for good UX analysis of the program itself. Never substitute personal preference for user needs and experiences. Empathy.
WIN REALITY
Case Study
Programs
- Figma
- Adobe Photoshop
- Visual Studio Code
Skills
- UX Design Thinking
- Research
- UI/UX Design
- Visual & Interaction Design
- Desktop, Tablet, Mobile Design
- HTML, CSS, JavaScript
Click the images to view them up-close!
PROJECT BACKGROUND
Project Information
The goal was to create a more enjoyable and successful experience for the users. Win Reality was in need of a more streamlined web console for their VR professional baseball training system. The application needed to be able to be used on multiple devices and have a consistent feel across the board. The target users were primarily coaches, managers, and trainers though players could also use the application for personal training. The current site struggled with bad data hierarchy and not enough direction for the training setup, thus my main focus was to create an easy to use, linear, and user-focused journey. The objective of the application was for the aforementioned users to be able to set up training sets for their players, quickly access the training and information they need, communication, and to be able to receive accurate feedback.
Tasks & Mission
- Why do they need it?
- Who needs to use it?
- How many training scenarios?
- What data needs to be accessed?
- Target devices?
- Target users?
- Best way to organize data?
- Best way to work with VR system?
DISCOVERY
Persona Example
Research Goals
- Interview different types of users.
- Keep in mind different tech levels, mental states, & ages.
- Get a clear view of specific training needs.
- Figure out what works currently and what doesn’t.
- Look at similar products and possible incorporation.
- Determine what devices they will be using.
- Construct hypothesis, test, analyze & share data.
- Create interactive prototypes for more in-depth feedback.
- What is the most valuable way for data communication?
Interview Participants
- Gender
- 3 Males
- Age
- 54 years old
- 50 years old
- 28 years old
- Positions
- Manager
- Training Coach
- First Baseman
Summary
As with most cases, different ages showed to have different skill level in the tech areas. The Manager and the Training Coach both agreed that being able to quickly and easily set up a training scenario was the most important. The Training Coach said that access to progress that was informative and straight-forward was second on his list. The First Base player was really excited about quickly getting into his training and comparing himself to the other players.
DEFINE
Task Flow Example
Prioritize & Hypothesize
- What would be the best layout for the user journey?
- Need to create the training setup to be linear.
- Prioritize data architecture for easy to find information.
- Ability to login with different credentials.
- Quickly access training, progress and communication.
Question
How might we create a web console that reliably communicates with the VR system that allows for quick access to information and setup?
Possible Solutions
- Set up a menu that puts the most used tools as priority.
- Create training setup to be a linear path (bread-crumb) application.
- Information needs to be organized in easy to read/obvious sections.
Hypothesis Outcomes
We believe that a dynamic web console that allows for users to login with different credentials will allow them to only access pertinent applications. Having a data hierarchy that places most used tools in the top section which will allow for quick, easy to use access. Organize the data areas in windowed, scalable areas for easy to read information. Create the visuals in a complimentary, simple design that allows the information to stand out yet feel professional.
DESIGN
Responsive Application
The overall design of the web console was created to dynamically adjust to different devices. The design was created to be consistent visually and usability wise so that users would always understand what they were doing. We created the application using a mixture of HTML, CSS, and JavaScript. Data Science was used to provide accurate progress feedback as well as accurate training scenarios. Information for each section was created in separate data windows that allowed for easy scaling and adjusting with device types.
User Testing
To test the program I created a basic web console through Figma, but also an interactive one through Visual Studio Code. The different phases of this prototyping allowed for an iterative study of how the console would work and allowed the testers to give accurate feedback.
Testing Participants
- In-house QA
- One Manager
- One Training Coach
- One Player
Testing Goals
We were looking for the ability to find the right tool easily and with comfort. We watched for the level of understanding what they were supposed to do and if they could accomplish their tasks effectively. We measured stress levels as well as the different patterns users would use to get where they needed to go.
Example of Test Questions
- Most important part of training?
- Are they able to find the training they need easily?
- Is there anything that doesn’t make sense?
- Were you successful in creating a new training scenario?
- Gathered data on emotions, ease of use, comfort, and understanding.
Example of Test Outcome
- Main tools were easy to locate.
- Praise for data being easy to read.
- Difficulty in knowing where to add new players.
- 15% were unsure of training setup.
- 30% felt there wasn’t enough data feedback.
- 80% had no issues.
- Tasks that averaged 5 minutes now took 2 minutes.
From Revisions to Finality
The final design was created as a modern, sleek application with a sporty feel. I incorporated everything that I learned from the research, testing, prototypes, and feedback. We were able to create a consistent and effective pattern library, as well as a standardized style guide. We established a better organized data hierarchy that directed the users to find the most valuable needs first. The visual design and flow was loosely based on the Google Material design and branding from the companies other products. The quantitative and qualitative results helped us to understand the patterns and needs, to which we were able to create a more successful user journey.
Example of Changes
- Main navigation was created with most important tools in the top section with larger visual hierarchy to draw the eye.
- Text size was created a bit larger than normal because of the majority of the users being older.
- All of the data was organized into scalable windows of information that helped users not get lost or confused.
- Simple, modern layout helped with readability and ease of use.
- Everything had it's place and was designed in a way that you always know where you are.
- Information was given in digestible bites with the ability to show more detailed info when needed.
POST MORTEM
What I Learned
The big factors in this project were patience and empathy. Age, experience, and needs create a huge complex challenge that makes it hard to please everyone. I learned to deal with the challenge by focusing on the roots of the main needs. This allowed me to find the best balance I could for the design.
By creating the training setup with linear direction this helped users quickly create their training scenarios and easily find the information they needed. This was especially helpful for the major age group being in the older section.
Specific organization and better data hierarchy helped to speed up the training creation process and helped to create successful user journeys.
CHESS VISION: THE QUEST
Click the images to view them up-close!
LAUREATE LENS
Click the images to view them up-close!
OTHER UI
Click the images to view them up-close!
DATA VISUALS
Click the images to view them up-close!
More coming soon!
PLACEHOLDER
Click the images to view them up-close!
More coming soon!
TYPOGRAPHY
Click the images to view them up-close!
SCCI
Click the images to view them up-close!
MIDNIGHT STUDIOS
Click the images to view them up-close!
DIGITAL DESIGN
Click the images to view them up-close!
OTHER 3D DESIGN
Click the images to view them up-close!
Back to Portfolio Selection
ABOUT
My biggest goal in my professional life is to create the possible out of the complex - Whether through my UI/UX, visual design or my traditional art. I have always felt a strong bond with balance, a need to create an emotional journey, and a calling to make life easier for others. To achieve these goals I earned a Bachelor's of Science through the Art Institute with a heavy focus on User Interface and Visual Design. And I continue that education through the Interactive Design Foundation. In addition to user-centered interface and visual design, I have also honed my skills in narrative user experience, interactive prototyping, effective wire-framing and concepts, traditional art, visual design, illustration, 3D design (modeling, rigging, texturing, lighting and sculpting), as well as, storytelling and game design. This varied background adds to my strong pool of creative and intuitive design skills. This background has given me skills in interactive design, SaaS and B2B design. I have experience designing for different mediums like desktop, web, and mobile devices through multiple creation programs like the Adobe Creative Suite, Axure RP, InVision, Adobe XD, 3Ds Max, Unity, Unreal, and Visual Code. I am also proficient in HTML, CSS, and JavaScript. Check out some of my work while you're here, and please consider contacting me if you like what you see. Thank you for stopping by!
SKILLS
- Designed UI/UX in corporate, and startup environments with experience in managing business objectives, consumer brand communication, conducting and interpreting market research and usability testing, and cross-team collaboration.
- Through user research and usability testing I was able to help design and create forward thinking user interfaces that helped improve user experience. This aided me in solving UX and visual design challenges with customer and user guidelines in mind.
- Able to design for multiple platforms (desktop, mobile, web, tablet, etc.).
- Able to work under pressure and thrive in fast-paced work environment while maintaining high quality results.
- Solid grounding UI/UX design, traditional art, 2D/3D art and modeling. Versatility to quickly adapt to different art styles. Skilled in creating textures/lighting of various styles realistic to stylized.
- Bachelor of Science with a heavy emphasis on Design and User Interface.
HOW I WORK
My Core UX Principles
- Be a Voice for the User!
- “Why are we building this?”
- Develop a Plan and a Process
- Stay Usable, Consistent
- Understandable & Accessible
- Focus on MVP, Consider Nice to Haves
- Study User Patterns
- Keep User Journey Understandable
- Visual Grammar & Personality
- Feedback Matters
My Process
- Why are we creating this?
- What problem/need are we solving?
- Who are the target users?
- What is the timeline?
- Get manager/companies thoughts & directions.
- Get an idea of branding needs.
- Get an idea of the timeline expected.
- Whiteboards are fun!
- Is there Competition?
- What works & what fails?
- Review similar products.
- Interview potential users.
- Sketch out ideas
- Wire-Frames
- Flow-Charts
- Features
- Figure out MVPs & Nice to Haves.
- Give team feedback, results & plan.
- Receive feedback & whiteboard design thoughts.
- Decide on best design processes to use
- Some Examples:
- Personas
- Card-Sorting
- Use-Case Stories
- Types of User-Testing
- Flow-Chart Detail Level
- Prototypes - Static or Interactive
- Some Examples:
- Design in digestible chunks.
- Design low-fidelity flow-chart.
- Use flow-chart to design low-fidelity wire-frame.
- Design Meeting for feedback.
- Create basic prototype based on feedback & wire-frame.
- Start work on Pattern Library & Style Guide.
- Design Meeting for design overview & feedback.
- Get user feedback.
- Iterate prototype based on feedback.
- Design, Review, Revise, Repeat
- Most time of process is spent here.
- Nail Down MVPs
- Consider Nice to Haves
- Finalize Pattern Library & Style Guide
- Depending on timeline - User Interviews & Testing.
- Development can start working on "features" framework.
- Develop in small chunks.
- Test often.
- User Interviews & Testing
- QA the heck out of it!
- Depending on timeline - One more round of User Testing & Interviews.
- Release product and turn users into promoters!
- Post-Mortem
CONTACT ME