All Metals Industries Site
Profile
Project Information
Additional project details
- Problem
- The original All Metals Industries website was outdated and the staff was unable to edit any of the site content. In addition, they wanted a robust user interface for visitors to look through material types
- Solution
- I used Craft CMS to create a modular build system and customized interface to make content edits effortless for the staff
- Deliverables
- Customized Craft CMS, Responsive Website, Research Plan, User Personas, User Journey Map, Problem Statement, User Flow Diagram, Wireframes, Usability Test Results
- Role
- UX Designer, UI Designer, Web Developer & Designer
- Skills
- User Research/UX, Web Development & Design, Interaction Design
- Duration
- September 26th 2021 - June 28th 2022
- Tools
- Craft CMS, Tailwind, Sketch, Zoom, AWS-S3, Figma, Adobe Photoshop
Quick links
Application Journey
Personas & User Flow
I started by identifying the type of visitors the site will have and how they will use the app. Here is an overview of the user personas and the three main parts I broke things into:
User Personas
Based on my research and my clients goals, I created three user personas to better understand how the application would be used and how to structure it to provide the best user experience.
Research
User Pain Points
Once I learned all of my clients goals and determined who the website users would be, I mapped out the pain points they would experience. Here are the main pain points I found:
- • Users want trust worthy verification from industry related company
- • Clients need the ability to order materials in custom shapes and sizes
- • Seek a UI that makes reviewing materials a simple process
- • Staff want a simple user interface for editing their website
- • Customers want detailed company history and support information
- • Businesses in this industry fail to show pictures of their facilities
Prototype
Wireframes
Various user experience design examples including wireframes, prototypes, motion design, typography and more
Planning
Sitemap
After talking to the client and considering the user personas, I worked on the information architecture of the app. The proficiencies and shortcommings of the users & personas dictated how to design the application.
Figma file of All Metals sitemap
Testing
Site Usability
To learn what users thought of the application, I created a Figma Prototype from my wireframes. I used Google Meetup to video conference with my client and several users to learn how to improve the application. Here is what I discovered:
Service Descriptions
In the landing area, the team wanted the ability to edit text content using a block of customized plain text inputs
Staff Customization
The team approved of the custom UI but wanted it modified to be able to see all staff members at once
Community Support
The staff at All Metals wanted a section where they could display organizations they support
Iterations & Improvements
After learning what could be improved upon, I prioritized the changes to make and got back to my designs.
Several improvements were made to the application:
Full stack developer, researching and utilizing cutting edge web technologies. I am a hard worker and dedicated to my craft - I have a good sense of humor and work well with other creative professionals. I have an open mind, a positive attitude and always seek to improve my skillset.