Redesign BBC
for Discovery
Research
Brainstroming
User Flows
Brand Design
Design System
UX & UI
Icons & Illustrations
iOS Native App
Thanks for
watching
:D
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
Section 01
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
