Rogerwilco Concept and Prototype
User interface design and front-end implementation for my current employer showcasing the possibilities of usability when traditional elements have been removed.
At Rogerwilco we are fortunate enough to have some extra time on our hands every once in a while. We could use this time to up-skill ourselves by learning a new framework or tool but what really gets me going is when my development team lead tasks me to revamp our website.
I’ve heard of creative agencies outsourcing their own website design due to so many different approaches and ideas from all departments and people within the business. It is extremely difficult to get all parties involved on the same page.
- Year: 2020
- Agency: Rogerwilco
- Scope: UI Design and Prototype
- Tools: Photoshop, HTML, CSS, jQuery
This is why my team lead has asked me to keep my work under the radar initially before we present it. He has given me an exciting opportunity to redesign our website but with one very specific requirement; move away from the traditional burger menu.
This means creating an interface guiding the user through means of visual flow and story telling instead of the normal menu structure.
The first thing I did was find websites that have also done away with the traditional menu to use as inspiration. After this I gathered the content from our current website and arranged it so it would tell a story rather than just plonking text on a design.
The core feature of this project is most probably the navigation, an intuitive “drag-scroller” which allows the user to vertically drag to navigate to different pages. Taking that into consideration, I wanted to have a fast, beautiful and instinctive website that is still SEO friendly.
I opted for a solution that still allows google bots to crawl the site, has fast page loading times and includes fun micro animations on scroll.
I achieved fast navigating through the website without any hard page reloads by utilizing the History API pushstate to load content dynamically. For adding micro animations on elements I used a combination of ScrollMagic.js and CSS.
Additional intuitive features includes draggable sliders, custom cursors which indicates usage on hovering certain elements.
It was time to present, this time, not only to my team lead but to our CEO, Managing Director and COO. Stressful as it was to present an in-house website revamp to the people, that kind of considers it as their own child, it was a success! They loved the new forward thinking approach and were just as excited as me to launch it as an A/B test alongside our current website.