Project Overview
Innovation UI Design. The first project to embed a live 3D Model into the configuration system. This project was designed as a landing page for iPad and web use.
This project involved end-to-end understanding of systems and processes, working with developers and engineers to establish design scopes and directions ensuring that the new design would follow requirements and brand guidelines. It involved high project management skills, presenting ideas to senior stakeholders and ensuring regular meetings through out the design process.
I gained knowledge of HTML, CSS and JavaScript to help front-end developers integrate the design components into the live web application. I created style guides and UI elements for developers to use in this project and any future related project to ensure brand consistency.
Skills
- UX/UI Design
- Collaboration with Engineers and Developers
- 3D Rendering
- Innovation strategy
Why was an Upscale needed?
- Limited features
- Outdated design which was not user friendly
- Hard to visualise features in current design
- Chance to innovate and push the boundaries of DriveWorks capabilities through UX/UI design
The Old Design
To customise the trailer in the old design, navigate through options using the right hand menu. As you can see it has an outdated design with poor typography, layout and an unenjoyable user experience when passing through each form. It was hard to navigate and difficult to download forms and view updated models.
Ideation - Prototype - Styleguide
Concept - A single landing page integrated into the live web application and easily navigated with an iPad. The new idea incorporated a live 3D model in the centre of the forms creating an immersive and interactive experience which provided a higher emotional and psychological attachment to product purchasing.
After establishing design requirements with engineers, developers and sales I created low to high fidelity prototypes to visualise the journey and UI elements. Alongside this I created a style guide containing UI components and branding assets such as typography, colours and layout to be ensure a consistent design across all media.
Solution
A Landing Page integrated into the live site. The top of the page provides product information and links. The interactive configuration section has a SolidWorks render plugin with a fully rotational live model of the trailer. The user can output sales files, SolidWorks parts and more on completing the customisation. This involved complex integration and excellent knowledge of DriveWorks coding system.
