AI Remote Management SaaS | UI Design + Illustration + Web Dev

Anush N

Fullstack Engineer

UI Designer

Framer Developer

Figma

Framer

JavaScript

Case Study: Optick

Existing Website (Wordpress)

Website Revamp: Migration from WordPress to Framer

Project Objectives

Scope of Work

Landing Page

Blog Main Page

Blog Detailed Page

Key Features

Completed Stage:

1. Wireframe

2. UI Design Stage :

3. Website Development Work

Live Website (Revamped)

Outcomes

Further Brand Enhancement for Optick

Company Profile Deck

Product Explainer Video / Brand Launch Video

Case Study: Optick

Existing Website (Wordpress)

Website Revamp: Migration from WordPress to Framer

Optick, developed by Quantian Technologies, is an AI-powered platform for remote workforce management. It aims to revolutionize operations in industries such as construction, utilities, and security.

The project goal was to migrate the existing website from WordPress to Framer. This involved a complete overhaul of the website's design to reflect a new brand identity, translated into custom UI development on the Framer platform.

Project Objectives

The primary objectives for this project include:

1. Developing a user-friendly, visually appealing landing page and associated web pages.

2. Ensuring optimal functionality and seamless user experience across all devices.

3. Leveraging Framer for responsive design and efficient development workflows.

4. Integrating advanced features like custom AI chatbots and dynamic content management.

Scope of Work

The scope of work for the Optick website includes developing four main pages: the landing page, blog main page, blog detailed page, and contact us page. Each page is designed to provide a comprehensive overview of Optick's capabilities and engage potential clients effectively.

Landing Page

1. **Transform Your Remote Operations with Optick**

2. **Platform Overview**

- Introducing Optick: AI-Powered Remote Workforce Management Platform

- Key Benefits:

- Accurate Workforce Management

- Increase productivity

- Better customer service

- Improved employee experience

- Actionable Analytics

3. **Platform Modules**

- Onboarding

- Time tracking

- Productivity

- Payroll

- Virtual Learning

4. **Product USP/Competitor Comparison**

- Foolproof facial recognition

- Internet-free operations

- Auto rostering and scheduling

- Custom trained chatbot

- Data Analytics and business intelligence

- GenAI driven training content

5. **Industries and Use Cases**

- Industries Served

- Use Cases

6. **Packages**

- Service Packages

7. **FAQ (Frequently Asked Questions)**

- Common questions about Optick

8. **Client Testimonials and Success Stories**

- Testimonials

- Success Stories

9. **Call to Action**

- Request a Demo

- Contact Us

10. **Channel Partners**

- Become a partner

- Partner contact form

- Demo login redirect

Blog Main Page

1. Introduction to Optick Blog

2. Featured Posts

3. Categories or Tags for Navigation

4. Social Media Integration

Blog Detailed Page

1. Individual Detailed Blog Post Layout

2. Author Information

3. Related Posts

4. Sharing Options

Contact Us Page

1. Contact Form

2. Office Location(s) with Maps

3. Contact Information

4. Social Media Links

Key Features

- **Responsive Design:** Ensuring optimal viewing experience across standard devices (desktop, mobile, and tablet).

- **Fast Load Time:** Implementing best practices for fast load time.

- **User-friendly Navigation:** Intuitive layout for easy browsing.

- **Security Measures:** SSL integration for data protection.

- **Content Management System:** Utilizing Framer CMS for easy content updates to blog pages.

- **Custom AI Chatbot Integration.**

- **Login and Register Integration:** Providing access from the homepage to the web app.

- **Custom Illustration and GIFs:** Explaining the product features.

Completed Stage:

1. Wireframe

At this stage, the project focused on UX research and wireframing. This involved:

1. **User Research:** Understanding the target audience's needs, preferences, and pain points through surveys, interviews, and market analysis.

2. **Wireframing:** Creating low-fidelity wireframes to outline the basic structure and layout of the website. This step helps in visualizing the user journey and ensuring that all necessary elements are included.

2. UI Design Stage :

1. **Design Prototyping:**

- Develop high-fidelity prototypes based on the approved wireframes.

- Incorporate branding elements, color schemes, typography, and other visual components.

2. **User Testing:**

- Conduct usability testing with target users to gather feedback on the prototypes.

- Identify any usability issues or areas for improvement.

3. **Iterative Design Improvements:**

- Make necessary adjustments to the prototypes based on user feedback.

- Ensure the design aligns with user expectations and project goals.

3. Website Development Work

The current stage is focused on Framer website development of finalised UI Design

Development Phase:

- Begin the custom development work using Framer.

- Implement the high-fidelity designs into functional web pages.

- Ensure the integration of advanced features like AI chatbots, responsive design, and dynamic content management.

2. Quality Assurance (QA) Testing:

- Conduct thorough testing to identify and fix any bugs or issues.

- Ensure optimal performance, security, and functionality across all devices.

3 Deployment:

- Deploy the final website to a live environment.

- Monitor performance and user feedback to ensure the site meets all objectives.

Live Website (Revamped)

Outcomes

Upon completion, the project aims to deliver a robust, visually engaging, and highly functional website for Optick. This will enhance user experience, drive engagement, and support the platform's growth in managing remote operations effectively. The integration of advanced features and a responsive design will ensure that Optick stands out in the competitive landscape of workforce management solutions.

Further Brand Enhancement for Optick

Company Profile Deck

Product Explainer Video / Brand Launch Video

Like this project

AI-BASED REMOTE WORKFORCE MANAGEMENT : Crafting Optick's intuitive UI and Framer development ensuring seamless navigation and custom animation.

Likes

Views

364