Salesforce Annual Report
Responsive Design & Front-end Development
Project Brief
This project is to create visually stunning and user-friendly webpages for a part of annual report with a style that are both simple and concise, for the client - Salesforce. And, the design eventually can be properly implemented in a programming language (html/css).
My role
Web Designer & Front-end Developer
Client
Salesforce
Time Frame
6 weeks
Tools
Photoshop, Figma, Visual Studio Code (Adobe Dreamweaver)
Keywords
Responsive Web Design, Front-end development, HTML/CSS Coding.
Salesforce Annual Report
Responsive Design & Front-end Development
Project Brief
This project is to create visually stunning and user-friendly webpages for a part of annual report with a style that are both simple and concise, for the client - Salesforce. And, the design eventually can be properly implemented in a programming language (html/css).
My role
Web Designer & Front-end Developer
Client
Salesforce
Time Frame
6 weeks
Tools
Photoshop, Figma, Visual Studio Code (Adobe Dreamweaver)
Keywords
Responsive Web Design, Front-end development, HTML/CSS Coding.
Salesforce Annual Report
Responsive Design & Front-end Development
Project Brief
This project is to create visually stunning and user-friendly webpages for a part of annual report with a style that are both simple and concise, for the client - Salesforce. And, the design eventually can be properly implemented in a programming language (html/css).
My role
Web Designer & Front-end Developer
Client
Salesforce
Time Frame
6 weeks
Tools
Photoshop, Figma, Visual Studio Code (Adobe Dreamweaver)
Keywords
Responsive Web Design, Front-end development, HTML/CSS Coding.
This project involved 3 phases, from concept to final production with coding.
Background Overview
Background Overview
The customers will generate an annual report PDF that serves as a comprehensive summary of their year's work. The PDF content primarily consists of textual information, including some chart data, without any ornamental images or styles. This year, the client intends to convert a portion of the annual report into web format for user accessibility.
The customers will generate an annual report PDF that serves as a comprehensive summary of their year's work. The PDF content primarily consists of textual information, including some chart data, without any ornamental images or styles. This year, the client intends to convert a portion of the annual report into web format for user accessibility.
Client Brief
Salesforce is a global leader in customer relationship management (CRM) technology. Their cloud-based software aids businesses in improving customer relationships, sales, marketing, commerce, and IT operations.
Client Brief
Salesforce is a global leader in customer relationship management (CRM) technology. Their cloud-based software aids businesses in improving customer relationships, sales, marketing, commerce, and IT operations.
Target Audience
Current customers who have already used client’s service; Potential customers; Investors; Company management and employees.
Target Audience
Current customers who have already used client’s service; Potential customers; Investors; Company management and employees.
Project Objective
To convert the static annual report PDF into a dynamic webpage, and to craft a design system for the web design, enhancing user experience, accessibility, and engagement with Salesforce's financial information and strategic insights.
Project Objective
To convert the static annual report PDF into a dynamic webpage, and to craft a design system for the web design, enhancing user experience, accessibility, and engagement with Salesforce's financial information and strategic insights.
Problem
Problem
The current annual report exists as a PDF, which lacks interactivity and isn't optimized for online viewing, hindering user engagement and accessibility.
The current annual report exists as a PDF, which lacks interactivity and isn't optimized for online viewing, hindering user engagement and accessibility.
Solution
Solution
Visually appealing layout reflecting brand identity and design system.
Interactive features for enhanced engagement.
Accessibility standards compliance for inclusivity.
Responsive design for optimal viewing across devices.
Visually appealing layout reflecting brand identity and design system.
Interactive features for enhanced engagement.
Accessibility standards compliance for inclusivity.
Responsive design for optimal viewing across devices.
UI design
UI design
Content Audit
Content Audit
Different sections of the annual report PDF are organized and categorized based on webpages' specific functionalities.
Different sections of the annual report PDF are organized and categorized based on webpages' specific functionalities.
Color
Color
Considering the client's corporate sector and company ethos, a color scheme resonant with the brand was selected, marrying "feasibility" with "proficiency".
Considering the client's corporate sector and company ethos, a color scheme resonant with the brand was selected, marrying "feasibility" with "proficiency".
Typography
Typography
Simultaneously, the font design carefully considered the font applied in the brand's emblem, aiming to harmoniously align varied styles.
Simultaneously, the font design carefully considered the font applied in the brand's emblem, aiming to harmoniously align varied styles.
Button
Button
In some interactions, lightly anthropomorphic buttons were used to increase the sense of interactivity.
In some interactions, lightly anthropomorphic buttons were used to increase the sense of interactivity.
Card
Card
The layout of the card was leveraged to categorize page material, thus preserving harmony with components like buttons and ensuring the overall design coordination of the webpage.
The layout of the card was leveraged to categorize page material, thus preserving harmony with components like buttons and ensuring the overall design coordination of the webpage.
Imagery
Imagery
The web visuals employ a minimalist aesthetic to resonate with the user's perception of expertise, while the hues harmonize with the overall palette of the page to enhance the web design elements.
The web visuals employ a minimalist aesthetic to resonate with the user's perception of expertise, while the hues harmonize with the overall palette of the page to enhance the web design elements.