2018
Avon is a social-selling beauty company - one of the first of its kind. They face more competition today than ever before, so we set out to update the suite of tools used by their Representatives.
Project goals
- Complete redesign of youravon.com
- Modernize UX; include optimization for mobile
- Simplify the e-commerce and payment experiences
- Consolidate separate sites and tools under one URL
- Create a Design System for consistency and future scalability
Team overview
I worked on this project as a member of the Studio for Digital Craftsmanship. Our team joined 20+ active client partners (stakeholders, analysts, designers, technologists, strategists, and more), with occasional third party vendor support. The full team would regroup a few times a month. For closer partnerships, we invited members of the Avon team into our Slack so we could collaborate daily.
My role
UX Lead
My responsibilities
- Requirements
- Sprint planning
- Research and strategy
- Parter with Technology for feasibility
- Parter with Design on UX, UI, and Design System
- Wireframing and prototyping
- Lead bi-weekly design presentations
- Actively participate in QA process
Design processes
This process is simplified due to each project having its own specifications and needs. No project has been purely linear for me; instead they are a web of relationships that impact one another in complex ways.
However, most projects align to the following steps.
1. Understand the problem
Discover, Define
2. Design the experience
Design, Feedback, and Iteration
3. Deliver a solution
Develop, Deploy
1. Understand the problem
- Feature kickoff
- Requirements
- Research
Feature kickoff
Our Avon partners were very familiar with their user base (Avon Representatives) as they work together often. The first step in tackling a new feature was to meet and discuss the problem, the context, and receive feedback directly from the Representatives, who’s businesses rely on our product being functional.
Requirements
Avon’s team of Business Analysts were thorough and critical to success. Before requirements were finalized, we would collaborate to validate and improve where possible.
Many features had to align to existing backend structures, so understanding both the current state and the technical feasibility constraints was very important.
Context was key as well. For example, the Enter Items feature was influenced by Representatives who are used to a “paper only” environment. They were more concerned with six-digit part numbers than Product Names. The design ended up being more of an adding machine than a predictive search due to this crucial information.
Research
Most of the features we developed for Avon were brand new. I would pull research from both competitors and Best In Class examples from other markets in order to have a well-informed POV.
Slides that account for competitive analysis and ecosystem evaluation
Result
The “Understand the problem” phase was repeated many times throughout the project. For some features, we would learn new requirements in development and then would revisit these steps as a team.
Our process demanded us to be thorough and was flexible enough to incorporate updates mid-cycle.
2. Design the experience
- User flows
- Wireframes and prototype
- Presentations
- UI
I led several tracks of work while collaborating closely with the Avon design team and third-party vendors. A lot of my work was driven by two-week sprints and involved a lot of wireframe and prototype delivery.
User flows
I always sketch through a feature end-to-end before I start wireframing. This ensures I have all the data and states accounted for. It is absolutely essential to construct flows for features that have a lot of variables.
The product of on-site collaboration with many members of the Avon team in Rye, New York.
Wireframes and prototypes
By the time I got to wireframing (Sketch) and prototyping (Axure), I had a solid plan for how to tackle the problem. The Avon team would provide the realistic data, we would agree on the flows necessary for sign off, and I would take into account the growing Design System.
Mobile was an important part of this project and we would spend a lot of time sharing design options with Avon’s Design Lead, complete with pros, cons, and our recommendation.
Conversation with the Avon Design Lead responsible for final design decisions. We had a strong working relationship that allowed us to move quickly and have a little fun at the same time.
✨✨✨
Presentations
Every other Friday I would present updated design options with my Studio teammates. We would craft an agenda, give a detailed demo, and then receive and prioritize any necessary feedback. Instead of slides, I would usually showcase the functionality in our master Axure prototype. Showing the interactions as close to how they will be once deployed helps to erase ambiguity.
Axure working file and live prototype
UI
Studio’s art director was responsible for creating the UI, but we worked closely in order to identify the most impactful states for him to design in order to get approval.
UX was responsible for full coverage (all states). UI was responsible for strategically creating the correct states to give our developer the ingredients he needed.
Result
I always love to have a “source of truth” in a project so everyone knows where to go to get information. For us, it was our two Axure prototypes - one for Desktop and one for Mobile.
2b. Feature spotlight
- Registration and Sign In
- Next Best Action
- Enter Items
I worked on dozens of features throughout my time on this project. Three of the more high-profile ones are shown below.
Registration and Sign In
Avon started before computers were mainstream and so many of the internal processes have holdovers from paper-centric management systems. My work on Registration and Sign In flows provided new functionality such as:
- Using an email for Registration and Sign In
- Using Facebook or Gmail for Registration and Sign In
- Solving for new account recovery scenarios
- Solving for duplicate emails and account splitting
- Fewer steps and streamlined registration experience
- many more Avon-specific use cases (e.g. - 2+ accounts using the same email address and automation on how to undo that)
Desktop and mobile version of the new registration landing page
A peek into the registration process for a Representative who has come into the flow through a Mentor
Next Best Action
Running a business is difficult. If you’re new to it, it can be overwhelming. We created a system of recommendations to suggest clear and direct actions that could be taken immediately to benefit their business. This feature was created directly due to feedback from new Representatives who were struggling with how to grow their business.
Desktop and mobile version of the Next Best Action feature.
Enter Items
The more experienced Representatives have been selling Avon for decades. By updating their portal, we were interrupting their workflows. We worked especially close with them on the Enter Items feature which allows quick entry of Product Numbers for customers orders. From physical spreadsheet, to digital table, to a single row that populates a list, we successfully added robust features while staying true to the way seasoned Representatives are comfortable getting work done.
The old version was structured to mimic a paper spreadsheet, but translating that to digital can lead to overwhelming options. Our new approach looked to maintain the same theme (one horizontal line) while allowing for a simplified UX.
3. Deliver the solution
- Handoff to Dev
- Design System
- QA
Handoff to Dev
Once a feature was approved by the Avon team, I would set up time with our front-end devs to package UI assets and explain UX context and edge cases. If we couldn’t meet in person, I would record a demo with Quicktime and share it that way.
Design System
I was an integral part of the team that organized and defined the schema for the Design System documentation. This deliverable included style guide elements, components, documentation, and even reusable code for future application.
Screenshot of the digital design system we delivered.
QA
As features were developed and deployed, I was called on to validate the final product and manage communication through JIRA. It can be tedious, but this is one of my favorite parts of any project - watching the designs come to life.
RepFest 2018
We had a great relationship with our Avon partners. They treated us like family and invited us to attend RepFest 2018 in Columbus, OH.
Together, we spoke to hundreds of Representatives, demoed our product updates live on iPads in personal, one-on-one conversations, and were there to hear thousands cheer in the convention center when the CEO showed them our work on the big screen.
Showcasing the new youravon.com to a Representative on an iPad at RepFest2018. A great way to get feedback direct from the people who use the tool! As you can see, we had fun!
Results
- We helped design, develop, and deploy Avon’s first on-time product launch in 15 years
- Consolidated several Representative tools under one URL
- Created a Design System that is shared by Design, Development, and more. It became the defacto source of truth and will make adding features easier than before.
- Received cheers from thousands of Representatives at RepFest 2018 (Products with images!)