Project: https://dgl409.aarora.imgd.ca/ValleyLife/

Sitemap:

Layout and Navigation:

• ValleyLife's layout and navigation are meticulously designed to ensure ease of use and intuitive access to essential features. Here's how each component contributes to the overall user experience:

Header Navigation:

• Discover: Provides access to explore different sections of ValleyLife, including travel guides, accommodation, healthcare services, job listings, and support for international students.
• About Us: Directs users to learn more about ValleyLife's mission, vision, and team.
• Contact Us: Offers a convenient way for users to get in touch with ValleyLife for inquiries, support, or feedback.

Footer Navigation:

• Quick Links: Provides quick access to essential sections of the website, such as travel guides, accommodation, healthcare services, job listings, and support for international students.
• Contact Information: Displays ValleyLife's contact details, including email, phone number, and physical address, for users' convenience.
• Social Media Links: Offers links to ValleyLife's official social media profiles for users to stay connected and engaged.

Visual Design:

• ValleyLife's visual design elements are thoughtfully curated to enhance the user experience and reinforce the brand identity. Here's how each aspect contributes to the overall aesthetics and functionality:

Color Scheme:

• In crafting the colour scheme for ValleyLife, I aimed to infuse the platform with vibrancy and positivity while ensuring readability and visual appeal. Here's how I selected the colours:

