VIEW OTHER PROJECTS
MINDSCAPE
TAKELEAP OFFICE APP
Mobile app to execute administrative tasks @ TakeLeap, Chennai
![tl_animated.gif](https://static.wixstatic.com/media/eeeefd_08e5870efa6e48249f6907603b833570~mv2.gif)
![intro_tl.png](https://static.wixstatic.com/media/eeeefd_ece5911454f74fe6ac64e391826eea03~mv2.png/v1/fill/w_980,h_290,al_c,lg_1,q_85,enc_avif,quality_auto/intro_tl.png)
![project_brief.png](https://static.wixstatic.com/media/eeeefd_cf396b652c984cd2ad49d2b1bc4abbb0~mv2.png/v1/fill/w_171,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/project_brief.png)
The one-line brief given was to create an 'office' application meant for internal office use, for employees and admin alike, to manage day-to-day functions like attendance, call for meetings and leave applications!
A simple, structured app with an easy-to-use clean UI was the design requirement.
![my_role.png](https://static.wixstatic.com/media/eeeefd_b17aa2484b7c461c975f380b1b1e58fc~mv2.png/v1/fill/w_124,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/my_role.png)
As the sole UX/UI designer at the company, I worked on understanding the intricate workings of TakeLeap and appropriately defining the app features, user experience, information architecture, wireframing and designing the UI in under 3 weeks.
I got the opportunity to work closely with the developers as the app was being built and be part of the user testing process.
![shadow_below.png](https://static.wixstatic.com/media/eeeefd_d4ecb2a0beff476fa210bbf5068a8fae~mv2.png/v1/fill/w_271,h_533,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/shadow_below.png)
![](https://static.wixstatic.com/media/eeeefd_cee1e1a6e60e43298e359ea745108319f000.png/v1/fill/w_272,h_549,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/eeeefd_cee1e1a6e60e43298e359ea745108319f000.png)
![design_process.png](https://static.wixstatic.com/media/eeeefd_b8185c0af3a441f494e901fc0a6cf834~mv2.png/v1/fill/w_980,h_358,al_c,q_85,enc_avif,quality_auto/design_process.png)
![study_2.png](https://static.wixstatic.com/media/eeeefd_b317affdce644d26bcaf55c4b3924497~mv2.png/v1/fill/w_980,h_834,al_c,q_90,enc_avif,quality_auto/study_2.png)
![study_3.png](https://static.wixstatic.com/media/eeeefd_7895aa0ee0874d9898cbb3437d38b73c~mv2.png/v1/fill/w_980,h_747,al_c,q_90,enc_avif,quality_auto/study_3.png)
![goal.png](https://static.wixstatic.com/media/eeeefd_ef0d1b2143144864b15fe659a287405c~mv2.png/v1/fill/w_980,h_1716,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/goal.png)
![info_arch.png](https://static.wixstatic.com/media/eeeefd_3deaf81ffed0484884f00e052fad0043~mv2.png/v1/fill/w_310,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/info_arch.png)
Features of this app are arranged based on a simple hierarchy that aligns with the user’s expectations.
The main home screen houses the CHECK-IN/OUT feature in order to quickly execute with ease the first and foremost task of the day - to record their attendance.
The home screen also provides quick access to LEAVE APPLICATION and CREATE MEETINGS which are considered as tasks that come next on the priority list, performed during the day. These features have a sub-home page which gives access to feature-specific functions and a record of all the actions taken using the feature.
Other functions of the app that are not likely to be used on a daily basis, can be accessed from the app menu.
![flowchart.png](https://static.wixstatic.com/media/eeeefd_0169f7eff45a41e283503150ff8f61e1~mv2.png/v1/fill/w_954,h_577,al_c,q_90,enc_avif,quality_auto/flowchart.png)
![wireframe.png](https://static.wixstatic.com/media/eeeefd_53f6bac6bbc14f399efbf7bddc7d8278~mv2.png/v1/fill/w_153,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/wireframe.png)
Drawing out low-fidelity wireframe manually aided the process of creating high-fidelity wireframe on Balsamiq.
Click on the red hints to navigate through the interactive wireframe of the Office App.
![wireframe_screens.png](https://static.wixstatic.com/media/eeeefd_190bb27c35154c2ea2856d28957af5ab~mv2.png/v1/crop/x_173,y_141,w_983,h_504/fill/w_981,h_503,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/wireframe_screens.png)
![animation.png](https://static.wixstatic.com/media/eeeefd_eeccbd0956cc477f98f6ebbecc148cde~mv2.png/v1/fill/w_255,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/animation.png)
![comm.png](https://static.wixstatic.com/media/eeeefd_158df406bf754909a643d46dddfd779b~mv2.png/v1/crop/x_49,y_41,w_336,h_376/fill/w_333,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/comm.png)
Goal - Ease the flow of communication
1. Improving admin and employee communication.
LEAVE APPLICATION FEATURE
2. Streamlining communication among employees.
CREATE MEETING FEATURE
LEAVE APPLICATION FEATURE - Improving admin and employee communication.
![](https://static.wixstatic.com/media/eeeefd_db0f1ff2c3d448cdacc6db3aa50b56e2f000.jpg/v1/fill/w_747,h_674,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/eeeefd_db0f1ff2c3d448cdacc6db3aa50b56e2f000.jpg)
CREATE MEETING FEATURE - Streamlining communication among employees.
![](https://static.wixstatic.com/media/eeeefd_e4cac6e5a07240208279131602d64ac3f000.jpg/v1/fill/w_747,h_674,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/eeeefd_e4cac6e5a07240208279131602d64ac3f000.jpg)
![data.png](https://static.wixstatic.com/media/eeeefd_91310fd1097a42d395e60f9fcc3f1565~mv2.png/v1/crop/x_7,y_26,w_389,h_399/fill/w_364,h_373,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/data.png)
Goal - Easy to record and accessible information
1. Recording attendance
CHECK-IN/OUT FEATURE
2. Tracking days/hours worked and vacation days
REPORTS FEATURE
CHECK-IN/OUT FEATURE - Recording attendance
![shadow_below.png](https://static.wixstatic.com/media/eeeefd_d4ecb2a0beff476fa210bbf5068a8fae~mv2.png/v1/fill/w_335,h_660,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/shadow_below.png)
![](https://static.wixstatic.com/media/eeeefd_cee1e1a6e60e43298e359ea745108319f000.png/v1/fill/w_336,h_680,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/eeeefd_cee1e1a6e60e43298e359ea745108319f000.png)
REPORTS FEATURE - Tracking days/hours worked and vacation days
![](https://static.wixstatic.com/media/eeeefd_11d869525147424c90db8d0839933e35f000.jpg/v1/fill/w_747,h_674,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/eeeefd_11d869525147424c90db8d0839933e35f000.jpg)
![ui_design.png](https://static.wixstatic.com/media/eeeefd_670b4b5f93024c0f939c917781f990fb~mv2.png/v1/fill/w_140,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ui_design.png)
The colours and shapes from the branding guidelines of TakeLeap were extended to the design of the UI elements.
LOW POLY MESH (from TakeLeap’s branding guidelines) is used in the design to create consistency with the brand and help maintain visual interest.
![ui_design_page.png](https://static.wixstatic.com/media/eeeefd_8dcb175fa3db423f90b3da4627f67d7d~mv2.png/v1/crop/x_0,y_0,w_981,h_1125/fill/w_978,h_1122,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/ui_design_page.png)
![ui_screens.png](https://static.wixstatic.com/media/eeeefd_1422256205ba4cc69b9f43098e624788~mv2.png/v1/fill/w_150,h_31,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/ui_screens.png)
On-boarding screens that lead to login/ sign-up pages. Home screen with Check-in/ Check-out functionality for quick attendance recording and shortcut icons to important functionalities - leave requests and create meetings.
![](https://static.wixstatic.com/media/eeeefd_68a1b37c6ac545aba166b6d812a555cb~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_68a1b37c6ac545aba166b6d812a555cb~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_ce009c92cab14c368847bf7ba914f4e5~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_ce009c92cab14c368847bf7ba914f4e5~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_2b587510170145a1acf290eac9191f8b~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_2b587510170145a1acf290eac9191f8b~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_68a1b37c6ac545aba166b6d812a555cb~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_68a1b37c6ac545aba166b6d812a555cb~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_83bf3f8d47314646bc197383013661ba~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_83bf3f8d47314646bc197383013661ba~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_0ae5fec530884a6c968f4a4b505d4be2~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_0ae5fec530884a6c968f4a4b505d4be2~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_79222463db524870ab7bd75ecc9c2223~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_79222463db524870ab7bd75ecc9c2223~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_83bf3f8d47314646bc197383013661ba~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_83bf3f8d47314646bc197383013661ba~mv2.png)
The leave request home screen shows the main features under this functionality. Clean forms for easy leave application in days or hours. Simple monthly view, to track the leave period left. A feature is also added to help view past/present leave requests and check its status of approval.
The leave request ADMIN features are different from an employee's personal use. A page, with a simple interface to view all employees' leave requests - sorted by employee name, month, year, approved, pending, rejected, is provided to assist in viewing employee leave requests and approve/reject them with ease.
![](https://static.wixstatic.com/media/eeeefd_489f6eeafb1f4c0cb836d75a8f90cfa5~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_489f6eeafb1f4c0cb836d75a8f90cfa5~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_b3657a885f71438f956be9dc7a818380~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_b3657a885f71438f956be9dc7a818380~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_59b230401f77450ea038e821ec6cdc4a~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_59b230401f77450ea038e821ec6cdc4a~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_489f6eeafb1f4c0cb836d75a8f90cfa5~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_489f6eeafb1f4c0cb836d75a8f90cfa5~mv2.png)
![4](https://static.wixstatic.com/media/eeeefd_7eac5d05cf7240a69d944eb53e55233b~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_7eac5d05cf7240a69d944eb53e55233b~mv2.png)
![2](https://static.wixstatic.com/media/eeeefd_ac54c917f5fa45f49897f27fdf13fe41~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_ac54c917f5fa45f49897f27fdf13fe41~mv2.png)
![7](https://static.wixstatic.com/media/eeeefd_ae62f8d67d094cfebdf468560d2439ab~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_ae62f8d67d094cfebdf468560d2439ab~mv2.png)
![4](https://static.wixstatic.com/media/eeeefd_7eac5d05cf7240a69d944eb53e55233b~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_7eac5d05cf7240a69d944eb53e55233b~mv2.png)
The home page of ‘Meetings’ lets the user view all existing meetings or create a new meeting. A clean and neat form to call for a meeting in the company. An easy UI to choose and add employees to a meeting. View all the organised meetings in categories of pending to respond, upcoming, all and self-created meetings. Quickly respond to called-for meetings, view others who are going to the meeting.
View employee attendance reports with details in a calendar view. Easy to comprehend visualised data of hours worked and overtime hours, checked in and checked out timings. Admin can view these records for each employee.
![](https://static.wixstatic.com/media/eeeefd_92ca7c6137bf4caaa1d9bbc1a3d5f1e5~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_92ca7c6137bf4caaa1d9bbc1a3d5f1e5~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_944d447ee9fd4c4ebea552fca247217c~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_944d447ee9fd4c4ebea552fca247217c~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_ce83cd70c711414881913a1939ea35c2~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_ce83cd70c711414881913a1939ea35c2~mv2.png)
![](https://static.wixstatic.com/media/eeeefd_92ca7c6137bf4caaa1d9bbc1a3d5f1e5~mv2.png/v1/fill/w_608,h_1198,al_c,q_90,enc_avif,quality_auto/eeeefd_92ca7c6137bf4caaa1d9bbc1a3d5f1e5~mv2.png)
![thumb_nail.png](https://static.wixstatic.com/media/eeeefd_e78ad11e0e0147f79a4e28080705c638~mv2.png/v1/fill/w_926,h_635,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/thumb_nail.png)