Surge iOS 10 Widget Design

This is a widget design I made for Surge, a VPN app several month ago. We met difficulty since iOS 10 suggested the widgets to be transparent white backgrounded. The attachment was my original solution to improve readability but was proved bad in the real case.

So I made it another way as you can see in the preview. In the default view the widget only displays upload/download speed and connectivity, along with the VPN switch, while shows a complete speed graph with server options when unfolded. Thanks to Yachen Liu's help, we could increase the white background's opacity smoothly when the widget unfolds, in order to raise the readability, and reduce the opacity back to default when users tap "Show less" button.

More by Joseph Liu

View profile