ZipIt
Project type:
Web Redesign
Services:
Web design,
UI/UX
Client:
Throughout the years, Zipit has emerged as a prominent provider of legal services, tailored to the needs of both startup and already established enterprises, characterized by their emphasis on forward-thinking solutions and innovation. Lawyers by education, entrepreneurs by heart. ZipIt knows both the regulations and the business.
Project goals
The law firm needed new and fresh design of they years old website. The appearance had to match the innovative approach of the services they provide. The client requested very light and simple design, that had to get out of the usual patterns for design in the law-related websites which usually are very serious, boring and too corporate. The challenge was to balance that with their desire to have a style that will appeal to the IT sector which is their primary target - a look that is witty, futuristic with a pinch of virtual reality feeling without being too sci-fi.
ZipIt already had logo that was well recognized in their field and didn't need big changes, so I had some initial guidelines. I also decided to incorporate the zip motive somehow across the different pages. I started to narrow down the creative direction of the project by offering moodboard that included a lot of geometry shapes, examples of typography and feeling of spaciousness. I also played with some color nuances as the client wanted to spice up everything by not rely on black and white palette anymore.
Approach
After clients approval of the design direction, I had discussions with development in order to discuss possible parallax and masking animations that will give the futuristic IT feeling of the website. I did the wireframes of the two pages including most of the graphic content in order to communicate my ideas with developers. I've used 5 column grid, so that when I alternate between sections I can use roughly 40% of the main container for text and leave the bigger portion free for nice visuals and animations. In cases where we we needed repeating content boxes that were only 2 or 3 in row, I used respectively the 2 or 3 column grids just for that section.
Solutions
-
The Digital futuristic or Virtual reality type of look was achieved by using fading backgrounds, gradient fills for geometric shapes that fly around as well as 3D rendered style of imagery. Most of the pages contain this motive of zip by having a dashed line with a zip that moves with user while they are scrolling, guiding you down to the call-to-actions buttons. Not having sudden changes or dividers between sections was also a decision to support a more immersive experience.
-
The concept page was one with the most text-heavy content. That's why I had to balance with ideas for animated visuals to keep the interest. Alternating between left and right positioning of the text and splitting it into separate chunks was another way to make it easier for users to digest everything.
-
I used accordion UI pattern to fit the whole content on less space and not make users scroll so much, as well as helping them concentrate on the area they are looking for. Icons for each area of specialty are following the style of duotone with gradient, that was chosen in the design direction.
-
For the team page I wanted to come up with a creative way to show so many photos without making it boring. So I decided to make custom background for the founders of the Law firm that symbolized digital pixelization. Another way to keep interest was to change the shape of the person's photo, depending if they are associates of firm's partners.
-
The challenge here was to fit all the testimonials in a nice pattern, that's why I used the masonry style of box ordering. We've decided to add some of the company stats to make the whole page a bit more interesting.
-
The press center is the blog part of ZipIt's website. It has 3 subcategories shown on top as tabs. Again semitransparent overlays and overlapping boxes in this page keep the design style consistent.
Mobile version
Very simplified navigation and texts overlapping animated graphics were key for an interesting mobile version of the website. It took a significant effort to customize the sizes of the font so that they are not too huge for the mobile experience and safe space, but also look good and balanced. Some UI though needed additional rearrangement in order to work well on mobile as with the example of clients' carousel on the home page.
