e-Commerce
SOLE's new eCommerce platform is a brand-focused online shopping experience that showcases their vast array of products with a clean and reduced design.
During this project, I worked with SOLE to create the website framework and built a cohesive system of fluid interfaces that elevates the brand's products and overall experience. The website's minimalist tone paves the way for a smooth and enjoyable shopping experience while highlighting the brand's editorial imagery that visually connects it's users to their passions for adventure and comfort.
The website has been designed to provide a responsive and branded experience across mobile, tablet, and desktop devices, thus optimizing the user's shopping ability.
The current SOLE website was first launched at the beginning of 2015, not long before I joined the company’s design team. During my first year with SOLE, I conducted daily reviews of customer experience surveys that detailed their struggles with frustrating shopping cart functionalities, confusing product and page organization, poor content visibility due to hard-to-read color choices, confusing navigation bar setup, lack of visible customer feedback, and more.
The original website backend was written using Pearl, which was not flexible enough to fix these significant usability issues.
That is why I championed the building of the new SOLE website that offers contemporary eCommerce functionality across all platforms and devices.
When building the new website, it was essential to create a safe and pleasant shopping environment that users could easily navigate and explore multiple layers of content with instant support. I envisioned the design of the website to be a flexible universal mould made of modular blocks that could be easily rearranged to accommodate future changes.
Make it fast and easy to use
for everyone, everywhere
Give users more control
over their time
Create a platform for brand awareness, product education and deeper engagement
During this project, I served as the lead UX/UI designer and project manager, leading a team of six including designers, front-end developers, and back-end developers. We are a small team but are working efficiently and collaboratively on the complete and continual redesign of the SOLE website, for improved daily used by users and retailers from around the world.
& ideation
I led efforts to evolve the SOLE website’s usability and identified user’s pain points related to its browsing and product discovery experience.
& vision
I executed comprehensive industry research, defined the design concept and ideation, and conducted usability studies to establish key audiences and customer journey maps. I also created the strategy now used to gather user feedback about the website usability, to help inform and prioritize future improvements.
& scope definition
I continue to set goals and objective for the new SOLE website based on key stakeholder interests, customer feedback, and industry-leading UX/UI practices.
& validation
I created website maps, user flow charts, explored information architecture, content strategies, wireframes, and both low and high fidelity functionality prototypes. I also developed a design system of reusable components and styles to efficiently scale the website and maintain consistency across desktop and mobile platforms.
& coordination
My designs were made to translate across all platforms, in the best possible way. I delivered detailed specs to my team’s front-end developer for final execution and worked remotely with back-end developers to validate the design team’s intentions.
As the project manager, I strategized the overall workflow of the team and managed all steps of project development and execution from both macro and micro levels. I also reported on project progress to stakeholders, executive management, and the design team throughout the project lifecycle.
It is imperative to understand the different factors that may influence the user experience. For this project, my research included reviewing SOLE customer surveys daily, reviewing Google Analytics data, conducting interviews with the company owner to gain insight into the business direction and future projections and keeping up to date in changes in user behavior trends.
Below are examples of SOLE customers feedback I found critical for my research.
Determined to understand the challenges that SOLE website users faced, I conducted an internal usability test of the current website and mapped all possible pain points. I remediated them later through different working phases.
As a runner, I developed a case of Plantar Fasciitis. I want to run again and be pain-free.
I suffer from foot pain and cannot do my job which requires many hours of hiking. I want to be pain-free and hike again with a full backpack.
As a CrossFit trainy I want a pair of footbeds that provide plenty of arch support for heavy lifting and enough cushion to prevent pain. I would use them in my gym shoes for CrossFit style workouts.
I have chronically painful feet and legs since my motorcycle accident seven years ago. I want a pair of comfortable shoes, so my feet will have proper positioning.
I am a triathlon racer. I want insoles that will solve my moderate pronation and arch pain while running an IronMan competition.
My casual summer flip-flops cause intense lower back pain. I want a pair of sandals that will take my sore feet and back pain away.
Enhancement of brand awareness
Education about brand products
Increase in online purchases through brand eCommerce
Deeper engagement with new audiences
An increase of returning customers
I began our first team brainstorming session with the five W’s and How:
- Why are we building new website?
- Who are we building it for?
- When and where will it be used?
- What are we building?
- How could we measure its success?
During the meeting these questions became more specific:
- How can we tell the brand story?
- How can we better educate users about SOLE products and their features?
- How can we simplify product search?
- How can we improve shopping experience to make it intuitive and smooth?
- What business opportunities does this product create?
I suggested that we put the user front-and-center in our thinking, rather than the business, an approach that wasn’t practiced during previous development. My strategy was first to establish SOLE’s key audience.
I started the process with quantitative research by studying website analytics, which provided a lot of information on where users are visiting the SOLE website from and what their goals are while there.
- Solution to treat existing medical conditions
- Preventative solution to foot pain
- Lack of education about body performance
- Lack of education about SOLE products
- Inability to select the right product
- Having less pain
- Feeling comfortable
- Performance improvement
- Injuries prevention
After a thorough review of data we defined six groups of users:
1. Professionals who spend long hours on their feet, such as nurses, military professionals, and construction workers.
2. Athletes and sports lovers, who are looking to enhance their performance and prevent sport-related injuries, including runners, soccer players, and hockey players.
3. People with orthopedic issues, such as plantar fasciitis, arthritis, and back pain.
4. Eco-conscious consumers who are looking for sustainable products.
5. Outdoor adventurists, such as hikers, rock climbers, skiers, snowboarders, and more.
6. People looking for comfort and support in their everyday footwear.
To help the team make informed decisions about the content that needed to be featured on SOLE’s website, we developed key personas that represented the needs, wants, and personalities of the largest groups of the website’s users. Other groups of users were given secondary priority, and tailored experience for these groups will be in development at later stages.
From a revised company vision, new product development and direction, and analysis of website traffic data, the following “SOLE of Adventure” key personas were created:
Coming out of our research and creations of the website user personas, I envisioned the future of the new website experience to be exceptionally helpful to the user by providing customized product recommendations that meet their needs and goals of using the website. I wanted to create explicit, responsive, well-curated, and easily accessible content that made SOLE’s products enticing to their target audiences.
Accessible
Consistent
Fast
Engaging
First, the website needs to be accessible.
Yoursole.com should offer a universal experience that all consumers could access any time, anywhere.
Second, it needs to be consistent.
To create a cohesive and on-brand experience, we should set site-wide guidelines for design features, and the look and behavior of responsive elements, according to their viewing platform. By setting site-wide guidelines for features such as buttons, forms, and how responsive elements changed according to their viewing platform, I created a cohesive and on-brand experience.
Third, it needs to be fast.
This should be done by creating streamlined navigation that helps the user quickly find where they want to go while keeping website content concise, relevant, and focused.
Fourth, the website needs to be engaging.
The website framework, content, and design should speak to the shared passions that SOLE’s target audiences have. Based on recent studies, 86% of buyers will pay more for better customer experience; therefore we can assume that customer experience will become a key brand differentiator, rather than price or product, by 2020.
To understand the context of users, I wanted to gain a clear picture of where the user has come from and what they are trying to achieve while visiting the SOLE website. I strived to identify gaps in information or pain points that the user may experience.
Using Google Analytics, I studied how users interacted with the website, looking closely at which actions were taken where on the website to try and achieve a goal. I intended to identify and catalog all interactions that the user might have with the website. This data helped me in identifying particular pain points in the website experience that caused the user to abandon their experience on the website entirely.
I also reviewed user feedback regularly, taken from a post-purchase survey, to understand how the user experienced and perceived the website, any questions they had, their feelings, and their purchase motivation.
My team and I narrowed down the information that we wanted to map about each user and their behaviors while on yoursole.com.
Synthesizing the data, I worked on improving usability, creating a new version that focused on helping users accomplish their goals successfully and with a sense of satisfaction.
Tasks
What is the user trying to achieve?
Questions
What does the user want to know?
Touchpoints
How does the user interact with the company?
Emotions
What is the user feeling at this stage in the process?
Weakness
How does the company let the customers down at this stage?
Influences
What helps to shape the user’s decision making process at this stage?
Once I completed a user experience study and produced the website user personas, I developed a sitemap to help us to define the organization of branded commerce content in a way that would best help users navigate the website quickly and as expected.
Having restructured sitemap, I had to make sure that the content fits its context.
A team of copywriters was tasked with creating blocks of relevant content based on the eCommerce research and educational materials that I gave them.
- Organize and structure site content
- Create intuitive navigation system across the pages for desktop and mobile
- Develop search systems to help customers quickly access the information they are looking for
To test broad flow concepts, I sketched simple, low-fidelity prototypes using Adobe XD. My thinking behind these interaction models was to try to minimize decision fatigue for users. I hoped to create clear and focused navigation that would result in the quick discovery of desired content and points of customer service assistance.
To be able to chart the path from global navigation to the product grid walls, I first had to produce wireframes for mobile platform viewing. The decision to begin with mobile design came from previous challenges in adopting desktop flow to mobile platforms.
Prioritizing content for smaller mobile screens allowed me to determine the hierarchy of the website information. I planned the user experience, ensuring that the flow involved a minimal amount of steps. Only then did I work on adopting the design to desktop and tablet platforms.
I conducted information usability testing with these design prototypes, asking for team feedback about accessibility and usability along the way.
Once I had the initial screens designed, I began to work on explorations for the motion behaviors of the UI. Simultaneously, I was extending the visual design to all of the screens required for prototyping the selected flows.
Create functional minimalism
Define how the user interacts with the site functionality to perform required tasks
Distinct visual hierarchy to ease the task of content comprehension
I developed user interaction scenarios for the home page, product collections page, product collections list, product list, product pages, and check out screens for both desktop and mobile devices. While working on each section, I developed final comprehensive layouts for each page, working with frontend developers to resolve both micro and macro interactions.
Driven by sincere intention to help users find their ideal product, I created the SOLE personal shopper, a website feature designed to offer a list of recommended products for a particular user based on their answers to six simple questions.
This feature helps customers discover SOLE’s product lines, better understand the defining characteristic of each product, and learn how particular product features pertain to their needs.
The “Shop By” is an advanced version of the SOLE Personal Shopper. It offers a more extensive filters menu and helps users learn the different features of each footbed and how they will apply to the user’s chosen activity, shoe type, and product material preference.
This feature was born out of consistent feedback from customers who were frustrated with the lack of information about the differences between footbeds and the need for assistance in choosing the best product for their needs.
To educate customers about this new point of assistance, I created a full-width banner on the footbed collections landing page with a drop-down menu that allows quick and easy navigation with visually appealing icons.
Once closed, the banner is still accessible in a smaller form at the top left-hand sidebar.
With more and more users shopping on mobile devices, Yoursole.com was in need of design. Creating a united mobile site for a brand with so many properties and types of products is a great challenge.
At the start of the project, I researched social commerce and the way people shopped on mobile. With that, I created a mobile strategy for the new yoursole.com. Along the way, I created a user flows, wireframes, prototyped functionality, and wrote specifications for design and behavior for mobile.
I created extensive UI library of custom-made elements, forms, color schemes, and typography style guides. With such a system, new colors, materials, features, or sections can be added without breaking the site’s structure.
Define visual design of product user interface
Create Mobile and Desktop style guides for consistent look and feel of various layouts
Develop UI system with expandability in mind
Give content more room to breathe, using white space, greatly improving a user’s experience
Below is an example of design decisions I made during the design phase.
The home page designs below represent my visual direction for “Look and Feel” design explorations. I worked on the style of the imagery and grid systems on-screen with the goal to bring the content to the forefront and, where possible, make the content itself represent the navigation system. I intended to reduce decision fatigue from poor IA planning and execution by previous design teams.
I produced all final high-quality design comps and the specifications of website fonts and design rules. I also created all cutting assets for all resolutions and documented the CSS properties for the team developers.
Once final comps and specs were developed, I was advised by my frontend developers to forego creating a high-fidelity prototype and proceed with execution of the website design in a local environment to test the interactive usability.
I am responsible for the quality control of all pages built into the live environment, and I am the first to review all design layouts, test flows, and functionalities. I work closely with the team’s frontend developers to bring home product page fine-tuning and interactivity.
To successfully launch the new SOLE eCommerce, we should put it into the hands of SOLE’s customers. Currently, I am exploring the possibilities of remote testing and working within a budget to find trusted online testing platforms that would provide recorded user interactions with SOLE’s new website. I am working with the SOLE sales manager to understand which KPIs should be measured and outline the definition of success.
Aspects included in the measurement of success are:
Task success rate
Task completion time
Engagement Retention
Conversion
User acquisition
Once the KPI is defined, I will develop clear instructions for testing participants to ensure that the data collected pertains to the type of information needed for final product page fine-tuning and, overall, a successful website launch.
As project leader, I strategized the team’s workflow plan and managed all steps of project development from both the micro and macro levels. I designed and presented each stage of project development for all platforms to executives, senior stakeholders, and designers. I was responsible for keeping everyone accountable for their deliverables, lead weekly check-in meetings, and updated internal project progress documents based on monthly reports from all team members.
Currently, I am waiting for the finalization of the functional check out process. Once this is complete, I will test the shopping experience from beginning to end before disseminating it for internal user testing and feedback.
A lack of human resources is the main obstacle to this project. Because of this, I took on many tasks during various phases of the project to keep the workflow and progress overall moving forward and on schedule. Limited budget and conflicting priorities within the company resulted in bottlenecking within the development team and thus failed to produce project deliverables on time.
I have been informed that the team will continue working on development, without an additional workforce, with the intention to launch the website at the beginning of 2019.