UAG eCommerce Website
1.1
Overview
UAG is a top international brand for device cases. They asked us to build a completely new eCommerce website with better usability, storytelling, brand expression, and performance.
We worked closely with the talented team at UAG - this was a true partnership throughout the project.
2.1
Research
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.
3.1
IA
With a good understanding of the current, new, and future features, we organized 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.
4.1
Creative Direction
“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.”
This was the vision that UAG gave us. We incorporated it an overall product strategy and married that with a creative style that would elevate UAG’s brand and content. Since Creative Direction is part style and part product strategy, we locked it in before starting wires. This way we have a theme for the flow of the site, rather than just for the visual design.
4.2
... Flows
We removed most of the friction within the shopping flow - if a customer is to place an order within a 20 second window, they don’t have time for any unnecessary steps.
The site should automatically detect which brand and device they’re using, serving up shortcuts and suggestions based on their most likely purchase. It should offer quick payment options based on their device, such as Apple Pay. It should remember their favorite categories, allowing them to bypass filters for devices they don’t own. The list goes on - we re-imagined what a personalized shopping experience means.
4.3
... Style
Our goal was to translate UAG’s brand style into a digital form that enhances usability rather than hurting it. We defined the main themes of their brand: Rugged, Premium, Exhilarating, and Real.
We made some interesting design decisions to embody these themes. One minor touch I especially liked was 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.
5.1
Wires
Wireframes provided a communication tool and validation of our user flows and strategy.
We tested the usability of our ideas and got answers to the remaining strategy questions. The wire prototype let us test quickly and also provided our developers with the information they needed to start building the back-end.
6.1
UI
Since hierarchy and design have a huge impact on usability, we don't linger in the Wireframe step for too long, ironing out all remaining usability decisions within the Design phase.
We designed page-by-page for all breakpoints, making sure we built a consistent experience across devices, but gave some extra attention to mobile because it’s the most-used format. This works well with the agile process, allowing our design and development teams to work closely together.
7.1
Dev
UAG uses Shopify Plus for its commerce platform. In order to improve purchase speed and performance, we sidestepped Shopify limitations by building a custom site using React and Gatsby. We 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.
8.1
Thoughts
This is a great project to work on. Working closely with UAG’s creative team has been rewarding, especially after seeing the creative ways they’re making the site their own with their content post-launch. I’m currently having a lot of fun doing deeper dives into high priority components and improving the UX over time.