Intelligence
Final Outcome of Index Page
Metric
Satisfaction Rate
72%
88%
Time Reduction
34%
Testimonials
“You have successfully shortened the operation path, making the entire site very convenient and fast to use. These changes have really improved my productivity and I no longer need to spend time on tedious steps. Now, everything is smoother and saves time and effort. This system allows me to focus more on my work and it is a really valuable upgrade. Thank you for providing us with such excellent products!”
Ningning Zhang
“Your intelligent office system website is truly fantastic! The addition of user-friendly features is a major highlight. I can easily check vacation dates, colleagues' public schedules, and upcoming tasks, which is crucial for improving collaboration. These features make me feel closer to my team and help me plan my schedule better. Thank you for providing us with such thoughtful and practical features; it genuinely makes work more enjoyable and efficient!”
Danny Zheng
“I'm familiar with your office system website's recent enhancements! The expanded homepage info simplifies staying updated. Company news, industry updates, and events are easily accessible, eliminating the need to search multiple pages. This streamlines information retrieval, fostering better team connectivity. It's commendable! Thanks for improving product quality.”
Emily Wong
3.Getting feedback from users
The Problem
1. To do user research with coworkers
2. Using journey map to show how users feel
Business Needs
Users
Needs
Product
Needs
Generate competitive advantage through high quality business applications and drive business growth and success
The need for more intelligent working and convenient operation including the record of business and personal work arrangements
Because of the many functions and the connection between different functions, it is necessary to consider the interaction between them when designing
User scenarios
“I would like to effectively view the status of all tasks currently in progress and easily create new tasks and notify relevant colleagues.”
“I want the interface and interaction to be consistent within and between pages, without giving me too much thought and confusion.”
“I want to know quickly what the company and my colleagues have been up to, and I want to know from the calendar the latest meetings and holiday schedules so that I can organize the current work in hand.”
Efficiency
Intelligence
Consistency
Hustle and time-consuming to arrive wanted page
Take Project as an example
Research
Layout Design
Flow Design
Component Design
Interface Design
My Role
Upgrading the work platform to make it efficient, user-friendly and modern
1 Designer
A team of developers
Project Scope
Smart at Work
Research - Discover The Needs
I revamped the system by creating high-fidelity prototypes and visual designs. Through research and efficient communication with related people, my college and I successfully managed over six sessions which included news, documents, booking, calendar, messages and projects. Moreover, we developed a design system from scratch to facilitate collaboration with the engineering team.
My Responsibility
Smart at Work platform made by low code platform Digital Maker is focused on the core interactions between people, documents and work flow managing the business. It enables organizations to operate digitally with high productivity, agility and efficiency. However, the platform's none-intuitive workflow and several usability issues also hindered the efficiency of our users' work.
Different Needs
Define The Problems - Identifying Functions for Improvement
3.Setting
Index
Design system
Document
Modules
1.Onboarding
Index
Assistance
Document
People
Performance
review
Product
CRM
Incident
Dashboard
Message
News
Project
Calendar
2.20
2.17
2.77
2.91
Due to the limited length of the content, only the most important Index Page is put in this project for explanation
Based on these relatively urgent needs, we conducted a second survey with the relevant colleagues to get a clearer picture of the parts that need improvement.
Average Rating Calculation
Base on principle
From the analysis of the current page, we confirmed that there are mainly 3 places that can be upgraded, they are:
1.Navigation 2.News 3.Calendar
Efficiency
Project: Users could access to wanted projects faster.
Document: Users could find the documents they often use.
People: Users could invite people to attend meeting faster, but are not encouraged to communicate.
CRM: Users could update theirs focused leads faster.
Incident: No need to accessed the panel regularly.
Dashboard: It is just a panel about the project overview.
Booking: Meeting is a thing that would be expired, quick accesses not needed.
1.Navigation
Place the in-page navigation on top for easy access to different pages
Redesign
Current page
Design
Improvable
Improvable
Improvable
Improvable
①
Add a “favorite” icon
②
It changes status when clicking
and adds to left menu
③
Users can directly click the items and be redirected to the destinations.
2.News
Global Styles
Neutral color:
#F3F3F3
#E8E8E8
#DDDDDD
#D1D1D1
#C5C5C5
#BABABA
#AFAFAF
#A3A3A3
#979797
#8C8C8C
#818181
#7C7C7C
#757575
#696969
#5E5E5E
#535353
#474747
#3B3B3B
#303030
#191919
Functional color:
Gradient
Used for accents.
#169B6A
#4DA9ED
Blue
Used as the secondary color.
#2288FF
Mint
Used as the secondary color.
#05B8BF
Orange
Used as the secondary color.
#F8A012
Flamingo
Used as the secondary color.
#FF8093
Gradient
Used for accents.
#502DC4
#B452CB
Primary color:
Primary/Lilac
Used as the primary color.
#3D26DF
Font：
A good font system starts with choosing the right font family; DIGIQAL Design gives priority to the default interface fonts and regular fonts (Arial, Roboto, Microsoft elegant black, Apple square, etc.); at the same time, it provides a set of screen-friendly font families, so that the fonts are always easy to read under different platforms and browser displays, reflecting the user-friendly, stable and professional Features
English font: Open Sans
Chinese font: Siyuan Black.
Open Sans
思源黑体
Font Size：
Maintaining consistent typography and adhering to a logical hierarchy ensures that elements in the interface are clear and easy to identify; DIGIQAL Design has set the font once based on the regular computer monitor reading distance and the best reading angle, while referring to the WCAG standards, such as ensuring a minimum body font size of 14 to ensure optimal user reading efficiency on most popular monitors
Heading1
Scene：Headlines / Special
Weight：Regular & bold
Size：40px
Scene：Headlines / Special
Weight：Regular & bold
Size：36px
Heading2
Scene：Headlines / Special
Weight：Regular & bold
Size：32px
Heading3
Scene：Headlines / Special
Weight：Regular & bold
Size：28px
Heading4
Scene：Headlines / Special
Weight：Regular & bold
Size：24px
Heading5
Scene：Headlines
Weight：Regular & bold
Size：20px
Heading6
Scene：Headlines / Special
Weight：Regular & bold
Size：18px
Heading7
Body1
Scene：Subheading or text
Weight：Regular & bold
Size：16px
Body2
Scene：Body
Weight：Regular
Size：14px
Caption
Assistance
Scene: Special auxiliary text
Weight：Regular
Size：12px
Interface Consistency - Design System
Since the company department is independent and also starts to make new products, it obtains the color value of the main color from the brand design, and begins to expand other colors such as functional colors and neutral colors according to this color value. At the same time, it also stipulates some basic fonts, size and so on, which lays a foundation for the later design.
Consistency
According to one of the three previously established principles, "Consistency," is necessary to set the foundational colors and fonts for the platform at the beginning. Please refer to another article for the complete design system.
3.Calendar
Iteration 1
Iteration 2
Iteration 3
Pro: Users can access 2 news articles at a time, each with an introduction to read.
Pro: Users can access 5 news articles by either waiting or clicking the dots.
Pro: Users can access 7 news articles without waiting or clicking.
Con: Users can only read two news.
Con: They may jump to other pages before the third news is displayed.
While people can view dates and meetings on their calendar, there still exists an issue where users cannot immediately discern the number of meetings scheduled for the day or the vacation plans of their colleagues without individually inquiring. Therefore, in line with Intelligence principles, there is room for improvement.
When users see the news page on the home page, they can only see one piece of news at a time, but it occupies a lot of space, so the efficiency of information acquisition is not very high. Therefore, based on the rule of , I decide to add more information to the news section.
Efficiency
Index
Document
Calendar
Assistance
Sun
Mon
Tue
Wed
Thu
30
31
1
2
5
7
8
9
13
14
15
16
20
21
22
23
27
4
28
5
29
6
30
7
April 2023
Calendar
Meeting
Team’s schedule
Fri
Sat
3
4
5
11
12
17
18
19
24
25
26
1
8
2
9
3
10
10
W
H
H
Chinese new year (7 Days)
2023/03/08 08:00 - 2023/03/10 18:00
New
Annual Leave (2 Days)
2023/03/08 08:00 - 2023/03/10 18:00
Annual Leave (1 Day)
2023/03/15 08:00 - 2023/03/15 18:00
To Do
Configurable notification setting
BMS Product Optimization
Workflow Delegation
# PMO Meeting
Uger Manual
BMS Product Oplimization.
Requirement - Waich
BMS Product Optimization
Configurable notification setting
EMS Product Optimization
14 Apr
13 Apr
13 Apr
12 Apr
12 Apr
10
Overdue
18
All
5
Today
3
Due soon
Iteration 1
15
Today’s task
3
Due Soon
2
Overdue
To Do
20
20
To collect requirements and groo...
MOS Presentation
To check and test features
Sass development
To retrospect the sprint process d...
Aure checking project
To update product backlogs
Sass development
To check and test features presen...
MOS Presentation
14 Apr
13 Apr
13 Apr
12 Apr
12 Apr
Iteration 2
International Workers' Day
The selected full color is filled, and the dots represent
the number of meetings
Today is light blue
Hover comes outline border，
If there is a holiday on that day (H) display the holiday name above
Colleagues on statutory holidays together
Colleagues on annual leave
30
H
30
W
The following shows your colleagues' recent vacation
status to facilitate work scheduling
Index Page