PROBLEM
Mercedes-Benz R&D needed its online presence to meet expectations set by the upcoming concept car revealed at CES 2015. Their website at the time had a very outdated design and didn't represent the quality of work all teams were producing.
ROLE
Web design collaboration with another designer
Front-end development collaboration with developer
Front-end development collaboration with developer
Tools: Sketch, Photoshop, HTML/CSS
SOLUTION
We designed a modern website that showcased the elegant, high-quality work we do as a company. Our beautiful photography takes center stage while the use of our own serif and sans-serif fonts guide the user through the pages.
WIREFRAMES
Wireframes are extremely important to help layout content and nail down the overall composition of a responsive website.
PROTOTYPE
I created prototypes using HTML, CSS, and Javascript. Doing it with close to production ready code, allowed for better collaboration with the developer and faster development of the website. These prototypes allowed us to design delightful hover states and page transitions.
Scroll and Hover Prototype
Hover Prototype
FINALOUTCOME
We were able to launch the new website in time for CES, giving us a better platform for when the press and consumers wanted to learn more about our company. The final design exemplifies the luxury brand and amazing talent behind Mercedes-Benz Research & Development.
LESSONSLEARNED
During my development collaboration, I used a new tool called Edge Reflow by Adobe. This was a mistake as it had a steep learning curve and the output was less than desirable. I know now to not test a new product during production.