Besides just needing a general refresh, the old Fresh website had become a Frankenstein of sorts. It contained years of random pieces being added on at will, with a lack of time to put enough thought into them.
Early on, we set expectations by discussing KPIs and general goals—the most important being to increase engagement (conversions) and to clearly explain who we are and what we do. Simple, right?
Because we had a good foundational knowledge about our target users from past research sprints, the design team began with general site IA and navigation structure. After that, we sketched zone diagrams both collaboratively and independently.
While working on the website, we found ourselves in a unique situation, given the fact that we were evolving our brand at around the same time. We spent more time than we usually do (with client work) on the visual design phase, letting ourselves explore different aesthetic options.
As soon as we felt we had a good amount of screens, we ran a few testing sessions with a mix of friends, past clients, and former employees. We tested for specific assumptions and known problems we were trying to solve. The feedback definitely kicked us in the right direction.
One of my favorite parts of this process was taking the opportunity to flesh out the Fresh design language, which went hand in hand with my work on the Brand Guidelines. We almost always deliver a UI kit (static and/or coded) for client projects, so it was fun to redevelop our own.
Ours included base elements such as typography specs for desktop, tablet, and mobile sizes (created from a type scale), spacing specs (margin/padding), and the grid, as well as more complex modules found on specific pages.
I spent some time on this project learning how to use Principle to demonstrate interaction/animation ideas to our developers who worked on the site. Most prominent is the Process Diagram, and there are a few on the case study pages as well. Many of them are still being added later this year (we launched with an MVP version of the site).