I played a key role in developing a cohesive design system and was responsible for designing a website that informs users about the concept of design systems and how United Wholesale Mortgage utilizes it to provide an optimal experience for their clients. In this endeavor, I worked closely with UX designers, engineers, architects, and senior leaders. My primary focus was on researching and designing the desktop version of the website. This involved conducting user testing, generating an affinity diagram, crafting lo-fidelity wireframes, developing hi-fidelity prototypes, and presenting the work to the IT department.
Oh wow! This house is yours?
United Wholesale Mortgage faced challenges in maintaining consistency, accessibility, aesthetics, and branding throughout its applications due to the absence of a unified design standard. The lack of centralized guidelines for elements such as color and typography led to designers struggling to work cohesively, resulting in applications that seemed to originate from completely different companies.
The primary objectives of the design system was to establish a centralized platform that consolidates design standards and to promote cohesive practices among designers, fostering unity and consistency across all projects.
The final outcome was a website designed to showcase the established design standards, including elements like color, typography, and components. This platform serves as a valuable tool for company members, guiding them through design and development procedures to ensure consistency and cohesion.
To identify the challenges faced by users, we began by engaging in discussions with developers, designers, and marketing professionals across UWM. After gaining insight into their pain points, we chose to develop a platform to display our newly established design standards. This platform would act as a guide, providing employees and partners with insights into our design practices. We created a lo-fidelity prototype to give a preliminary idea of the showcase's appearance and conducted extensive user testing with eight participants from UWM. The results of these tests were then organized into an affinity diagram to further refine our approach.
The following is an ideal path to advocacy from the view of Justin, a persona of a UWM employee. This path of advocacy was idealized with the help of conversation from people across the company who described their experience using company standards of design.
With 8 participants across UWM, I conducted usability tests on the lo-fidelity wireframes.
1.) From the current screen, please navigate to an area where you can learn about our design.
Interviewer: Can you describe your experience navigating to the design section?
2.) Please navigate to an area where you would expect to find information on fonts.
Interviewer: Can you describe your experience reaching the typography section?
3.) Now that you are on the typography page, find which typeface we use and why.
Interviewer: Which type face do we use? Why do we use this type face?
4.) Navigate to the Type Scale to find what font weight and font size we use for the body1 style.
Interviewer: Can you describe the specifications of body1 text? Can you describe your experience finding this information?
This project required a deep understanding of the design system's components, guidelines, and principles, as well as the needs of its target users. By meticulously organizing the site's content hierarchy, I facilitated intuitive navigation and easy access to essential resources. The site map ultimately served as a blueprint for the development of the design system website, ensuring a seamless experience for designers, developers, and stakeholders.
I created a wireframe during this process, which served as a visual blueprint for the showcase platform. This wireframe was used for user testing to gather feedback on the layout, structure, and overall functionality of the website. This step was crucial in identifying any potential issues and refining the design to ensure a seamless and effective user experience.
I designed a final prototype that addressed the feedback received from the wireframe and user testing. This refined version offers a more intuitive navigation path for users who may not be familiar with design systems. The homepage now features links to various pages, accompanied by explanations of their purpose. The type scale was redesigned to eliminate the need for scrolling, providing users with a more efficient browsing experience. Additionally, the homepage was decluttered and reorganized to adopt a more streamlined and simplified design, enhancing its visual appeal and overall usability.
12 weeks of collaborating with tons of people at United Wholesale Mortgage culminated to this. It was a make or break moment in how the product was received, and how it would ultimately go on to help push the design system into company wide adaptation.
