Redesign DianPing for WeChat Mini Program
Section 02
Section 01
Section 03
Section 04
Section 04
Color Palette
User Flow
Components
Typography
Visual Design
For the color palette. From color theme, alerts to greyscale, are shown on the left side of the page.
White color is our main color as more space should leave for the user. Orange is our secondary color. As for our accent color, green is the default option od Wechat platform. I tried to avoid using both orange and green on the same page.
To connect the key pages and make sure that split the login process into "mobile phone number registration" and "WeChat authorization" to facilitate different business calls. Put "Mobile phone number registration" into a fixed process, and "WeChat authorization" into an optional process.
Based on the Wechat components, I started to build my design components and adjust them with my design for the Dianping platform.
Here are two sections of components. One is the selected components that made by Wechat team, because I need to follow the rules of their principle. Another parts are customized for Dianping, based on the mini programme of Wechat.
The original components just ensure the overall experience of mini programme. The customized components bring a fresh look of Dianping itself.
The reason why we choose PingFang SC as our primary typeface is that mini programme is designed for Chinese, it's necessary for us to choose a typeface which is able to support as many font weights as possible. Besides the font weight support, PingFang SC typefaces can also adapt to all sizes while appearing specifically designed for each size, which makes it easier for the elder to reader.
Black_Opacity_90
Main
Secondary
Accent
Black_Opacity_50
Black_Opacity_30
Black_Opacity_15
Black_Opacity_10
White
永
永
永
永
永
永
永
60%
30%
10%
Color Theme
Alerts
Greyscale
Thanks for Watching
:D
Redesign BBC
for Discovery
Research
Brainstroming
User Flows
Brand Design
Design System
UX & UI
Icons & Illustrations
iOS Native App
Thanks for
watching
Research
Brainstroming
User Flows
Brand Design
Design System
UX & UI
Icons & Illustrations
iOS Native App
User Flow
To connect the key pages and make sure that I have a smooth user flow, I start a new user journey at the very beginning when user is ready to download the app.
Color Palette
Section 02
Typography
Section 04
For the color palette. From color theme, alerts to geryscale are shown on the right side of the page.
White color is our main color as more space should leave for the user. Black is our secondary color. As for our accent color, blue is my first choice as color blue always makes people feel safe. And with the adjustments of the brightness, I hope the young generation will also in favor of our BBC’s new App experience.
The reason why we choose SF Pro as our primary tyface is that BBC is designed for a global audience, it’s necessary for us to choose a typeface which is able to support as many languages as possible. Besides the language support, San Francisco typefaces can also adapt to all sizes while appearing specifically designed for each size, which makes it easier for the elder to reader.
Components
With the finish of some of the key pages. I started to build my design components and adjust them with my design for the rest of pages.
For the buttons, I mainly have primary button and secondary button, ghost button is added later. While for this part, I’m not sure how can I add the buttons I use when it comes to the dark mode.
The other components such as the textfield, selction and icons are finally settled down with the design process of my pages.
Section 03
Visual Design
Section 05
White
Gray_100
Gray_200
Gray_300
Gray_400
Gray_500
Gray_600
Gray_700
Gray_800
Gray_900
60%
Main
Secondary
Accent
30%
10%
Blue_500
Yellow_500
Red_500
Success
Green_700
Links / Info
Warning
Error
Primary Color
Primary Color
Color Theme
Alerts
Grayscale
Section 01
Discover
Design
Delivery
Research
User Experience
Design System
User Interface
Content
Feedback
Splash Screen
App Store
Download & Open App
Let’s go
News
Sports
Weather
TV
Sounds
Radios
Apple
Homepage
Navigation
Tab
Skip
Skip
News
Sports
Weather
TV
Sounds
Radios
Education
Under 16
16 or over
Date of birth
Email & Password
Verify your email
My Account
Homepage
Search
Message
What interests you about the BBC?
Setting
App information
Other BBC apps
Profile
Sign in
Register
Education
Buttons
Primary Button
Secondary Button
Ghost Button
Ghost Button
Textfield
Selction
Placeholder
Defult
Filled
Defult Text Area
Filled Text Area
Success
Warning
Error
Password
Select your choice
Checkbox
Radio
Toggles
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Password
Please select one …
Please select one …
Option one
Option two
Option three
icons
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
SAT
FRI
THU
WED
TUE
MON
SUN
May 1999
07
Genetic clues for severe Covid
07
Genetic clues for severe Covid identified
Cells
Lable
Lable
Text
Lable
Lable
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text
Lable
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lable
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text
Navigation
Page Title
9:41
9:41
Aa
Characters
Styles
ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*
Light
Regular
Medium
Bold
SemiBold
Light Italic
Regular Italic
Medium Italic
Bold Italic
SemiBold Italic
