300 Spectrum Center Drive, Suite 1110
Irvine CA 92618
520 Broadway, Suite 200
Santa Monica CA 90401
470 Ramona St
Palo Alto CA 94301
Arkadiankatu 6, 00100 Helsinki
John Stenbergin ranta 2, 00530 Helsinki
Visiokatu 1, 33720 Tampere
Helsinginkatu 15, 20500 Turku
Hôtel des Postes Place Numa-Droz 2 Case postale 2511
+41 32 727 70 70
UAG is a top international brand for protective device cases. They asked us to build a completely new e-commerce website to increase usability, storytelling, brand expression, and performance. We worked closely with the talented team at UAG - this was a true partnership throughout the project.
A discovery workshop in action
We started with user research and strategy workshops, building a solid understanding of the pain points, opportunities, and goals. We also analyzed the current site to discover what was working and what can be improved. This led to a game plan that would guide the rest of the project, User Personas based on data, and a vetted feature backlog that took user needs, business needs, and costs into account.
Once we had a good understanding of the current features, new features to add, and features that will be implemented in the future, we got to work organizing everything into an intuitive and future-proof structure. UAG had run out of room to grow with their old site, so making sure this new structure works well into the future was very important.
Our high level information architecture
At Vincit, we try to get the direction locked down before starting on designs or wireframes. Since wireframes influence much of the layout, it’s important to have a solid creative plan before we get further into the process.
UAG has built a successful lifestyle brand with a die-hard fanbase that loves their content. Casey, the Creative Director at UAG, had a very specific brief. It went something like this: “Make it so easy to order, that while browsing our lifestyle content, I can buy a phone case at a red light before it turns green.”
"Make it so easy to order, that while browsing our lifestyle content, I can buy a phone case at a red light before it turns green."
The shopping flow
This is where Vincit does things differently. Usually, when companies talk about creative direction, they mean Art Direction (colors, typography, and design elements.) That’s a part of it, but the experience is more than the visual design. This strategy of focusing on storytelling and streamlined shopping gets woven into the Art Direction. But ok, let’s talk style.
Our goal was to translate UAG’s brand style into a digital form that enhances usability rather than hurting it. We focused on the main themes of their brand: Rugged, Premium, Exhilarating, and Real. We made some interesting design decisions to embody these themes, such as our personal favorite: Replacing any white across the entire site with our “As close to white as beige can get” color to provide a custom, high craftsmanship atmosphere. We also pushed UAG to incorporate more small-form video content into the site, for example, in the new “Instagram Story” inspired hero sections.
UAG uses Shopify Plus for their commerce platform. This presented an interesting challenge since typically companies build within Shopify using Liquid, Shopify’s templating language. In order to improve purchase speed and performance in a big way, we needed to use some cutting-edge technologies. To sidestep the usual limitations of Shopify, we built a custom site using React and Gatsby, connected it to Contentful CMS and the Shopify API, and set up a nice deployment pipeline with Netlify.
This has two major benefits: Gatsby, being a Static Site Generator, greatly speeds up page load times. Secondly, building the site using React opens up a huge pool of quality engineering talent that UAG can tap into if needed. Using Contentful for UAG’s lifestyle content also provides them with the ability to easily customize their content, spin up landing pages, and so on. We should also mention that this approach didn’t require migration of thousands of SKU’s and it retained UAG’s current process for managing products.
This is a great project to work on for both the engineering and design teams. Working closely with UAG’s creative team has been very rewarding, especially after seeing the creative ways they’re making the site their own with their content post-launch.
This is an ongoing project - Next up is Usability testing, A/B testing, more features, and ongoing improvements. Stay tuned!
Yamaha Watercraft Apps