With more and more customers shopping on mobile devices, yoursole.com was in need of upgraded shopping functionalities that made the experience easy to engage with. Creating a united mobile site for a brand with so many types of products was a great challenge. I set a goal to create a smooth and seamless mobile shopping experience that appealed to a diverse demographic and met a wide range of needs for SOLE's customers.
While working simultaneously on new yoursole.com Desktop and Mobile versions, I implemented mobile specific navigation, simplified the filtering system, and replaced carousel clicks with swipe gestures. With this mobile-first approach, I was able to streamline the browsing and shopping experience for on-the-go SOLE customers.
I am solely involved in this case study and in all steps of project development.
Skills
User Research
Experience Strategy
Interaction Design
Information Architecture
User Interface Design
Prototyping
Heuristic Evaluation
Wireframes
Usability Testing
Project Management
“Users’ perception of their experience is directly dependent on their expectations, and on whether these expectations are met. The constantly changing landscape of e-commerce affects how customers expect to engage with brand website and services. Users’ expectations for convenience in online shopping are increasing. They want to shop on their terms, whenever and wherever they are, regardless of the device or channel. They expect the physical and online worlds to blend seamlessly.
Our responsibility to make sure we are on track to evolve brand offerings to keep up with today’s users’ needs.”
“The new E-commerce use experience: Changes in users’ expectations” by Nielsen Norman Group.
Speed
To create a quick and seamless shopping experience that meets the usability expectations of customers who are looking to maximize their productivity online.
User-centered
To design an exceptional thumb-first interaction experience, directed towards the 25 to 54-year-old SOLE customer demographic.
Flexibility
To establish a system of site components that are flexible enough for new campaigns, trends, and product changes.
I researched social commerce and the way people shopped on mobile. With the information I gathered, I created a mobile strategy for the yoursole.com mobile site. Along the way, I created tailored user flows for mobile, wireframes, prototyped functionality, and wrote specifications for design and behaviors.
At the start of the project, I conducted an internal usability test of the current mobile site and mapped all possible pain points. I remediated them later through different working phases.
SOLE customers expect the brand to deliver a tailored shopping experience designed to engage them according to their interests. I envisioned the future of the new website experience to be exceptionally helpful in finding their perfect product based on the customer's needs.
My primary goal was to clear the interfaces of any unnecessary elements and content that does not assist the user in completing their desired task on the website. In addition to prioritizing information screen-to-screen in the user flow and creating a visual hierarchy, I pared down the amount of content on the website to only the essential information needed for users to complete their goal while shopping.
Every second counts.
Since the majority of work on personas, user experience, and sitemap were underway, my prime task was to re-create navigation flows for the mobile site. I wanted to tailor them to the SOLE user's needs and expectations while considering the specifications and limitations of shopping on a mobile device.
I created navigation flows to chart the path from global navigation to the product grid walls. These charts served as a reference for my team of developers so that each version of the navigation wouldn't need to be tediously laid out during visual design steps.
Working on low-fidelity wireframes I brainstormed the connection between screens and visualized the layout of each screen with its essential components.
Then I moved to high fidelity screens, where I defined UI elements, patterns, visual hierarchy, and general functionality. I refined and validated the elements testing visual and textual content in situation.
With such limited space on a mobile screen, the product pages and grid wall required the most finesse. Here are some of the wireframes I created.
To design an interaction that is minimalist, aesthetically pleasing, and simple.
Standards for accuracy have also increased. Users generally have more positive experiences with organizations that provide incredibly precise information. Today's shoppers are savvy and expect updated inventory data, order status messaging, accurate pricing including a calculation of shipping prices prior to checking out, and customer reviews.
Inaccurate information causes users to question the credibility of the website and the brand. Information is power and I wanted the user to feel in control of their experience.
I worked on simplifying the mobile checkout process into a three-step process. I carefully removed extraneous elements and information, leaving essential information only, and provided users with access to more detailed information by clicking on a question mark icon. I also added a quick and easy account creation form at the end of the checkout process, to encourage users to engage with the brand more frequently.
This feature is essential for understanding the breadth of SOLE's products and for helping users make their ideal purchase. With a mission to translate this feature across all devices, I customized the "shop by" filter for mobile, giving it prime exposure in the main menu and breaking down its filtering systems into smaller steps, represented through individual screens.
Here are examples of the final mock-ups I’ve created.
I produced all final high-quality design comps and specifications for the mobile site fonts and design rules. I also created all cutting assets for all resolutions and documented the CSS properties for the team's developers.
Currently, the mobile site is at work, getting ready to be launched at the beginning of 2019.