Kamran Haider

Capable App : Case study

UX/UI design

Persona & Archetype:

Who will be our users:

  1. Office Professionals 80%
    People who have a need to learn Arabic Language in order to continue their current job or to gain professional benefits based on their ability to use the language in daily tasks

  2. Travellers 15%
    People travelling to the Arabian peninsula want to learn the language for basic communication and gestures

Persona 1:
Archetype - The Sage, the thinker

Professional Office worker: Mr. David Miller
Age: 39
Profession: Business Analyst
Location: American Expat living in Saudi Arabia

Technology
Internet: Always Online
Social Media: Active Twitter and facebook accounts
Online Shopping: Frequent Amazon buyer
Gadgets: Mobile and laptop

Biography:
David has recently joined a role as Business Analyst in a major bank in the kingdom and does a lot of meetings daily. Although all the people he comes to interact with are very good English speakers, but when the native people speak to each other in Arabic David feels alienated.

Wants & Needs:
David wants to be able to understand the language so he can be part of the conversations, but what he critically needs is to understand the requirements that are written in Arabic in many of the business documents.

Frustrations:
David is frustrated to know that the learning can take significant time and effort and he cannot afford to find time after a busy daily schedule at the office.

Persona 2:
Archetype - Explorer ( Freedom)

Sarah Jackson
Age: 32
Profession: Youtube Vlogger
Location: Australian born migrated to UK

Technology
Internet: Always Online
Social Media: Huge following on Youtube Channel, very active on Twitter, instagram and facebook
Online Shopping: Buys a lot on ebay, amazon and online stores
Gadgets: Mobile, cameras and laptop

Biography:
Sarah Jackson is a travel vlogger. Her videos are famous and users are keen to look at her vlog related to a specific location that they are visiting , if Sarah has vlogged about a location the user is sure that he/she can get all the information needed to travel to that destination. Her fan base is continuously increasing.

Wants & Needs:
Sarah wants to collect more insights about the places she visits and she thinks that being able to speak native language can be very helpful in getting this information.

Frustrations:
It seems virtually impossible for Sarah to find someone who can train her for the many different languages she wants to speak on the go. She cannot engage in a classroom based learning since she is always on the move.

Conclusion :
Our Solution and Brand Alignment

Knowledge with freedom!

App Design journey:
Wireframing and High Fidelity Designs

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 and Arabic language teaching capability, yani Arabic speakers can learn English and English speakers can learn Arabic. The App 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.

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