PROTECTING REMOTE WORKFORCE ANYWHERE

Designing the Web Security iOS app to protect remote workforce wherever they go. The app is the client of TMWS, Trend Micro Web Security.

The following case study walks through a quick 3 weeks design from concepts, prototypes, and iOS app launch on the App Store.

THE MOBILE APP

Soon after Covid-19, the product team quickly decided to build an iOS app so that remote employees and students could be protected anywhere.

This was on the roadmap and was a big request from the Government of Japan (GOJ). Known as the GIGA program, the goal was to provide PC/tablets for students by 2022 (at a cost of $450 per PC/tablet). Because of Covid-19 and the move towards remote learning for students of all types, this project had a tight timeline. The new business opportunity would add 260K+ seats to web security business and a substantial amount of annual recurring revenue (ARR). So we had to move fast.

My role was to design the web security user experience for iOS mobile app. Leveraging Apple's iOS design guidelines, I was able to accomplished the design task in 3 weeks, going from concepts, prototypes, marketing messages, and testing the app on iOS devices.

THE APPROACH

FOCUSING ON USER GOALS

Although the timescale were smaller, I still approached the project with a user-centered approach, collaborating with product management and development to get alignment on business objectives, the user goals, and any technical constraints. With clarity in mind, I used a whiteboard to sketch out high level workflows focusing on two user goals:

• Administrator onboarding
  
• End-user enrollment
  

Whiteboard sketch to show high level workflows for administrator and end-user.

STORYBOARD/TASK FLOWS

After identifying the main workflows from the whiteboard, I created a storyboard to visualize the paths to achieve the user goals, and to facilitate communication with stakeholders.

For example, as part of the onboarding and enrollment experience the goal was for a seamless end-user experience. However, we learned that a Disclosure Data Collection Notice (DCN) modal was needed. After discussions with legal and sharing the Figma in meetings, our team agreed that the DCN was a requirement to ensure complying with Apple's standards for 3rd-party VPN apps, (which web security iOS app is one).

By structuring the design as storyboard flows, our team was able to discuss the technical constraints and made a trade-off decisions with context, albeit with some minor hassle to the end-user onboarding experience.

Figma detailing the first time UX flows, administrator onboarding flows, and settings.

PROTOTYPING THE MOBILE EXPERIENCE

After getting buy-in from stakeholders and due to time pressure, I jumped immediately into Figma for rapid prototyping and finessing interaction designs. Using the loom app, I made a video showcasing the prototype. I find the visual storytelling and a loom video super helpful to show developer the iOS animations. The final prototypes were delivered to our iOS development team to implement, tested, manually reviewed, and launched on the App Store.

The screens above shows the final design for the iPad app.

View Figma file  ›

View on App Store  ›

APP STORE ICON AND SCREENSHOTS

After delivering the prototype, I quickly switched to designing the app icon and screenshots for app review, including writing the copy that would appear on the screenshots.

TMWS Agent

Introducing Web Security iOS App

The prototype below shows the final iOS app for launch.