REDESIGNING

LOVEHARBOR
WEBSITE

Rohit Rokka
Prativa Gautam
Pravin Kumar Mandal
Sujan Dulal
 TABLE OF CONTENTS

About the Project Sneak Peek

Giving LOVEHARBOR dating app a cool
new look that matches its style and vibe !
01 04 Redesigning the UI and matching
system so it attracts more user.

Major Requirements Project Stages

Fresh Modern Look that aligns with
the company brand identity.
02 05 5 stages to redesign the dating
website.

Project Goals Our Team

Leading the four-month website
redesign project.
03 06 LOVEHARBOR team and external
web dev specialists.
 PROJECT STAGES
STEP 2

Planning Phase
STEP 1
Initiating Phase

STEP 3
Execution Phase

STEP 5
Closing Phase

STEP 4
Monitoring and
Control Phase
 OUR COMPANY

"As we embark on this exciting journey at

LOVEHARBOR, Toronto's leading dating app, our
LOVEHARBOR collective efforts aim to rejuvenate our outdated website
over the next four months. Together, our internal teams
and external web development specialists will
collaborate to achieve a modern, fresh look that
harmonizes seamlessly with our unique brand identity."
 WHAT WE ARE WORKING ON

SECURE COMMUNICATION FAST AND RELIABLE

To ensure the project's Establish clear and open lines
integrity and protect against of communication between Make the website design
potential threats. external and internal teams. smoother and faster.
 PROJECT
INITIATION AND
PLANNING
As a team, we are embarking on the website redesign project,
collectively developing a project charter and outlining high-
level goals during the initiation phase. Progressing to the
planning phase, we will collaboratively create a detailed
project plan, a quality management plan, and a risk response
plan.
“The way to get started is to quit
talking and begin doing.”

—SOMEONE FAMOUS
PURPOSE

MODERN AND VISUALLY

APPEALING PLATFORM

REFLECT COMPANY
COMMITMENT WITH ITS
BRAND

ATTRACT A WIDER
AUDIENCE
STAKEHOLDERS
EXECUTIVE LEADERSHIP
TEAM

MARKETING DEPARTMENT

IT DEPARTMENT

UX DESIGNER

WEB DEVELOPMENT
SPECIALITS (EXTERNAL)

LOVEHARBOR CUSTOMERS
HIGH - LEVEL GOALS

MODERN LOOK AND FEEL

ENCHANCED USER
EXPERIENCE

INCREASE ENGAGEMENT

BRAND CONSISTENCY

COLLABORATIVE DEVELOPMENT

PROJECT COMPLETION IN
FOUR MONTHS
DESIGN REQUIREMENTS

User Registration and Login

Search and Filter Functionality
Matching Interface
Media Upload and Display
Notification System
Feedback and Reporting tools
Security Features
 SOFTWARE

IDE – Visual Studio Code

Graphic Design – Adobe Photoshop

Web Browser dev tools – Chrome

Version Control – Git

Design Testing – Browser-Stack

Communication Tools-Microsoft Teams

 PLANNING PHASE
In the planning phase, we will lay the foundation for the
Love-Harbor website redesign project, accurately crafting a
blueprint for success.
WBS
 QUALITY MANAGEMENT PLAN
Quality Objectives:

1- Achieve a user satisfaction rating of atleast 90%.

2- Ensure the website is error-free based.

Quality Assurance activities:

1- Regular Code reviews.

2- User testing and feedbacks.
3- Testing functional and design elements.
4- Establish guidelines for documenting.
5- Ensure Consistency in documenting project requirements,
elements and changes.
6- Have transparent Communication with the internal and
external team.
7- Have regular meetings and status updates.
8- Define KPI to measure quality.
 RISK IDENTIFICATION AND RESPONSE PLAN
1- Technical Risks:
Risk: Unexpected technical issues during implementation.
Response: Regularly conduct technical assessments and testing

2- Timeline Risks:
Risk: Delays in the project timeline due to unforeseen circumstances.
Response: Build buffer time into the schedule.

