Web Development

Introduction

Web development is a catch all term for the work that goes into building something on the web. In Sales ops, it also incudes development of apps on PowerApps.

These websites and applications are built by the Web developer and are used by cross functional teams. Web development also includes designing application user interface and implementing ways to get the best user experience out of the product.

Website Creation Process

Click on each process to learn more about each step of the creation process

Project Scoping

‍

Every successful project starts with good project scoping. Clear communication with the stakeholder about the deliverables, features, what can and can not be done in the timeframe given and limitations of the project are essential during the project scoping phase.
‍

Generally, these are the procedures that we follow in the project scoping phase:

Gather user requirements and make sure that it satisfies the business needs
Determine system architecture/ data design
Create proposal for project (FTE hours, deliverables, timeline)

‍

This checklist will then be presented to the stakeholders during the kickoff meeting. It is also vital in this stage of the project to manage expectations via deliverables or project timeline of the final product release.

There might also be cases where initial research is needed for some requirements (i.e. using a new tool/ special functionality). This should also be included in the scoping phase to determine the feasibility of the requested feature/ functionality.
‍

Once the stakeholder is happy with the proposal, the project can proceed to the next step.

‍

Getting Started (Installation)

‍

Depending on the project, the initial setup might look different.
‍

Websites:

Create a new project on Webflow
Create a new project in Figma
Create a new repository on Github
Request DNS (domain name system, i.e. URL) from GIS to host project

‍

PowerApps:

Go to make.powerapps.com and create a new Canvas app
Depending on the data source (i.e. Sharepoint/ Excel/ SQL), create a new list or table that links to the application
Create a new project in Figma

‍

Wireframe/ Sitemap

‍

Wireframing is a way to design a website service at the structural level. It breaks down the layout of the website to it’s skeleton. Wireframes are used in this stage to establish the basic structure of a page before visual design and content is added.

For contents, sitemaps is used to map out the website contents/ journey in one easy to understand diagram. This is useful in the development/ design process to more easily find the best user experience and the user journey.

Design System

‍

A Design System is the single source of truth which groups all the elements that will allow me to design, realize and develop a product. The design system will have all the color pallets, typography, buttons, icons and other components that is used in the website. This is important especially creating a large scale website as it can get complex and a design system is one unified source that has all the design information.

Mockup/ Prototype

‍

This stage of the project is where the developer spends the most significant amount of time in. Due to the nature of the design process, we want to have a workflow that allows us to test our ideas quickly and improve them based on the feedback from the stakeholder in a timely fashion. Often times when presenting a design idea to the stakeholders, there will be improvements or changes that has to be made, hence mockups and prototypes using the Figma tool is essential in this stage.
‍

A mockup is a static design of a web page or application that features many of its final design elements but is not functional. A mockup is not as polished as a live page and typically includes some placeholder data. As a “static design,” a mockup does not have the functionality of a live website. Though a mockup would include a colored CTA button, for instance, it would not open up a form when clicked on, unlike a website (or the prototype of a website; more on that later). A mockup may show a cover image at the top of the page, but it won’t have an active carousel like a website.
‍

Mockups come before prototypes, which are simulations of what a live page will be. While a mockup is a static image, a prototype offers most of the functionality of a live website, showing stakeholders something very close to the real user experience

Development

‍

Ideally, the development process should start after the mockups and prototypes has been finalised. But in our use case, it isn’t the most time efficient as it depends on the stakeholder approval and review. The recommended workflow is to build one page/ section at a time once it is approved, continue designing the subsequent pages and repeat.
‍

Often times this might not be a linear process but with our agile workflow, it should be changed based on the type of project.
‍

Depending on the project, if it’s a website, Webflow should be the tool used to build the website. for reviews/ feedbacks from stakeholders, it is recommended that a developer link is generated using the (webflow.io) domain.
‍

For PowerApps projects, the development platform would be on make.powerapps.com. A project link could be generated and shared. In PowerApps, access permissions based on iList or person is integrated in the development panel.

‍

Topics

Web Development Projects

Web development is a relatively new function in Sales Ops. Below are some projects that has been completed as well as ongoing projects.

Sales Hub

One of the biggest issues with collaboration is communication and consolidation of information. Though information are communicated through email or chat, it’s often lost in the piles of email people receive each day. The Sales hub is the solution to this issue as it is the a one stop shop for Sales and anyone working with sales to get the most up to date information about training material, presentations, trainings, team organisation/ team info, FAQs, links to most used tools in Illumina and many more.
‍

Learn how to make updates on the sales hub here.
‍

Visit the Sales Hub:

Sales Hub

Rental Calculator

The Rental calculator is a tool created by financial services used to model a Rental System proposal. (more information check out the financial services page). The Rental calculator was initially built on excel but had issues with excel macros and version control. The solution to that is to build it as an application on PowerApps.
‍

Visit the Rental Calculator App:

Rental Calculator

Sales Ops Hub

Similar to the Sales hub, Sales Ops Hub is a one stop shop for our team to get information and links to tools.
‍

Visit the Sales Ops Hub:

Sales Ops Hub

Tools for development

Web developers use a range of tools to build, test, and optimize websites. These include text editors and integrated development environments (IDEs) for writing and editing code, version control systems for tracking changes, browsers and browser developer tools for testing and debugging, graphics editors for creating and editing images, and performance and optimization tools for ensuring that websites load quickly and efficiently.

Webflow