• Primary Color (#1A6987): I chose this deep blue hue to symbolize the vast skies and serene waters of the Comox Valley. It represents reliability and trustworthiness, serving as the cornerstone of our colour palette.

• Secondary Color (#A1AC4E): With its vibrant green shade, this colour embodies growth, renewal, and harmony with nature. It complements the primary blue, offering a refreshing contrast and reflecting the valley's lush landscapes.

• Background Color (#F7F7F7): I opted for a light background colour to provide a clean and neutral backdrop for content. It enhances readability and creates a welcoming atmosphere for users to engage with.

• Accent Color (White): White accents are strategically used to highlight important elements and calls to action. Its crisp appearance adds clarity and prominence to key features, guiding user interaction seamlessly.

• Text Color (#0D0407): I selected this rich black shade for text elements to ensure optimal readability and contrast against light backgrounds. It enhances clarity and legibility, contributing to an enhanced user experience.

Typography:

• In designing the typography for ValleyLife, I prioritized modernity, legibility, and professionalism to ensure a seamless reading experience across all devices. Here's how I curated the typography:

• Primary Font (Playfair Display): I chose Playfair Display for its elegant and sophisticated appearance, which adds a touch of refinement to the website's headings and titles. Its unique serif style creates visual interest and enhances the overall aesthetic appeal.

• Secondary Font (Lato): Lato was selected as the primary body font for its clean and versatile sans-serif style. Its balanced proportions and rounded edges contribute to excellent readability, making it ideal for conveying information effectively to users.

• Font Sizes and Styles: I carefully adjusted the font sizes and styles to establish hierarchy and guide users' attention to key content and headings. Heading fonts are bold and larger to emphasize importance, while body text is kept legible and consistent for comfortable reading.

Iconography:

• Consistent and intuitive icons are incorporated throughout the website to enhance navigation and communication.
• Universal symbols are used to represent different sections and actions, ensuring clarity and ease of understanding for users.

Accessibility:

• ValleyLife is committed to accessibility best practices, ensuring that its design is inclusive and accessible to all users. This includes providing alternative text for images, implementing keyboard navigation support, and maintaining adequate colour contrast for readability.

User Feedback and Guidance:

• Through user testing sessions and analysis of Clarity data, I continuously refine ValleyLife's user experience. Feedback from users is invaluable in identifying areas for improvement and guiding enhancements to ensure usability and satisfaction.

Detailed Interaction Data using Clarity:

• Utilizing Clarity, detailed interaction data is collected to gain insights into user behaviour and engagement patterns. This data informs decision-making processes, allowing for optimizations of ValleyLife's functionality and overall user experience.

Feedback from Individuals Similar to Target User Personas:

• Based on feedback from Shyam and Meet, the following improvements have been identified:

Navigation for Mobile Screens:

• Enhance navigation for mobile screens to ensure a seamless browsing experience. Simplify menu structures and optimize touch-friendly interactions for effortless navigation.

Hover Effects for Links and Buttons on Mobile Screens:

• Implement hover effects for links and buttons on mobile screens to provide visual feedback and improve interactivity. Enhance user engagement and intuitiveness of the interface.

Footer Styling for Mobile Screens:

• Address footer styling issues specifically for mobile screens to ensure consistency and aesthetic appeal across all devices. Optimize layout and design elements for smaller screens, maintaining functionality and visual coherence.

Mobile Friendliness:

• ValleyLife is meticulously designed to offer a seamless and enjoyable browsing experience for users on smartphones and tablets. It employs responsive design principles to dynamically adjust the layout and content based on the device's screen size and orientation, ensuring optimal usability and readability across various mobile devices. Additionally, interactive elements such as buttons and links are optimized for touch input, enhancing user engagement and intuitiveness on mobile platforms.

Error Handling

• In ValleyLife, I've implemented robust error-handling mechanisms to ensure a smooth user experience. Specifically, I've created a custom 404 page to handle instances where users navigate to non-existent pages gracefully. This custom page provides helpful guidance and suggests relevant content to steer users back on track.

• Additionally, error handling is integrated into the form submission process. If users encounter validation errors while submitting a form, they are promptly alerted with clear error messages indicating the specific fields that require attention. This proactive approach guides users in correcting mistakes and submitting the form, contributing to a seamless interaction with ValleyLife's features.

Performance

• ValleyLife is optimized for performance, focusing on minimizing page load times, optimizing images and resources, and utilizing caching techniques. Regular monitoring of website performance metrics ensures prompt resolution of any issues affecting user experience, maintaining optimal performance.

Design Consistency:

• Ensure consistency in design elements across the platform.

Features implemented:

• Comprehensive Travel Guides
• Information on Support for International Students
• Assistance in Finding Suitable Accommodation
• Comprehensive Guides on Healthcare Services, Hospitals, Wellness Activities, and Local Stores
• Easy Access to Job Listings and Information on Local Job-Seeking Strategies
• Community Forums and Events Calendar
• Local Business Directories

Case Study

Valley Life Case Study.pdf

My Role:

• In this project, I served as lead designer and product manager, overseeing tasks ranging from project management and UX analysis to design, lo-fi prototyping, and front-end development for the website.

Introduction:

• Valley Life is a community platform to support newcomers and international students in the Comox Valley area. It aims to provide comprehensive resources, guidance, and connections to help individuals integrate seamlessly into the community.

Introduction:

• Valley Life is a community platform to support newcomers and international students in the Comox Valley area. It aims to provide comprehensive resources, guidance, and connections to help individuals integrate seamlessly into the community.

Project Summary:

• Valley Life offers detailed travel guides, information on support for international students, and assistance in finding suitable accommodation. Additionally, it provides comprehensive guides on healthcare services, hospitals, wellness activities, and local stores. The platform addresses challenges such as navigational difficulties, cultural integration, and newcomers’ difficulty accessing essential services.

The Challenge/Problem:

• Newcomers to the Comox Valley face numerous challenges, including navigating unfamiliar streets, understanding local customs, and accessing essential services. The lack of guidance and support often leads to confidence erosion and cultural disconnection among newcomers. Valley Life sought to address these pain points by providing a centralized platform with tailored information and resources.

User personas, stories, and journeys

User Story: Aisha's Journey with ValleyLife

• An international student, Aisha embarks on a life-changing journey to Canada for her undergraduate studies. With ValleyLife as her companion, she experiences a seamless transition into Canadian academic life, cultural immersion, and establishing a diverse social network. The platform guides her through educational structures, cultural insights, and support services, ensuring Aisha thrives academically, culturally, and socially in the Comox Valley. ValleyLife becomes an indispensable tool, addressing Aisha's specific needs and contributing to her overall success and well-being in the new community.

User Story: Maria's Journey with ValleyLife

• Maria, a 32-year-old healthcare professional and single mother of two, recently moved to Comox Valley for a career opportunity. As a newcomer, Maria faces challenges navigating the local community, balancing work and family life, and accessing essential information. She is tech-savvy and looks to ValleyLife for a seamless settlement, including details on local services, family-friendly activities, and a supportive network for her and her children. ValleyLife's user-friendly platform becomes Maria's go-to resource for successfully integrating into Comox Valley.

Tech Stack:

• The entire Valley Life platform, including the front end, was developed using WordPress and its associated plugins. The WordPress Block Theme plugin created custom block-based layouts and designs, providing flexibility and control over the platform's appearance and functionality. Development and customization were done using VS Code, with all code managed and version-controlled using GitHub.

Planning and Conceptualization

• The project’s inception involved thorough research to comprehend the requirements of newcomers and international students settling in the Comox Valley. Using Adobe XD, I crafted mood boards, wireframes, and sitemaps to visualize the layout and flow of the platform. Leveraging the block editor of the WordPress Block Theme, these prototypes guided the design and structure of the website. The WordPress ecosystem provided a conducive environment for swift prototyping and iterative refinement, fostering seamless collaboration and integration of feedback from potential users.

Mood Board:

• Url: https://xd.adobe.com/view/022cd188-0046-4765-867e-bc1b69b454ee-577f/

The Solution:

• The project began with extensive user research to understand newcomers' specific needs and pain points. Based on the research insights, Valley Life was designed as a user-friendly platform with comprehensive guides on various Comox Valley life aspects, including education, housing, healthcare, and community events. Integration of an interactive community forum facilitated engagement and information sharing among users.
• Design Process:
  • User Research: Conducted interviews and surveys with newcomers and international students to identify pain points and requirements.
  • Ideation & Wireframing: Brainstormed ideas and created wireframes to outline the platform's structure and functionality.
  • Prototyping & Testing: Developed interactive prototypes and conducted usability testing to gather feedback and iterate on the design.
  • Development & Implementation: Utilized WordPress block theme for platform development, ensuring scalability and flexibility.
  • Content Creation: Curated comprehensive guides and resources tailored to the needs of newcomers, focusing on clarity and accessibility.

Wireframes:

Home:

Travel

About

Services

Settlement

Sitemap:

Development:

• The Valley Life platform's front end was meticulously crafted using the WordPress Block Theme plugin, facilitating the creation of custom block layouts tailored to the project's requirements.

• The WordPress CMS was the backbone for content management, allowing seamless updates and modifications. Various plugins were employed to extend the platform's functionality, ensuring that it met the diverse needs of users. Through continuous development and iteration, the Valley Life platform evolved into a robust and user-friendly solution for newcomers and international students in the Comox Valley.

Testing and Refinement:

• Thorough testing was conducted throughout development to ensure functionality, usability, and responsiveness across devices. Feedback from usability testing sessions informed iterative refinements to the platform's design and user experience. The WordPress Block Theme plugin's built-in preview and editing tools facilitated rapid testing and refinement of design changes.

Results:

• Enhanced accessibility to valuable content: Users praised the platform's intuitive design and streamlined navigation, resulting in high satisfaction.
• Simplified access to essential resources: Increased utilization of support services indicated enhanced confidence and integration among users, facilitating smoother transitions.
• Reflective insights: Valuable lessons were gleaned on the significance of continuous user feedback and iterative design to refine user experience continually.
• Future enhancements: Plans include implementing additional user-requested features and expanding platform accessibility to cater to a broader audience effectively.

Deployment and Launch:

• After final testing and refinements, the Valley Life platform will be deployed using an AWS server alongside WordPress hosting services. Continuous integration and deployment pipelines will be set up using GitHub Actions to automate the deployment process and ensure smooth updates. Post-launch monitoring and maintenance will be managed through the WordPress admin dashboard, with ongoing updates and improvements pushed through Git integration.

Reflection:

• The Valley Life project showcased the power and versatility of the WordPress platform, particularly when combined with the flexibility of the WordPress Block Theme plugin. The seamless integration with VS Code and GitHub streamlined the development process and enabled efficient collaboration. The project highlighted the importance of user-centred design and iterative development in creating a valuable community resource.