3- Resource Risks:
Risk: Insufficient availability of key team members or external specialists.
Response: Cross-train team members for critical roles. Identify backup resources and
establish a contingency plan for temporary unavailability.

4- Scope Risks:
Risk: Unexpected technical issues during implementation.
Response: Regularly conduct technical assessments and testing.
 RISK IDENTIFICATION AND RESPONSE PLAN
5- Budget Risks:
Risk: Unforeseen expenses impacting the project budget.
Response: Develop a detailed budget with contingency funds. Regularly review expenses and adjust the budget as
needed. Clearly communicate any budget changes to stakeholders.

6- Communication Risks:
Risk: Inadequate communication leading to misunderstandings.
Response: Establish a clear communication plan. Conduct regular status meetings with stakeholders. Use multiple
channels for communication to ensure all team members are informed.

7- Legal and Compliance Risks:

Risk: Failure to meet legal or compliance requirements.
Response: Conduct thorough legal reviews. Keep abreast of industry regulations. Consult legal experts
to ensure the redesigned website meets all necessary legal and compliance standards.
 RISK IDENTIFICATION AND RESPONSE PLAN
8- Security Risks:
Risk: Potential vulnerabilities in the redesigned website.
Response: Implement robust security measures. Conduct regular security audits and
updates. Collaborate with cybersecurity experts to identify and address potential threats.
 BUDGET

40% 20%
UX RESEARCH PROGRAMMING

10% 30%
DATABASE WEB DESIGN
EXECUTION
PHASE

Execution is the bridge between

dreams and reality.
 Assembling the Project Team

1. Internal Staff: Contains team members specialized in design, content

and marketing.

PROJECT MARKETING DESIGN TEAM DEVELOPMENT QUALITY

MANAGER TEAM TEAM ASSURANCE
TEAM
 2. External Web Development Specialists

WEB UX/UI SECURITY QA

DEVELOPERS DESIGNERS EXPERTS SPECIALISTS
 Initiating Website Development
1. Review and Analysis of Current Website:
Collected and analyzed user feedback from various sources, including surveys, reviews,
and social media and identified common issues and user suggestions for improvement.
2. Define Target Audience:
Targeting age range, young adults (18-30), and adults (30-45). Love-Harbor is inclusive
and will cater to a diverse range of sexual orientations, including but not limited to
heterosexual, LGBTQ+, and others.
3. Competitor Analysis:
Tinder: Known for its simple swipe-right-to-like and swipe-left-to-pass functionality as
well as user-friendly interface.
OkCupid: Known for its in-depth profiles and compatibility-based matching.
4. User Experience( UX) Design:
● Creating low-fidelity wireframes to outline the basic structure and layout of key pages and mainly
focusing on key elements such as profiles, search filters, gamification, call and messaging features,
voice and video calling and push notifications.
● Building interacting prototypes to visualize the flow and functionality and conducting usability
testing on prototypes to gather feedback from potential users.
5. User Interface (UI) Design:
● Developing high-fidelity visual designs that incorporate with the Love-Harbor's identity while
also paying attention to color schemes, typography, and imagery to create an engaging visual
experience.
● Designing UI elements such as buttons, forms, navigation bars, and other interactive components
and choosing a red-color palette that resonates with Love-Harbor's brand and creates a positive
emotional response.
6. Back- End Development: Involves
implementing server-side functionalities,
managing databases, and integrating various
features to ensure smooth operations.
Several features included in the back-end
development are:

● User- Authentication and

Development
● User Profile Management
● Matching Algorithms
● Search and Discovery
● Messaging Systems
● Geolocation Services
● Security Measures
● Backup and Recovery
● Third-party integrations
● Payment Integration
7. Front- End Development:
Focuses on creating an engaging
and user-friendly interface.
Several key features are:

● User Registration and Login