Webflow is a website design and development platform that allows users to design, build, and publish responsive websites without writing any code. It provides a visual interface for creating and styling web pages, as well as a range of pre-designed templates and elements that users can customize to create a unique website.

The exported code is then being hosted on Illumina’s internal server

‍

Figma

Figma is a cloud-based design and prototyping tool that allows teams to collaborate on the creation of visual designs, such as user interfaces, websites, and mobile apps. It provides a range of design tools, including a vector graphics editor, prototyping tools, and collaboration features.
‍

Figma is primarily used for creating and prototyping user interfaces and other visual designs, and it is used in the early stages of the design process to create wireframes and mockups. Figma is available as a web application and as a desktop app for Windows, Mac, and Linux.

‍

Github

GitHub is a web-based platform for version control and collaboration on software projects. It is built on top of the Git version control system, which allows developers to track changes to their code and collaborate with others on a project.
‍

GitHub provides a range of features for developers, including the ability to:

Collaborate on code with other developers using pull requests and code review
Manage and track issues and bugs
Host and share code repositories publicly or privately
Integrate with a variety of tools and services for continuous integration, deployment, and testing

In addition to being a platform for collaboration on code, GitHub is also a community of developers who use the platform to share and discover open-source projects. Many developers use GitHub to share their own projects, contribute to the projects of others, and learn from the code of others. GitHub is widely used by developers and organizations around the world.

‍

PuTTY

PuTTY is a free and open-source terminal emulator, serial console and network file transfer application. It connects the developer to the Illumina AWS server where the website code is hosted on.

‍

VS Code (Visual Studio Code)

Visual Studio Code is a free, open-source code editor developed by Microsoft for Windows, Linux, and macOS. It is a popular tool among developers because of its extensive range of features, including:

Syntax highlighting and code completion for a variety of programming languages
Integrated debugging tools
Git version control integration
A built-in terminal
A wide range of extensions that add additional functionality, such as support for additional languages and tools

‍

Visual Studio Code is widely used by developers for tasks such as writing, debugging, and testing code, as well as for version control and collaboration. Visual Studio Code is lightweight and fast, and it is designed to be easily customizable to meet the needs of different users and projects.

‍

Microsoft PowerApps

Power Apps is a suite of apps, services, and connectors, as well as a data platform, that provides a rapid development environment to build custom apps for your business needs. Using Power Apps, you can quickly build custom business apps that connect to your data stored either in the underlying data platform (Microsoft Dataverse) or in various online and on-premises data sources (such as SharePoint, Microsoft 365, Dynamics 365, SQL Server, and so on).
‍

Some examples of application built using PowerApps in Illumina are

DCP enhancement tracking tool (IAPT)
Rental Calculator
Inside Sales Calculator (In progress)

‍

Google Analytics

Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. It is a free service that provides data and insights about the traffic to a website. With Google Analytics, you can see how many people visit your website, where they come from, what they do on your site, and how long they stay. You can use this information to understand your website's audience and improve the user experience.
‍

Google Analytics works by placing a small piece of JavaScript code on your website, which sends data about your website's visitors to the Google Analytics servers. This data is then processed and used to generate reports that show you how your website is performing. Some of the key features of Google Analytics include:
‍

Real-time data: You can see how many people are on your site right now and what they are doing.
Audience reports: You can learn more about your website's visitors, including their location, age, gender, and interests.
Acquisition reports: You can see where your website's traffic is coming from, including which search engines and social media platforms are sending the most visitors.
Behavior reports: You can see how people are interacting with your website, including which pages they visit and how long they stay on each page.
Conversion tracking: You can set up goals and track conversions on your website, such as purchases or form submissions.

‍

Google Analytics is an important tool for any website owner or digital marketer, as it provides valuable insights into how people are interacting with your site.

What is PowerApps

PowerApps is a low-code development platform that makes it easy to create business applications without writing code. It can be used to create custom applications that can be used on a range of devices, and can be customized to meet specific business needs.

‍

What can PowerApps be used for

PowerApps can be used to create a range of applications, from simple data entry forms to complex process flow forms. It is also used to create mobile applications for use on a range of platforms and devices.

‍

What data sources can be linked to PowerApps

PowerApps can connect to a range of data sources, including SQL databases, SharePoint, Dynamics 365, and more.

‍

What data sources can be linked to PowerApps

Some examples of apps that can be built on PowerApps include:

Custom forms for data entry and submission, such as leave requests or expense reports
Workflow applications for automating business processes, such as approvals or escalations
Data visualization applications for tracking and analyzing business metrics, such as sales performance or customer satisfaction
Mobile applications for accessing business data and functionality on the go
Integration with other Microsoft products, such as Office 365 and Power BI, to build custom solutions that extend their capabilities.

Overall, PowerApps is a flexible platform that can be used to build a wide range of custom business applications to meet specific needs and requirements.

‍

Useful Resources

Web development technologies are constantly evolving. It is important to stay up to date with the latest trends and technologies in order to remain competitive. There are a number of online resources available to help beginners learn the basics of web development. From online courses to tutorials and references, these resources can provide a comprehensive understanding of the basics of web development and help to get started.

‍

Codecademy: Codecademy provides free, interactive courses on HTML, CSS and JavaScript.
freeCodeCamp: freeCodeCamp provides free online courses on web development, with a focus on modern technologies such as React and Node.
Udacity: Udacity offers a range of courses on web development, from beginner to advanced.
W3Schools: W3Schools provides tutorials, references and examples on web development languages.
MDN Web Docs: MDN Web Docs provides comprehensive documentation on web development technologies.