Project #2

Pixel8 Design Challenge

This design challenge was successfully completed by our team during our internship at Pixel8, providing us with a unique opportunity to collaborate as a diverse group of interns from various schools and locations. Our project highlights the journey from initial concepts to final prototypes, showcasing how our collective teamwork and creativity resulted in a refined final product.

The Product

EleganceRest: An Online Shopping App for Elegantly Crafted Chairs

Project Duration

The design project was undertaken during my 3-month internship from July to September of 2023, rendering 250 hours of work.

Challenge

Create a responsive system of our own, giving us a practical opportunity to apply and refine our UI/UX skills.

Goal

Develop a user-friendly and aesthetically pleasing interface that works seamlessly across both mobile and desktop device.

Role

UI/UX Designer

Responsibilities

• Design a system that works across both mobile and desktop platforms.
• Develop high-fidelity mockups and interactive prototypes to visualize and test design concepts.
• Work closely with team members to share insights, provide feedback, and support each other throughout the design process.
• Engage with team leader and supervisor to gather requirements, present design ideas, and incorporate their feedback into the final product.
• Establish a gridding system to ensure alignment, consistency, and a harmonious layout throughout the interface.
• Select and design typography that enhances readability and aligns with the overall design aesthetic.
• Develop unique icons tailored to the project’s needs, ensuring clarity and visual appeal.
• Create a color palette that complements the design and reinforces the brand identity.

Groupings

Our team was divided into smaller groups of 2-3 members.

Design Creation

Each group developed their own design concepts. These designs included wireframes, mockups, and visual elements.

Design Review

Each group presented their designs to the rest of the team. The team collectively voted on which design system would be implemented for the project.

Implementation

The selected design system was adopted and further refined. The team worked together to implement the design across both mobile and desktop platforms, ensuring consistency and responsiveness.

This image showcases the design that received the most votes from the team.

Typography

This image showcases the selected typography style, including font choices and sizes, which contribute to the overall design aesthetic and readability.

Color Palette

This image showcases the color palette used in the design. This includes primary, secondary colors, along with text & icon color, highlight and background color. The palette is designed for both light mode and dark mode to ensure visual harmony and brand consistency across mobile and desktop platforms.

Iconography

These icons enhance the user experience by providing clear and intuitive visual cues.

Mockups

Here are the sneak peeks of our desktop mockups. These mockups illustrate the implementation of our color palette, iconography, and typography.

Light Mode

Translating Desktop Design into Mobile Design

After creating the desktop mockups in both light mode and dark mode, we then translated the desktop design into mobile design for both modes. This ensured consistency and a seamless user experience across all devices.

Light Mode

Dark Mode

Grid System

We also developed a grid system for both desktop and mobile to ensure consistent alignment, spacing, and layout across all design elements. In addition, this grid system is essential for ease of development, ensuring that the final product aligns with our team's design vision and standards.

Mobile

Desktop

Prototype

After finalizing the design elements, we created interactive prototypes to visualize and test the user experience. These prototypes allowed us to simulate the user journey, identify potential issues, and make necessary adjustments before development.

If you want to see the full designs, both mobile and desktop, along with their grid system and interactive prototypes, click here.

What I learned

Throughout this project, I learned the importance of collaboration, user-centered design, design consistency, and attention to detail all of which are essential for creating effective and engaging user interfaces.

1. Collaboration
- Working with team taught me the importance of effective communication, teamwork, and leveraging each member's strengths to achieve a common goal.
2. Design Consistency
- The importance of maintaining design consistency in creating a unified brand identity and ensuring that users can navigate the interface effortlessly, regardless of the device they are using.
3. User-Centered
- I discovered the significance of user centered design which allowed us to create a more intuitive and satisfying user experience.
4. Attention to detail
- In creating effective user interfaces, every element—ranging from color choices to typography and iconography—plays an important role in shaping the overall design. These components contribute to a cohesive and visually appealing user experience, ensuring that the final product is both polished and engaging.

Let's Connect!‍

Phone:
(0930)-573-2193
Email:
anamarie.sarmiento1502@gmail.com
Socials:‍‍