● Search and Filter Functionality
● Matching Interface
● Media Upload and Display
● Notification System
● Feedback and Reporting tools
● Security Features
8. Security Implementation:
● Using server protocols such as TLS/ SSL to protect data transmitted between user and
the server.
● Using Multi- Factor Authentication (MFA) to enhance login security.
● Implementing measures to protect against CSRF attacks by using tokens to verify the
authenticity of requests.
● Setting up appropriate security headers (e.g., Content Security Policy, X-Content-
Type-Options) to enhance browser security.

9. Third- Party Integration:

● Geolocation Integration: To enable location-based features.
● Payment Processing Integration: For processing transaction within the app.
● Social Media Logins: Allow users to sign up or log in using their social media
accounts such as Facebook, Google and Instagram.
10. Testing: To ensure that the platform is functional, user-friendly, and secure.
● Functional Testing: Testing features such as user registration, login, profile creation,
matching algorithms, messaging, search, and other core functionalities.
● Usability Testing: Includes navigation, layout, and overall user experience to ensure
that users can easily understand and use the website.
● Compatibility Testing: Testing the website across various browsers (Chrome, Firefox,
Safari, etc.) to ensure cross-browser compatibility.
● Performance Testing: Conducting performance testing to assess the website's speed,
responsiveness, and scalability.
● Security Testing: Testing for common security threats, including SQL injection, cross-
site scripting (XSS), and data breaches.
● User Acceptance Testing: Gathering feedback from real users to assess the website's
usability, functionality, and overall satisfaction.
11. Training and Support:
● Providing tutorials, FAQs, or video guides to help users navigate the redesigned
website.
● Training support staff to address user inquiries and issues promptly through emails and
live chat.
12. Deployment:
● Configuring the live server environment to support the updated website.
● Verifying that DNS configurations are updated and propagated.
● Deploying the redesigned Love-Harbor website to the live server.
13. Marketing and Promotion:
● Multichannel Marketing
● Social Media Engagement
● Email Campaigns
● User referral Programs
 Formed a Change Control Board (CCB) for evaluating,
approving or rejecting change requests including
representatives from several departments, such as
Change development, design, testing, and project
management.

Control
Process Documenting each change request including the
rationale, impact assessment, and potential benefits.

Prioritizing change requests based on urgency,

importance, and impact.
Various changes and additions were requested through the change control process during the
development phase of the project:

1. User Interface (UI) Enhancements:

Changes were requested to the design and user interface elements to improve aesthetics,
usability, or alignment with current design trends.
2. Performance Optimization:
Requests were appended to optimize the website's performance, addressing issues related to
speed, responsiveness, and overall efficiency.
3. Bug Fixes and Issue Resolutions:
Requests were added to address bugs, issues, or unexpected behavior identified during the
development or testing phases.
4. Scalability Enhancements:
Proposals were submitted to enhance the system's scalability to accommodate potential
future growth in user activity.
 Monitoring
And
Controlling
Phase
"Monitoring keeps the beat, and
controlling orchestrates the harmony of
success."
 Project Review

Regular Plan Review: Milestone and Budget Deviation Identification:

Check:
Periodically reviewing the project Ensuring milestones and budget Identifying and investigating plan
plan. are on schedule. deviations.
Communication 1 2 3 4
Quality Timely Issue Prompt Up-to-Date
Meeting Monitoring
System:
Discussions:
Discussing
Stakeholder
Response:
Project
Status:
Implementing specific Addressing Keeping all
a robust issues stakeholder parties
system to promptly with concerns and informed on
assess the queries the project's
deliverables. development promptly. current state.
team.
 Performance Monitoring:
Utilizing web analytics tools (
e.g. google Analytics) to
monitor website traffic, user
behavior, conversion rates.
Quality
Monitoring Implementing an effective
quality monitoring system to
check deliverables against
set criteria and expectations.

If any quality issues arise,

taking immediate corrective
actions.
 User Feedback and Testing

User Feedback Collection: Prioritize Proactive Issue

Collecting user feedback Improvements: Prioritizing Resolution: Addressing
via testing and surveys. project improvements issues before they
using user input. escalate.
 Risk Management:
● Continuous Risk Assessment: Continuously assess and update the risk registry.
● Mitigation Plan Review: Regularly review and ensure implementation of
mitigation plans.

