EMPLOYEE ENGAGEMENT PLATFORM
Platform
Mobile, Web
My role
Information architecture, Visual Design, Design System, Prototyping
Team
Product Manager, UX/UI Designer, Engineers
Sector
Technology
CHALLENGE
DWG is a group of small software development companies. The goal was to increase employee engagement in these companies. Previous stages of user research, analysis and ideation had been executed and they needed to conceptualize those ideas into visual interfaces that reflected the brand and test them with users. The challenge was to conceptualize those raw ideas into high-fidelity concepts, test that the interface makes sense to users and meets DWG goals, and ensure a robust design system.
INFORMATION ARCHITECTURE
I began analyzing all the information generated in a previous process to understand the full context of business objectives, user opportunities, ideas, storyboards about the solution that was wanted to design. Then I started to create wireframes that will represent the user flows and information architecture. I then moved forward with tone and voice design to enable microcopy in user interfaces.
Wireframing
From the ideas of the solution, I created several wireframes to represent information architecture, prioritize content and validate the structure and functionalities.
VOICE AND TONE DESIGN
I designed an initial voice and tone proposal to enable writing microcopy in UI interfaces and communicate a message according to the target audience. I then extracted good quotes based on what the target audience is saying. Finally, conduct a group interview with key organizational personnel and team members to ask a series of questions about the brand and target audience to gain a rich, detailed, and engaging representation of the brand's personality.
APPLYING ATOMIC DESIGN METHODOLOGY
Once the architecture of the information on the different screens and the design of the voice and tone have been defined. I started to design the ions according to the Atomic Design approach, which corresponds to the foundational visual characteristic that includes typography, colors, icons, grids, texture, etc. I used Figma as a design tool.
IONS (DESIGN TOKENS)
I designed the foundational visual characteristics of the brand including typography, colors, icons, and spacing and these are maintained as design tokens.
ATOMS
Once the ions were defined, I designed the atoms, the basic components that make up all the user interfaces and comply with the characteristics that cannot be broken down further without leaving them functional.
MOLECULES
Starting from the atomic components, I defined the molecules following the Atomic Design approach. Combine various atoms to create a more extensive UI by creating patterns.
ORGANISMS
I combined the molecules to form organisms that allow defining different sections in an interface
TEMPLATES
I built the templates that are page-level objects that place components into a layout and articulate the design’s underlying content structure.
PAGES
Then I specified instances of templates that show what a UI looks like with real representative content in place.
DOCUMENTATION IN NOTION
I used Notion for document design patterns, assets, and brand. I incorporated preview embeds of Figma files as they allow them to be automatically synced with Figma so that the most recent changes are reflected in Notion.
USER TESTING
During the design iterations, I ran usability testing sessions to get feedback on how users use the interfaces and components. I used the Maze tool because it allows testing Figma prototypes quickly and efficiently, it also offers various metrics that make it easy to interpret the results.
MEASURING THE IMPACT
Following the Atomic Design methodology facilitated the evolution, maintenance, and testing of the design system iteratively. Allowed to maintain consistency in all components and a friendly handoff to development
GOALS COMPLETED AND FEEDBACK
The first released version received a good acceptance by the employees where a score of NPS = 66 was obtained, increasing the interactions between them and communication. Employees were able to have a broad vision of the company's ecosystem of projects and see where they could support and at the same time enhance their skills.
