WHOLEMOON.ORG
WHAT
Website Redesign
WHERE
San Francisco, CA
WHEN
September 2018
Icons re-created in Illustrator, based on the existing Wim Hof icons.
WHOLEMOON.org is a website operated by a Bay Area Wim Hof Method Instructor. The current site that he has is a very simple blog style site.
Working in a team of 5, my primary role began as the wireframe designer. All of us had a part in each stage of the project, and in the end, my role transformed into the final appearance of the design, based on the client’s feedback.
This was a 6 week contract to redesign the website of our client, Dustin Moon. Our team consisted of four members:
Sarah Earl: Project Manager
Mike Richards: Research Lead
Lena Li: Animation and Presentation Designer
Peter Counts: Experience Lead, Interaction Designer
Current Site
The current site to be redesigned was minimal and lacking in options. There was information, but even that was not clear and concise. The site was more like a blog than a functional website. There was already some branding and color elements to work with under the umbrella of the Wim Hof Method, so we moved forward with that in mind.
The current site lacked content and design.
Research
The research began with a survey that was broken down into categories that were more easily assessed. The primary input that we validated was that many people had not heard of the Wim Hof Method, or Dustin, for that matter. Working with the client, we finally managed to get a list of current and past clients and were able to get more insights from interviews with them.
A User Persona was created.
We produced affinity maps based on the data we gathered and determined pain points that could be addressed:
-
Visually dull presentation, with no apparent brand identity
-
Lack of functionality in terms of the booking process
-
Lack of user-engagement features
From here, I was able to start sketching out solutions.
Wireframes
Site Structure Sketches
At the core of the project was re-thinking how the site would be laid out. Quick sketches assisted in visualizing the flow of the user.
Quick Digital Mock-ups
As a team, we each created simple mock-ups of what we thought the website could be. We took aspects of each of the design directions that worked and removed those that we deemed unnecessary. From there, we were able to narrow down the design direction to two different options to explore further.
Landing Page Development
The resulting screens...
Initial iterations of the landing page.
Final Design Direction
From the iterations of site designs, the team selected two design directions to propose to the client in order to move forward with one. He chose my design and at that point, I took over as the lead visual designer.
Once we had our direction, it was a matter of putting it all together in Adobe XD.
XD was chosen over using Sketch because of its advanced prototyping tools that we were more quickly able to give a functional sample to the client with a full set of design specs that he can give to a front-end developer for deployment.
Option 1
Option 2
Website Layout
Mobile Layout
Check out the full webpage...
or the mobile version...