Resource Management:
● Resource Monitoring: Monitoring internal and external resource usage.
● Optimize Resource Allocation: Adjusting allocations based on project requirements and
scope changes.

Budget Tracking:
∙ Communication on Budget Issues: Communicating budget difficulties to stakeholders.
∙ Explore Viable Solutions: Investigating solutions like contract renegotiation for budget
challenges.
User-Centric
Assurance:
•Ensuring features
Feature
meet user needs Development
and enhance
user experience.

Feature
Monitoring:
•Monitoring new
features'
evolution and
enhancements.
 Documentation and Reporting

Thorough Documentation: Maintaining Regular Stakeholder Updates: Providing

updated project plans, risk registers, and stakeholders with regular progress updates
quality assessments. on status, accomplishments, and future
milestones.
Closing Phase
COMPLETION IS
THE SEED OF
FUTURE TRIUMPHS.
 Project Achievements
1. User Centric Approach: Implemented a responsive and visually
appealing design to improve user satisfaction.
2. Performance Enhancements: Optimized website speed and
performance, reducing page load times.

3. Enhanced Security Measures: Integrated robust security features to

safeguard user data and privacy.

4. Stakeholder Collaboration: Maintained open communication channels

with stakeholders throughout the project.
 Timeline constraints: Unforeseen
complexities extended the project
timeline.

Challenges Technical Integration

Faced Issues: Integration with legacy
systems posed challenges

Resource Constraints: Limited

resources impacted certain
aspects of the project.
 Lessons Learned Session

TEAM RISK CONTINUOUS

COLLABORATION: EMPH MANAGEMENT: HIGHLIG IMPROVEMENT: ENCOU
ASIZED THE HTED THE RAGED A CULTURE OF
IMPORTANCE OF SIGNIFICANCE OF CONTINUOUS
EFFECTIVE PROACTIVE RISK IMPROVEMENT
COLLABORATION AND MANAGEMENT TO THROUGH FEEDBACK
COMMUNICATION FOR ANTICIPATE AND LOOPS AND REGULAR
SUCCESSFUL PROJECT MITIGATE POTENTIAL RETROSPECTIVES.
OUTCOMES. ISSUES.
Transition to Operations
Transition Plan Details
Recommendations for Future Projects

Early Identification of Dependencies

Conduct thorough dependency analysis during project initiation.

Scalability Considerations

Anticipate future scalability requirements and design with expansion in mind.

Agile Methodology Adoption

Consider agile methodologies for increased adaptability to changing project requirements.

Conclusion
1 Summary

The Love Harbour Dating App website redesign project closure signifies the successful collaboration
of the project team.

2 Documentation

By documenting successes, challenges, and lessons learned, we aim to pave the way for future
projects' success.

3 Future Success

The redesigned website is poised to provide an enhanced user experience, and we look forward to its
continued success.
Key Stakeholder Feedback
Feedback and Insights
Future Project Roadmap
Implemented Changes

Incorporate feedback and lessons learned into the future project roadmap to foster continuous improvement and success.
 OUR Estimated TIMELINE
2. Planning Phase
3. Execution Phase
7 days
75 days

1. Initiation 5. Closure
Phase
7 days
7 days

4. Monitoring and Control

83 days
References
∙ An Engineer’s guide to dating app development. (n.d.).
https://www.cometchat.com/blog/building-your-own-dating-app
∙ Kudryavtseva, L. (2023, April 1). Case study: Tinder app redesign - Bootcamp.
Medium.
https://bootcamp.uxdesign.cc/the-new-age-dating-what-if-tinder-could-be-impro
ved-d48adea9b6d7
∙ AltexSoft. (n.d.). Website Redesign Project Plan: How-To Guide with Steps.
[online] Available at:
https://www.altexsoft.com/blog/how-to-plan-a-website-redesign-stages-approach
es-principles/
[Accessed 6 Dec. 2023].
THANKS!

Rohit Rokka
Prativa Gautam
Pravin Kumar Mandal
Sujan Dulal