Adrian Steel Website Re-Design
Company
- Adrian Steel | adriansteel.com
Date
- June 2020 - May 2021
Process
- Agile
Role
- UX Designer
- UX Researcher
- Front End Developer
- Project Manager
Responsibilities
- Lo-Fidelity Wireframing
- Prototyping
- Front End Development
- Quality Assurance Testing
- Communicate client feedback and expectations to cross-functional teams.
Technologies Used
- Protoshare (Wireframing Tool)
- Adobe Photoshop
- HTML & CSS/SCSS
- PHP
- Prepros
- Github / Git
Overview
Adrian Steel is a nationwide leader in creating products and accessories that allow tradesmen to upfit their work vans. They take a unique and personal approach to keep their customers safe and productive in their work vehicles while on the go or at the jobsite. Their personal approach allows them to learn the ins and outs of their clients needs and daily routines to offer them a tailor made solution perfect for them.
Problem
Adrian Steel’s existing website had become outdated over the years, featuring some large usability concerns, most prominently a lack of any form of mobile layout or responsive design. After years of planning, Adrian Steel approached Artonic in June of 2020 with the desire to fully move forward with redesigning their existing website from the ground up.
Solution
After years of planning, Adrian Steel approached Artonic in June of 2020 with the desire to fully move forward with redesigning their existing website from the ground up. Over the next 11 months, myself and the team at Artonic would work to complete the website project and launch a website that both parties could be proud of. Our process had already been kicked off years before the technical start date of the project, so with a headstart we worked to perfect the layout and user experience of the new website through an iterative design process starting with low fidelity wireframes and concluding with the development of the site.
My Tasks
- 1. Create low fidelity wireframes for pages in the Product, Vehicle, Trades, and Company sections of the website.
- 2. Create low fidelity wireframes for additional pages added during the development phase such as Truck Equipment, Interior Packages, Legal.
- 3. After launch, wireframe additional product pages to be nested under vehicle pages, giving users an additional pathway to browse products.
- 4. Code tables & charts using HTML/SCSS that show product availability for certain vehicle types.
- 5. Code pages that were added and wireframed during the development phase of the project using PHP, HTML, and SCSS code.
- 6. Perform frequent usability and quality assurance testing to ensure a user-friendly experience free of bugs and fatal errors.
- 7. Code solutions to usability issues uncovered during usability testing.
