My Role
Senior Experience Designer
Team size: 7
PM (2), Designer (1, Myself), Engineers (3)
I steered the end-to-end design and development chain, starting from requirements analysis, leading through design conceptualization and iterative wireframing to craft high-fidelity, responsive prototypes, and guiding the developer team to build and test the website in a live environment.
Deliverables
Design Milestones
-
High-fidelity, responsive prototypes
-
Design System
Website Implementation
-
Responsive webpages (implemented and tested across 3 interface categories - desktop, phone and tablet)
Performance Evaluation
-
Testing website responsiveness, load time, SEO
Approach
01.
Requirements analysis and scope identification
02.
Design Conceptualization and lock-off
03.
Wireframing/ Prototyping
04.
Implementation using WordPress/ Elementor
05.
Evaluation & testing
Tools Used
Design/ development:
Figma | Photoshop | WordPress | Elementor | HTML | CSS
Collaboration:
Zoom | Google Meet
Design System
Responsive Design
Key Considerations
01.
Device/ Interface Compatibility
Mockups were designed in Figma and classified according to various devices (desktop, phone and tablet) and orientations (landscape and portrait).
02.
Accessibility Compliance
Site content was designed and implemented iteratively to align with accessibility guidelines (WCAG), including font size, color contrast, content loading, and responsiveness.
03.
Loading Time Optimization
All webpages were tested on each device category for optimized content responsiveness, URL loading speed, and content viewing.
04.
Scalability
Additional features such as user authentication, auto-update of events, and event calendars have been incorporated and prepped for the client to update the CMS as needed.
Mockups: Tablet
Mockups: Mobile
Mockups: Tablet
Key Take-aways
Emphasis on Accessibility: A prime challenge was building a visually pleasing experience while ensuring full compliance with accessibility standards. Examples: keeping the font size at 20 (acceptable: 16-21 for desktop); standout Scroll-To-Top button (not a dark color, which would have low contrast against the dark gray footer).
Loading Time: The webpages were designed keeping both accessibility and URL loading time in mind, which led to a mostly static design. As the design consultant, I streamlined the portal further with subtle transitions which added a smarter, more modern look. Also while adding motion effects to the pages/ sections, it was critical to account for the impact on URL/ content loading time.
