41 Winks
ReDesigning a B2B/B2C eCommerce website and branding for a woman owned small business.
Role: Branding & Web Design, design support throughout Shopify development
Type: eCommerce
Website: 41winks.com
_Services
-
Stakeholder interviews
-
Discovery & Research
- Branding
-
Information Architecture
-
UX/UI Design
-
Stakeholder collaboration
-
Engineer collaboration
-
Writing
_Deliverables
-
SWOT Analysis
-
Heuristic Evaluation
-
User Journey Map
-
User Flows
-
Hi-fi Mockups
-
Brand Style Guide
-
Marketing Assets
_Outcomes
Brand is easily able to update their own custom Shopify website.​
​
Consumer customers are able to easily identify promotions and join waitlists.​
​
Website now communicates B2B opportunities and easily funnels inquiries directly from the website.
Description:
A small scale company that is looking to re-focus on their best selling products, and promote custom and wholesale orders. I joined the team with the goal of reflecting the brands fresh image, in addition to incorporating new functionality for the company and its users.
_Understanding the Problem
The company had been passed to a younger generation of management who was able to build a great social media presence, and organically rebranded 41Winks. With sales clearly steering the company in a specific direction, it was an obvious decision to highlight the powerful eye masks and their messages.
​
Parallel to that, the company downsized. So on the backend, managing the website was draining time without doing as much as it could between customer and company.
> How could we improve the first impression of the brand, and essentially decrease the website's drop-off rates?
> What would better communicate the mission and energy that fuels 41Winks, and connect with modern, bold, professional but forever youthful superwomen?
​
> How can we add functionality to the website, to streamline and clarify custom and wholesale orders?
How might we...
o1
Engage users, inspiring interaction through a clear narrative.
o2
Present the brand with its product in a bold, modern and energetic way.
o3
Provide functionality for the wholesale users flow while reducing purchase order correspondence.
STAKEHOLDER
INTERVIEWS
SWOT ANALYSIS
HEURISTIC EVALUATION
USER JOURNEY MAP
EMPATHY
SKETCH
_My Approach
The company had a firm vision of where they were going, and who their audience was. They also knew that the current website was not serving them or their users. Together we analyzed the websites strengths, weaknesses, opportunities and threats. This sparked marketing strategies to be applied within the site and other touchpoints.
A strong kick-off lead to evaluating the best design practices, and the which designs were lacking or just outdated in terms of the usability and effectiveness of the experience. With all of this information we were able to assign value and map out low, mid and high priority features.
Ideation sessions served to bridge the companies goals with what was important to the user groups. Wire frames helped to explore the core navigation of features and strategy. Many iterations later, we formed a concept that best represented the brand and served its customers.
_Discovery
Together with the company we were able to weigh the strengths and weaknesses of the brand, address pain points in back end management, and prioritize certain features.
> Home page should clearly depict newest updates in product, campaigns, features inciting discovery. We should be providing opportunities outside of the main menu to explore the products.
​
> Customizing products will have its own page, detailing the possibilities/process, promoting this new service. In addition, this will help the company automize what is normally the an arduous back and forth process.
​
> The wholsesale user flow needs to be brought back from the highly personal exchange, contact for inquiry page, with a preliminary form. This will streamline exchange of information needed for orders.
​
> Navigation between product pages could be more transparent, reducing toggling between SKUs.
​
> Brand styles and content needs to be refreshed, appealing to a more modern but still youthful audience.
​
> Increase trust and credibility by incorporating more customer testimonials and a logo quilt for brand credibility and trust
​
> Without providing an internal structure to dedicate more time to the blog, we decided not to focus on its redesign outside of redistributing information.
​
> The ecommerce features (such as cart management, check out and account services) had a solid flow so we decided we did not need to spend resources reevaluating those.
SWOT ANALYSIS assessed the company current standing by outlining its strengths, weaknesses, opportunities and threats.
HEURISTIC RADAR PLOT showed the current state of features for our target user personas.
USER JOURNEY MAPS outlined the thoughts and feelings incited by the current brands touchpoints, and what opportunities arise to improve the user experience.
USER FLOWS for the retail shopper and the wholesale shopper, illustrated common drop-off points and activity seen in the current sites analytics.
Ideation + Wireframing
This research and mapping led to an ideation phase through sketching and then low-fidelity wire-framing. The focus in every iteration of the experience was to:
​
​
> Redesign the interface to better express the energy and boldness the brand emanates. Bring it up to todays standards of web and mobile, but surpass it in terms of charisma.
​
> Design a slightly unexpected but still intuitive menu that clearly organizes products, and helps orient the user.
​
> Strategically place "top sellers", customer testimonials and logo quilts to assure users of the brands credibility
​
> Design good experiences for finding information and forms completion for custom and wholesale products.
​
> Design interactions and variation in composition to invoke a sense of curiosity and discovery.
​
> Provide multiple opportunities to carry the brands narrative, and get deeper into the products story.
​
​
_The Solution
We elevated the energy of the brand with warm saturated colors, against the soft pastels of the product. Transitioning away from the brands sharp turquoise, we decided to use delicate black lines to add a layer of sophistication and depth.
Layered Navigation
To lighten the header, we opted for a side bar menu which is a more natural and efficient way for the eye to scan. However, buttons for ecommerce features such as search, account and cart were separated in the upper right as it has become the expected norm for users.
​
By organizing the single product into sub-categories we're giving the user the opportunity to discover each collection quickly, while still giving them their own space and the illusion of a larger product line. This experience of exploring a collection and what each message means aims to connect with the user in a more personal way.
Trust + Credibility
Because one of the companies goals was to attract more custom and wholesale orders, it was even more important to reassure the users of the brands credibility. Without trust, customers would be less likely to commit to larger orders.
​
We designed a logo quilt to display well known brands that the company had collaborated with or had product displayed with. This appeared at the base of every page before the footer. We also made sure strategically place customer testimonials and stories in areas where a customer would look for reviews or additional information. Including the customers name and an avatar would further instill trust and help connect the users with the customers.
Increased Functionality
With informative pages designated to the wholesale customers, and the retail shoppers looking for custom designs, the website is better representing all of the companies services. Processes that took a lot of repetitive communication back and forth between sales and the customer, is streamlined with easy to use forms. Inputs and selectors were designed with form validators to provide instant feedback to the user through color states and realtime messages.
Joyful Interactions
Using meaningful micro-interactions create little moments of delight, which make the experience fun, effective and personal.
Guiding Narrative
Getting those extra winks of sleep, taking care of yourself in any situation, and doing it all with playful charm is the brands mission.
Strong headlines, supportive detail, together with a clear call to action organizes these concepts and creates a conversational tone.
​
Composition
A fixed side bar menu lightens the page, making navigation always accessible and alway providing reference of where the user is on the site.
For desktop resolutions the menu is located on the left 1/6th of the 12 column, 8pt grid, with the right 1/12 left as negative space, balancing the remaining 3/4 of the screen holding all of the content. Mobile resolutions have a hidden menu, with content holding 100% of the composition.
Content is organized in an asymmetrical 'z' pattern, a popular eye tracking pattern for low text pages. The balanced asymmetrical layering creates visual variance and movement, making the content less predictable. For ecommerce pages, we organized content in a 3 column grid, at 1/4 of the compositions width.
_Learnings
Working on this project as the solo designer really solidified my soft skills, specifically in presentation and initial client meetings. It was also great to explore how the user experience and marketing strategy would join together to bring out the best in the company.
​
If we had the resources to do so, I would have liked to design more interactions and transitions for a richer experience. I would also have enjoyed sitting down with users to do interviews or even A/B testing. Fortunately the company had previously done their own research into their user personas.
​
I'm enjoying working with the developing engineer and look forward to seeing these concepts be realized.