Who are ADSuisse?
ADSuisse is a Swiss company, dedicated to enable businesses around the globe and build real and firm relationships with customers. Their belief is in technology and its ability to solve complex business problems. ADSuisse’s primary focus is to meet clients with significant amounts of customer data with the countless possibilities of artificial intelligence. At the core of their service delivery paradigm is the understanding to build sincere relationships, based on mutual empathy and trustworthiness. The services they provide are the refinement of customer data, data discovery and customer insights. I’ve made the listed services as links if you’re more interested in what the company is doing.
The first thing we did was to set up a moodboard for both the visuals (illustrations) and the web design itself. With this sort of process we managed to define key aspects of the website's style in no time.
Low Fidelity Wireframes
Our main inspiration was Stipe’s designs. The way they combine different visual components like color and typography is on a whole new design level. In my opinion, Stripe has one of the best visual design teams in the world. We started with low fidelity wireframes. The first task at hand was the layout exploration. I iterated the possible layouts, and of course, I started with the mobile view. Side note: I believe it is of great importance to understand the benefits of starting a design from mobile first view.
Initially, we started with some rough wireframes so we could decide how we’re going to lay the content out. I believe that it’s mandatory to have the whole website copy before starting to design because you can take some decisions upfront like:
After we had the base wireframes for the mobile, we iterated on the component placement on the page, until we found the exact the layout we were looking for.
When we had the necessary wireframe for the mobile viewport, we easily upscaled to tablet. Thanks to the tablet view (or it’s dimensions) we took some solid decisions about the layout for desktop as well, as on many pages we’ve just upscaled part of the components for desktop.
Desktop was the most fun, interaction wise. I had the idea to show cards with interactivity like slide through, hovers and opacity scrolls (which was ditched due to technical reasons from the dev team, but it would have been awesome) See more in the Final State of Work.
Mid Fidelity Wireframes
While in this state of work, we experimented a lot with colors, gradients and the idea of wavy gradient background which Is inspired by the company’s logo. I had a set of pre-defined brand colors that I had to follow as well. After we managed to set the type scale, font weights, the grid and the general style of all the components of the website (like image blocks, illustration blocks, text blocks, etc.) I switched my focus mainly on interactivity.
Final Stage of Work
In the final stage of work on ADSuisse, when we had the colors, type scale and font weights, the grid setup and all the component styles approved I got to the illustration implementation and the interactivity of the elements on the page.
The illustration implementation was relatively easy since we decided what positions they're going to take beforehand. I had some general issues with the svg's while importing them from Illustrator to Sketch. The role those lovely visual components played was tremendous. Since the idea was to present the business of the company in a fun, warm, welcoming way, the illustrations were the key element. Now let's talk about interactivity. I'm a big fan of animation, interaction and general motion in websites. I believe users benefit from animations; they retain their focus more (of course if the animations/interactions are not overly complicated/too heavy) The website would have never been what it is, without her touch.
Interaction, interactivity and animation
Now let's talk about interactivity. I'm a big fan of animation, interaction and general motion in websites. I believe users benefit from animations; they retain their focus more (of course if the animations/interactions are not overly complicated/too heavy)
A prototype for the mobile view of the website in Framer. The main focus here was to show the parrallax effect on scroll of the illustration.
You can see the prototype live here.
While I did not play a big role on the design of the back-end, I started working on the CMS side-by-side with the ADSuisse team two months after it's initial release. There was a lot of User Experience work to do. See the example below:
Before and after of the profile screen in the CMS
The main logic of this profile section is the ability to see the comapny information rather than user info. The subscription plan of the company is shown under the company name and it is shown as a gradient. Depending on your subscription plan the gradient may varry.
API Keys Screen. Kudos to Emili Iv for the lovely side menu and icon design.
ADSuisse was a fantastic project to work on. The team is excellent, and the process was a pleasure. What's left now is the proper implementation of the designs and interactions.
September 2017 - December 2017;
February 2018- Present
Design Tools Used
Sketch, InVision, Zeplin.io
Link to Final Projecthttp://www.adsuisse.com/