Design Process
During the project, I followed design process to create user-centric and visually appealing products that meet both user needs and business objectives.
1. Research & problem understanding
Problems:
Our brand was all over the place visually, making it hard for people to recognize us.
- Visual: Our stuff looked mismatched, like they didn't belong together. Customers couldn't see us as one brand.
- Marketing: Because our visuals were unclear, people didn't know who we were. This made it hard to keep old customers and get new ones.
- Development: Our design process was chaotic. Without clear rules, our developers spent too much time redoing things, slowing us down.
Goals:
To fix things up, we decided to create a consistent look and feel for everything we did:
- Visual: Created a style guide that covered fonts, colors, images, and more to give our brand a cohesive vibe.
- Marketing: Make sure all our materials match the style guide to make us more recognizable.
- Development: Built a design system based on the style guide, so our developers could work more efficiently and reuse what had already been done.
- Skin Research Laboratories mostly sell its products online, so it was extremely important to redesign the current website and make it user friendly and appealing to the current and future customers.
Process
To understand what needed fixing, we had to figure out what wasn't working and what we wanted to achieve. So, we went back to basics:
- Understanding the target audience: We looked into who our customers are, what bothers them, what they like, and what the company wants for the brand and products.
- Gathering data: We used various methods to gather information:
- Team input
- User research
- Website analytics
User research
Customers are crucial in the selling process, so we needed to understand them well. I started with customer surveys and user testing sessions to gather insights about who they are, what they like, and what issues they face. This also helped us understand their thoughts on our current brand and website.
- 3 weeks of team brainstorm sessions
- 13 survey participants
- 5 in-person interviews
In team brainstorm meetings, I received some basic information about our target audience: primarily women, living in the USA, and regularly buying cosmetic products. Starting from there, I designed a survey with both general and specific questions about their personality, lifestyle, and thoughts on our current website and visual brand style. In total, I gathered responses from 13 participants.
To get deeper insights, I conducted in-person interviews with 5 users.I created several tables to analyze the interview data using the Miro service. This helped me to organize the information more clearly for myself and also allowed me to present the research process effectively to the team members.
Key findings:
- Our primary audience mainly comprised women aged 21-40 with average incomes. They typically relied on in-store purchases and recommendations from friends and beauty influencers.
- The main problems with our current website were navigating difficulties, challenges with interacting with website elements, and understanding our products.
- Customers struggled to understand why they should buy our products and what made our brand special.
Website analytics
To understand the functionality of the current website, I dived into Google and Shopify analytics, focusing on:
- User demographics: Identifying the characteristics of our visitors.
- Behavior flow: Observing how users navigate through the site.
- Top pages: Determining which pages receive the highest traffic.
- Bounce rate: Assessing how quickly visitors leave the site.
- Page load times: Analyzing the speed of the site.
- Conversion rates: Evaluating if visitors are taking desired actions.
- Mobile performance: Checking if the site is mobile-friendly.
- Site search analysis: Understanding what users are searching for.
Key findings
- The demographic data from the analytics aligns with our marketing research, indicating that we are effectively targeting our customers.
- The most visited pages are the product pages and the home page, while the blog and news sections are rarely accessed.
- The click-through rate on banners is notably low, suggesting that customers are not drawn to our campaigns for some reason.
- A significant portion of visitors exit the website without adding products to their cart.
- The majority of users access the website via mobile phones.
Solution
During user research, a significant issue surfaced: customers struggled to grasp what makes Skin Research Laboratories products unique and why they should purchase them. To address this, I established brand pillars rooted in the core values of our company and the needs of our customers.
SRL stands for trust, safety, and effectiveness.
Why is it trustful?
- Developed in laboratories
- More then 30 years on market
- Highly scored by customers (medium score around 4.5 based on Google search results)
- Used by people you can trust (instagram and youtube influencers, bloggers, cosmetologists)
Why is it safe?
- Tested in labs
- Has complete list of ingredients, warnings and tips on website
- Support chat that asks any questions really fast
- Tested and recommended by experts
Why is it effective?
- Multiple customers positive reviews
- Photos before/after
- Customers stories when the product changes their life/skin/self-estimate
2. Ideation & sketching
After completing the research and reviewing the results with my team, I transitioned to the ideation and sketching process for the website.
3. Visual identity & design system
The original logo is highly recognizable, so I needed to keep it while updating the overall aesthetic. Thus, I built the entire visual style around the logo, expanding its influence. The primary colors are blue, black, and white, conveying cleanliness, intelligence, and beauty. To add warmth, I included beige and soft pastel pinks. The goal was to modernize the look while staying true to our identity, standing out from competitors, and showcasing why customers should choose us.
Design system
Collaboration with developers identified platform preferences, technical limitations, and workflow challenges, informing the creation of a comprehensive design system:
- Implemented a Kanban-based file organization system in Figma to streamline developer visibility and planning.
- Regular attendance at development meetings facilitated ongoing communication and alignment.
- The design system addressed accessibility requirements and adhered to WCAG standards.
- Templates were developed for high-demand assets such as marketing emails, hero images, and promotional web pages.
- System on reusable cohesive design components.
4. Implementation
After finalizing the approved style I produced a variety of assets to cater to different needs. This included website redesign, visuals for various marketing campaigns, development of a new series of packaging inspired by the expanded style, and providing consultation to team members, clients, and distributors on design implementation matters.
Web site
Email campaign
Social
Package
Outcomes & conclusions
- Enhanced website UX/UI and improved brand recognition contributed to increased sales compared to the previous year.
- The design-to-implementation process was reduced by half, streamlining development efforts.