Project Type
Role
Timeline
As a Design Assistant at Fook Communications, I worked on DW Electric’s mobile and iPad website designs. The project aimed to optimize user experience across different devices while maintaining consistency with the existing desktop site. I led the UX/UI design for responsive layouts and contributed to AI-generated imagery for the brand’s visual identity.
Design Brief
The existing design for DW Electric's website was only optimized for desktop users, leading to usability issues on mobile and tablet devices. The challenge was to adapt the existing brand design to smaller screens while ensuring intuitive navigation, clear service information, and a visually cohesive experience across platforms.
Project Goal
The goal was to create responsive layouts for mobile and tablet users that aligns with the existing desktop design while preserving DW Electric’s brand identity.
Mobile
Tablet
Understanding
I began the project by reviewing the existing desktop design to identify which elements needed adaptation, focusing on navigation flow, call-to-action visibility, and content hierarchy. I also assessed which design assets and components could be reused to maintain visual consistency across devices.
For this project, the format and content were already fixed and the client’s request was to adapt the existing desktop design for mobile and tablet devices. My primary focus was on adjusting the layout and spacing to fit smaller screens while ensuring content remained clear and legible. To optimize usability, I introduced carousel components in sections where vertical scrolling would have otherwise been excessive, creating a more streamlined and user-friendly experience.
As part of the DW Electric project, I contributed to AI-generated imagery by creating and editing visuals to better align with the brand and context. Tasks included modifying lighting elements (ex. replacing ceiling lamps with pot lights) and enhancing realism by cleaning up artificial details. I also adapted existing images to better suit an electrical company, such as replacing notebooks with technical drawings. These edits ensured visual consistency and professionalism across the site.
The final mobile and tablet designs were approved for implementation. Throughout the process, I received positive feedback for maintaining brand consistency and optimizing usability across devices. This project strengthened my ability to design responsive user experiences under real-world project constraints.
Learnings
This project taught me the importance of balancing creativity with usability when designing for smaller screens. I also learned how to quickly adapt to new tools like Adobe XD and apply feedback constructively to improve my designs. Overall, it was a valuable real-world experience that strengthened my UX and communication skills.