Adevinta.
UX/UI Design
Branding
Product owner; Adevinta
Contractor; Acato Digital Agency (internship)
Duration; 1.5 months
THe design question.
"How can we create a design system for Adevinta's new website, considering their companies new styleguides?"
what i designed.
UI Components and variations.
While working on this project for Adevinta at my internship at Acato, I focused heavily on UI design. I crafted numerous components, from navigation menus to detailed location blocks, all within Figma. One of my favorite creations was the ‘Location Block’ showcasing Adevinta’s global offices with pixelated illustrations.
Starting from scratch, without a defined style, was a challenge. We had a brand guide with colors and fonts but no clear visual direction. I experimented with various designs, initially in Figma and then on paper to spark new ideas.
Prototypes and user testing.
I also had the chance to assemble prototypes for user testing. Working closely with Annet, head-UX designer at Acato, I gained insight into creating effective test plans and conducting user interviews, enhancing our designs based on real user feedback.
Design system.
Although I didn't build the design system from the ground up, I contributed significantly by creating and refining components according to the system Dawad had developed. This ensured consistency across all our designs.
what i learned.
Mastering Figma.
My journey with Figma advanced significantly during this project. Initially handling simple UI tasks, I quickly moved to complex component creation, like the detailed ‘Location Block.’ This task required mastering Figma’s nested components and auto-layout features. Through this, I learned to maintain design consistency and leverage Figma's tools for scalable components. The feedback loop with Dawad, fellow designer at Acato, was incredibly valuable, pushing me to refine my skills and align with team standards.
Value of paper sketching.
Rediscovering the art of paper sketching was a revelation for me. At one point, I found myself stuck in a loop of creating similar designs in Figma. To break free from this cycle, I decided to switch to sketching on paper. This simple change opened up a floodgate of creativity. For instance, when I was working on the navigation menu, sketching out different layouts on paper allowed me to explore a variety of ideas without the constraints of digital tools.
Being flexible while testing.
One of the most valuable lessons I learned was the importance of flexibility during user testing. Watching Annet conduct user tests was an eye-opener. Unlike my previous rigid approach, Annet demonstrated how to adapt and respond to user feedback in real-time. For example, during one of the tests, a participant mentioned a specific pain point that wasn't covered in our prepared questions. Instead of sticking to the script, Annet delved deeper into this issue, uncovering crucial insights that we might have missed otherwise. This experience taught me the value of being adaptable and having a conversation with users rather than just ticking off a checklist.
Atomic design principles.
Understanding atomic design principles was another significant milestone. Dawad’s explanation and the practical application within our project helped solidify this concept for me. By working on various UI components, I learned how to break down designs into fundamental elements like buttons, input fields, and text blocks. For instance, creating a standard button component that could be reused and modified across different pages taught me the efficiency of atomic design. This approach not only streamlined our workflow but also ensured a consistent user experience across the entire product.
Agile workflows and team dynamics.
Our ‘tapas system’ for task management was an interesting experiment in agile workflows. The idea was to take on small, manageable tasks and iterate on them quickly. However, in practice, we often took on more than we could handle, leading to occasional chaos. Despite this, the system taught me valuable lessons about team dynamics and time management. I learned the importance of setting realistic goals and the necessity of regular check-ins to ensure everyone was on the same page. This approach helped me understand how to balance ambition with practicality and how to prioritize tasks effectively.
Sharing workflow with team.
Creating the ‘Location Block’ was a task that required balancing creativity with consistency. The process involved using various plugins and following multiple steps to ensure the illustrations matched Adevinta's brand guidelines. By documenting each step meticulously, I ensured that future additions to the component would maintain the same level of quality and consistency. This task taught me the importance of detailed documentation and the need to think ahead, ensuring that my designs could be easily maintained and updated by others.