Native iOS and Android Applications

Introduction

The Overview

CTERA provides cloud storage solutions that enable service providers and enterprises to launch managed storage, backup, file sharing and mobile collaboration services using a single platform and based on the cloud storage infrastructure of their choice.

The Goal

Replace old hybrid application due to slow performance and lack of features

Improve users’ workflow using CTERA including offline file access and collaboration

Provide users native app experience according to iOS and Android design guidelines and patterns

My Role

Led the Design Part of the Project

I worked closely with project stakeholders (Product Team, Mobile Team and CTO) on features prioritization, providing designs, and writing requirement documents

Collaboration with the Project Stakeholders and R&D Team

Collaborated with Mobile Team from the beginning by presenting mockups and product requirements, collecting feedback and testing the final implementation

Design Process

Phase 1

In Phase 1, we just started working on the apps from scratch, so the design process included "Wireframes and Prototypes". I created wireframes and prototypes in InVision and presented them to the team and other people and collected feedback. It was important for me to present iOS prototypes to iPhone users and Android prototypes to Android users

Phase 2

In Phase 2 when we had a strong basis of the apps, I skipped wireframes creation as it was unnecessary at this stage. The process was shortened and time was saved

What We Achieved

Fast Performance

The previous hybrid application had very slow performance and caused negative client feedback. Also, in some cases after iOS or Android updates, the app crashed. With native development, all these issues were solved immediately

Native App Experience

With native development, iPhone users and Android mobile phones users get the app that was designed according to relevant guidelines. So they started using the app naturally with the minimum learning curve

ios

File Manager

Android

ios

Collaborators

Android

ios

Collaborator’s Settings

Android

ios

Offline Access Settings

Android

Seamless Workflow Between Web and Mobile App

With the new app users can access and edit their files with the smartphone even without internet connection. Also, they can share documents and work collaboratively on these files with their colleagues

Easy Branding

CTERA provides white-labeled product to the clients. In the design process, I used only vector assets and native components, which allow color change by code, without replacing the asset itself. Also, I created a style guide with the color palette, icon sets, app elements, and typography and this allowed developers to create a skin file that can be changed easily by the client according to the company branding

Key Learnings

Collaboration is the Key to Success

This is not new for me, but worth mentioning. Working with other people directly, sharing the process, and getting feedback will help get better and much quicker results. I really believe that only with collaboration can we achieve a great product

iOS and Android are Two Different Worlds

At the beginning of the project, one of the stakeholders tried to convince me to do one design that will fit both, iOS and Android devices. By discussing this wish with Mobile Team, reviewing the iOS and Android (Material Design) guidelines I succeeded in convincing the stakeholder that we must design two separate apps, one for iOS, and second for Android mobile devices.

After, I got confirmations that this was the right decision when I was testing designs on iPhone and Android phones users. As an Android user, sometimes Android elements were passed to iOS designs, and iPhone users saw these immediately and told me “Hey, this looks weird!”

Sketch + Zeplin = Productivity Boost

I knew that exporting assets for a project like this could take a lot of time if I didn't do it right. Luckily, I heard about Zeplin app and how efficient it is. With the Zeplin app I could upload all screens from a Sketch file and then developers could download what was relevant to them. iOS developers downloaded PNG files for all iOS device resolutions, and Android developers downloaded PNG and SVG files.

After the great experience with the Sketch and Zeplin workflow, we purchased the full license for Zeplin and I started using it with other development teams.