Native iOS and Android Applications

CTERA Networks
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
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
Mobile Wireframes
Phase 2
Design Process 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
File Manager iOS
File Manager
File Manager Android
Collaborators iOS
Collaborators Android
Collaborator's Settings iOS
Collaborator’s Settings
File Manager Android
Offline Access iOS
Offline Access Settings
Offline Access 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.