Native iOS/Android Applications

CTERA Networks

UX
UI
Mobile
CTERA Native iOS/Android Applications

Introduction

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.

New mobile app design and development three main goals:

1

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

2

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

3

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

My Role

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

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

Validated that designs meet iOS and Android look and feel by presenting them to iPhone and Android mobile phones users

Design Process

Phase 1

Design Process Pt. 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 Pt. 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

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

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
iOS
File Manager
File Manager Android
Android
Collaborators iOS
iOS
Collaborators
Collaborators Android
Android
Collaborator’s Settings iOS
iOS
Collaborator’s Settings
Collaborator’s Settings Android
Android
Offline Access Settings iOS
iOS
Offline Access Settings
Offline Access Settings Android
Android
Seamless Workflow Between Web and Mobile App

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

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

Learnings & Takeaways

1

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

2

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!”

3

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.

I think if I had done it manually - maybe this project would have never finished, just kidding :)

Thank You!