Building a Design System
Redesigning the WorkforceNow homepage
I worked on 2 projects during my internship. For the first project, I collaborated with other UX Designers to revamp ADP’s Design System.
For the second project, my team and I redesigned WorkforceNow’s Homepage platform to make it more relevant and usable for various user roles.
Please use the side navigation bar to navigate between projects.
UX Designer, UX Researcher
10 weeks: May 2019 – Aug 2019
Designers, Researchers & Developers
Sketch | Axure | Mural | Balsamiq
PROJECT 1 OF 2
ADP has several variations of Design languages that meet diverse needs. The following are some examples of cards that the company uses, but they don’t seem like they belong to a single design system or one brand.
I was a UX Designer and UX Researcher on the team. In the research phase, I analyzed 150 custom variations of card components to consolidate requirements for designing universal card components. I collaborated with 2 designers to define card categories and design sample cards. I followed a similar process for designing filters. Towards the end of my internship, I advocated for a bottom-up approach for revamping the design system and hence we started with designing for atomic UI elements before moving on to designing molecular design components.
To analyze cards across ADP’s products, I logged notes and insights in a tabular format to consolidate card requirements.
After analyzing small cards, a major card type used across products, I collaborated with a co-intern to segregate all other cards into groups.
The cards were divided into primarily 4 categories:
After the research phase, the team designed cards and filters for the design system. Following are some design examples.
Designing molecular elements like cards before designing atomic elements that make the molecules proved to be cumbersome for the Design team. Therefore, the team switched to a bottom-up approach – we started to design atomic UI elements like radio buttons, text boxes, checkboxes, etc. Following is a screenshot from one of our team brainstorming sessions.
PROJECT 2 OF 2
The Homepage of ADP’s WorkforceNow Platform had a large amount of static content and irrelevant information. Apart from poor utilization of real estate, and an unclear purpose to users, the homepage largely depended on website navigation bar on the top.
I was a UX Designer and UX Researcher on the team. I started my internship with analyzing findings from the user testing and design workshop that my team conducted. I collaborated with a UX researcher to gather research insights, carve out hypotheses, research questions, and a plan for upcoming usability testing sessions.
I collaborated with the team to formulate design principles for the homepage. I was responsible for redesigning the information architecture and creating low-fidelity wireframes for the homepage.
The workforceNow platform is primarily designed for small to medium-sized companies. Our users are employees, managers, and practitioners at these companies. Employees primarily use the homepage to gain information, managers monitor employees, and practitioners are admins who take actions – they monitor managers and employees.
My team conducted a design workshop wherein participants were asked to build their own homepage. Since the website inherently has a tile or card-based layout, participants were handed out content cards to build their website on paper.
To assimilate research findings, we ranked cards according to users’ preferences from the homepages designed by participants. Moreover, we found common and unique needs across the 3 user roles.
Participants were asked their preference for the homepage layout. They had to choose from 3 choices – the dashboard layout is mostly information-based, the navigation layout that has links to navigate to various sections, and the hybrid layout is a mix of navigation and dashboard layouts. Users preferred the hybrid layout for homepage design.
As we started designing the hybrid layout, we decided that there would be 3 swim lanes – information lane on the left, tasks lane in the middle, and navigation lane on the right. Users would also have the ability to configure content based on their role at the bottom.
I redesigned the Information Architecture pf the homepage for all users. Following is a sample IA diagram.
For both the projects, I collaborated with various stakeholders – Product Manager, UX Director, Software Developers, UX Leads, UX Designers, UX Researchers, and a Data Analyst. This experience was pivotal in shaping myself as a Designer – I learnt to defend my design decisions, to support my team, to lead team meetings, and to speak the language of stakeholders when needed.
They’re also people who can influence others, who can help team members to achieve their goals, and support the whole team to leverage their own strengths to contribute to the product.
I learned to carve out goals, success metrics, risks, assumptions, timelines in the beginning or during the course of the project as needed. Moreover, regular meetings with all stakeholders not only keeps everyone on the same page, but also saves time and effort in the long run. It’s important to get feedback early and often.
At every step of the design process, consider other ways that can help you achieve the same goals before narrowing down to solutions. When in doubt, let the users decide.
Think about what impact does keeping the same UI component, or changing it have on the whole system? Sometimes changing something seemingly trivial can set off a chain reaction – a small change for Designers might be a big change for the Design system and Developers.
What are the problems being solved when users use a UI component? When will the components be used? Why were the custom components created? Design for 80% of the existing collected component usage. The rest 20% can probably be better represented as some other component.
It’s important for the Development and Product teams to know the need and importance of UX. The best way to do this is to make them a part of the process.