Building a new e-commerce website for the world's first home body scanner
Overview
The Naked Labs 3D body scanner offers a comprehensive analysis of the user's body shape, measurements, body fat percentage, and weight to give insights into how the user lifestyle affects their health. The team at Naked Labs and Edenspiekermann got together to create their new brand and website experience that would feel as premium and thought-out as their product.
Challenge
When our partnership with Naked Labs began, we identified several areas where their old website fell short. The website failed to effectively communicate the company's vision and lacked engaging storytelling around their innovative product. Additionally, the customer support experience was inadequate and did not provide the level of service that Naked Labs customers expect. The client wanted their new website to help them nurture their product pre-order signups and ultimately build a long term community around their brand.
Research
To develop the brand concept and website, we began with a 3-day immersion phase at Naked Labs offices. We conducted desk research, stakeholder interviews, and leveraged user information from the beta test group to develop archetypes representing priority audiences for the new website.
The following are seven archetypes I defined that guided our decision making around features, functionality and content for the new Naked Labs website:
The curious newbie
Looking to lose weight, build strength and accept their body. Needs motivation and guidance when it comes to diet and exercise.
The goal focused
Has specific fitness goals and is determined to achieve them. Insecurities about their body drives them to better results.
The regiment focused
Wants to get back in shape. Needs discipline to stay on track and requires frequent feedback on their progress to stay motivated.
The data enthusiast
Wants to visualize, measure and track their fitness. Loves pushing their limits and has thirst for fitness and diet knowledge.
The physical appearance focused
Driven millennial who cares about physical appearance. Passionate about fitness and enjoys competing. Brand ambassador in making.
The holistic health focused
Aware of their body limitations but willing to do anything to improve their health and emotional wellbeing.
The brand ambassador
Believes in Naked. Very knowledgeable about fitness and health. Maybe in business as a trainer, gym owner or nutritionist.
Ideation (Messaging matrix)
Our next step was to create messaging matrix that defined high-level communication concept for each of the target groups across different communication channels. Together with Naked Labs team, we crafted a bunch of messages that sounded something like below:
- “Give us 20 seconds and we’ll guide you back on track.”
- “We track the small goals so you can focus on and reach the big goal.”
- “You are not doing it alone!”
- “Naked is a way to see exactly how your workouts affect your body.”
- “We will add facts to your feelings.”
Additionally, We brainstormed website content ideas by looking at other product websites that Naked Labs team liked and asking HMW questions, such as:
- “HMW showcase our product on the new website?”
- “HMW engage users as they scroll? ”
- “HMW present our product tech specs?”
- “HMW make user choose Naked editorial content?”
- “HMW best assist our users when they have questions about our product?”
We looked at the best in class examples of product websites for showcasing features, technical specs, editorial content, and support sections to generate ideas for how these elements could be incorporated into the new Naked website.
Through ideation & competitive analysis, we narrowed our question to: How might we create a website that combines a visually stunning brand and product showcase with rich lifestyle content experiences? We used this question to guide our further work.
Sitemap and content priority guides
Following our immersion phase, I developed a sitemap and content priority guides for the main pages and user flows.
Given the website's size, I recommended abandoning wireframes in favor of using content priority guides as a content gathering document. I created the guides in a Google doc format, with each page featuring clearly defined elements that the client could fill in. This approach was successful.
Visual direction
After gathering insights during our Research and Ideation phases, we created a themed visual vocabulary wall. Then, we asked the Naked Labs team to identify which visual references from this compass aligned with their new brand vision.
The exercise resulted into a moodboard alongside Naked brand values that were extremely helpful for aligning with stakeholders and justifying the reasoning behind design decisions later on in the process.
Final Output
In just a few months, we revamped and launched the Naked Labs website, showcasing diverse body stories. Our primary focus was on creating a more upscale brand image and developing a platform for our client to share their product vision and engage with their target audience.
