CLIENT
The Academy Brand
MY ROLE
Art Direction
UX Design
UI Design
SUMMARY
I led the design and direction for a website refresh and re-platform
SUMMARY
I led the design and direction for a website refresh and re-platform
SUMMARY
I led the design and direction for a website refresh and re-platform
SUMMARY
I led the design and direction for a website refresh and re-platform
PROBLEM STATEMENT
Academy Brand were primarily focused on a re-platform, to move away from their existing Magento platform onto Shopify.
They needed a visual refresh, greater flexibility for their content, and a website they can invest more time in scaling rather than fixing.
PROBLEM STATEMENT
Academy Brand were primarily focused on a re-platform, to move away from their existing Magento platform onto Shopify.
They needed a visual refresh, greater flexibility for their content, and a website they can invest more time in scaling rather than fixing.
APPROACH
The largest challenge going into this project for our team was scope, so we had to be incredibly resourceful with where we focused our time.
With that in mind, we agreed the priority was to focus on basic core ecommerce features that we knew would meet their needs.
APPROACH
The largest challenge going into this project for our team was scope, so we had to be incredibly resourceful with where we focused our time.
With that in mind, we agreed the priority was to focus on basic core ecommerce features that we knew would meet their needs.
Style boards
Style boards
As part of a re-design, the client and their internal design team were also seeking guidance on font selections and pairings going forward.
Style board explorations played an important role in decision making on the direction that would be rolled out across both web and print collateral for the brand.
Type refresh
Type refresh
Academy Brand were seeking a more contemporary feel from their type. After multiple rounds of changes, we landed on Miller and FF Mark — the class and elegance of Miller contrasting with the masculine geometry of FF Mark.
Lookbook
Lookbook
Looking at Academy Brand's analytics and Hotjar videos of their existing lookbook behaviour we discovered some unpredictable behaviour patterns. With no way to shop a look or link through to a featured product, users were leaving this feature misguided.
The approach for the lookbook was to allow users to maintain their focus on the products by allowing them the functionality to browse and shop a look.
Shop the Look
Starting with 8 different options, I then narrowed them down to 3 prototyped options. After a quick client review, I had 2 key options I could then test on users internally. The testing highlighted some language and information needing tweaks, but ultimately, it felt that the real intentions of a shopper could not be simulated to the extent needed.
With 2 options that both had their own pros and cons, we chose to run with the option that displayed a larger product image and was more focused on the adding to cart function than a browse function. These assumptions would be followed up post go-live.
A design system beyond the project
A design system beyond the project
Feeling frustrated with the time and budget allocated for such a project, we brainstormed ideas that could free up some time in future projects. We identified the key areas that could be re-applied with future clients in hope to streamline those early steps in setting up styles and also to align design and developer teams in a fast paced environment.
Learnings
Learnings
1 option is better than many
When you're communicating your process and solutions to a client who isn't always the key decision maker, it's important to keep your points clear and concise enough for easy re-communication. Even though the client may appreciate the extra displayed effort, it can muddy the waters when feedback comes back out.
