Kamran Haider

Capable App : Case study

UX/UI design

Overview

Capable is an app that facilitates the user to acquire language naturally. The App is designed to help the user in learning languages. Initially the App is launched with English language teaching capability and will later have many other languages added to it. I played the role of UI/UX designer. I created the Apps interface using Sketch for MAC and also used Adobe suite including Photoshop and Adobe XD. The app was developed in an agile environment and the developers were able to access all the design assets using invision. Invision helps in creating interactive prototypes which help the business team as well as the developers in having a complete understanding of what they are to develop.

User experience

Mobile animation design

User experience design was my main focus after the beta launch of the app. The interaction elements were improved to add a playful experience for the user. I used Lottie animations to improve the user experience. I created lottie animations using Adobe After Effects. I made a whole lesson using After effects and used Andriod Studio to further modify the animation files as per the app's need.

Animations details

There are many lessons in the app where multiple scenes are shown for multiple situations. In order to give the user an unforgatable user experience I animated each scene. This involved a lot of work in Adobe Illustrator, assets were then exported to Adobe After Effects and from there the code was generated to create the animation for the Andriod Studio.

The Capable Website

The core idea for the website was to communicate the teaching methodology to the users and give them a basic overview of the app. After extensive discussion i created a prototype on XD and then created the actual webpage from the wireframed prototype. The websites showcases a video giving a demo usage of the actual app. Also features a calculator which allows the users to estimate the completion time based on the efforts they can put in daily learning.

Skills Used

HTML5

CSS3

Javascript

Responsive Design

UX design

UI design