UX/UI Portfolio
PROJECT 1
Healthcare app Bringing healthcare access closer to people by putting it in their pockets. CFI reimagined the way people access vital healthcare services
UX Architecture Process Initial mapping of data flow.
1. APP OPENS TO FIND A DOCTOR
Wireframes
2. SEARCH RESULTS
my med
my med
my med
Search User results can login
Search results
Dr. Name last name Specialization
my med Search by doctor, clinic, speciality Search by locality Bangalore Search Change your current location settings. Fill in more details to get better results.
App opens to page where you can search for doctors nearby based on current GPS location or change the area.
5. SELECTING APPOINTMENT TIME
4. VIEW OF DOCTOR’S PROFILE
my med
Dr. Name last name Specialization
Dr. Name last name Specialization
Book an appointment
05 Th
06 F
07 S
13:15 13:15
13:15
13:15
13:15
13:15
13:30 13:30
13:30
13:30
13:30
13:30
13:45 13:45
13:45
13:45
13:45
13:45
14:00 14:00
14:00
14:00
14:00
14:00
Education
14:15 14:15
14:15
14:15
14:15
14:15
MBBS
14:30 14:30
14:30
14:30
14:30
14:30
MS
14:45 14:45
14:45
14:45
14:45
14:45
Affiliations
15:00 15:00
15:00
15:00
15:00
15:00
15:15 15:15
15:15
15:15
15:15
15:15
Clinics Services Specialization
Awards & recognition
M T W T F S S INR 250 consultation Address of the hospital or clinic
Dr. Name last name
View
Specialization My appointments
My location My regular doctors Dr. Name last name Specialization
M T W T F S S INR 250 consultation Address of the hospital or clinic View M T W T F S S INR 250 consultation Address of the hospital or clinic View
Navigation menu provides options to manage settings and other stored data.
M T W T F S S INR 250 consultation Address of the hospital or clinic
7. REGULAR DOCTORS LIST
my regular doctors
Appointment at 13:00 on 17
Sept
INR 250
Details to confirm your appointment Name
Choose a convenient time for an appointment from those available.
M T W T F S S INR 250 consultation Address of the hospital or clinic
Type in search
Dr. Name last name Specialization
View
Address is mentioned
September 2014 04 W
Testimonials
View
Dr. Name last name Specialization
Choose date and time for the appointment 03 Tu
M T W T F S S INR 250 consultation Address of the hospital or clinic
Search results of doctors are shown based on poximity to the area. Settings can be changed to view alphabetically.
my med
Address is mentioned
02 M
View
email@id of the user
M T W T F S S INR 250 consultation Address of the hospital or clinic
Dr. Name last name Specialization
Dr. Name last name Specialization
M T W T F S S INR 250 consultation Address of the hospital or clinic
6. CONFIRMING APPOINTMENT
my med
Details of the doctor’s qualifications and testimonials can be viewed. Check how authenticity can be maintained.
3. NAVIGATION MENU
Reason
Dr. Name last name Specialization
To book the appointment, details are taken and an SMS confimation is sent.
last visited on 12 July 2014
Notes: Follow up required every 4 months. Make an appointment
Dr. Name last name Specialization last visited on 12 July 2014
Email id
Notes:
Contact # An SMS confirmation will be sent to this number By confirming, you agree to the terms & conditions
Book appointment
Make an appointment
Dr. Name last name Specialization last visited on 12 July 2014
Notes:
Users can maintain details of thei doctor’s visits and use the app for follow up appointments.
Final output
as viewed by patients
Final output
as viewed by doctors A responsive website for desktop or tab version of the app is specially designed for the doctors or their assistants to manage their appointments.
Design brief Create a news app that provides people with succinct news articles covering a broad range of topics.
Challenges To stand apart from the plethora of news apps already available in the market. Catering to customer’s growing demand for personalization and interaction.
Road map
Process Over a span of 3 months, we moved this project from inception to delivery. Research involved studying the current usage patterns of how people use the existing news apps. Their short attention spans coupled with wanting to spend as less time as possible, let to us developing an app which keeps people updated on the current happenings as well as providing a short version of the article. Minimal usage of images so as to not hinder quick reading of articles and a model for revenue where advertisements can be placed were some of the features.
PROJECT 2
Story of news app
UX Architecture Process Initial mapping of data flow.
Wireframes
1. APP OPENS TO NEWS FEED
2. NEWS FEED WHEN YOU SCROLL UP Image related to a headline is placed here with the action bar on the lower end of it. As the image scrolls up, the action bar also moves up and stays on top. The opacity of the bar is reduced.
Action bar stays static once you scroll up the image
News feed POLITICS
News article heading is placed here within two sentences. Source
+14 stories
FINANCE
News article heading is placed here within two sentences. Source
News article heading is placed here within two sentences. Source
+14 stories
POLITICS
News article heading is placed here within two sentences. Source
4. NEWS TYPE PAGE (politics/finance, etc)
Politics
News article heading is placed here within two sentences. Source 24 Oct
9 hrs ago
Summary of the news article in a few lines is mentioned here. Iusto odio dignissimos ducim us qui blanditiis praesen tium voluptatum dele niti atque corrupti quos dolores et quas molesti as except uri sint occaecati cupiditate non pro vident, similique sunt in culpa qui officia dese runt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et exp edita distinctio. Nam libero tempore, cum solu.
News article heading is placed here within two sentences. Source 24 Oct
+14 stories
9 hrs ago
Summary of the news article in a few lines is mentioned here. Iusto odio dignissimos ducim us qui blanditiis praesen tium voluptatum dele
News articles are shown in list format under each news type (politics/finance, etc). Interactions involve below the article where the user can share the article, describe the mood and choose to track the news aticle.
On the homepage, the news feed shows one headline from each news heading along with the source (from where the article is found) and how many more aticles are there in the paticular news type
5. ENTIRE NEWS ARTICLE
A question will be posed for the users to vote on. Yes
No
Advertisement SPORTS
News article heading is placed here within two sentences. Source
Login or sign up
News article heading is placed here within two sentences. Sign in with google
9 hrs ago
Summary of the news article in a few lines is mentioned here. Iusto odio dignissimos ducim us qui blanditiis praesen tium voluptatum dele niti atque corrupti quos dolores et quas molesti as except uri sint occaecati cupiditate non pro vident, similique sunt in culpa qui officia dese runt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et exp edita distinctio. Nam libero tempore, cum solu. Summary of the news article in a few lines is mentioned here. Iusto odio dignissimos ducim us qui blanditiis praesen tium voluptatum dele niti atque corrupti quos dolores et quas molesti as except uri sint occaecati cupiditate non pro vident, similique sunt in culpa qui officia dese runt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et exp edita distinctio. Nam libero tempore, cum solu.
Ads placed intermittently generates revenue.
+14 stories
Skip
Sign in with facebook
Entire news articles are shown at the source of the article but under the name of the app as mentioned in the action bar.
News feed POLITICSUser can login
email@id of the user News article heading is placed here within two sentences. TypeSource in search +14 stories
FINANCEnews Tracked News article heading is placed here within two sentences. Topics
Source Politics
+14 stories
A question will be posed for the users Business to vote on. No
Maybe
Technology Advertisement Sports SPORTS News article heading is placed here Lifestyle within two sentences. Source
The user can skip the login if they dont want to sign up. They can still use the app but their preferences will not be stored to sync with their account.
+14 stories
Tracking Just in
News article heading is placed here within two sentences. Source Yesterday
News article heading is placed here within two sentences. Source
or
24 September
Log in By logging into the app you accept our Terms and conditions
Topics lets you edit which section of news articles you want visible on your home feed. This can be edited at anytime.
7. NEWS TRACKING PAGE
Email id Password
User can choose to login. They can edit their login details from here at anytime. If user has not logged in, an option to do so is shown here. Logged in user’s preferences would be saved.
OPINION POLL
Finance Yes
6. SIGN IN / LOG IN PAGE
The Gaurdian
Source 24 Oct
An opinion poll generates more interaction with the user and hence keeps the user more engaged.
Maybe
When a user clicks on the news heading, it links to the full news article.
App name
Advertisement
+14 stories
OPINION POLL
NEWS TYPE
3. NAVIGATION MENU
Provide options to either log in through google or facebook. The user can manually enter email id and password if they want to use a different id for this app.
News article heading is placed here within two sentences. Source
Advertisement 17 September
News article heading is placed here within two sentences. Source
+14 stories
Tracking is when a user wants to know about subsequent updates about a news article without manually searching for it. News articles that the user is tracking all appear in chronological order.
Visual design Process After discussing the two ways we could take the project, we realised it was prudent to incorporate elements from both instead of choosing one. We decided to have a layout where the text was emphasized and images were restricted to the ad banners. More interactions were to be included to engage users - participation in opinion polls.
Final output
PROJECT 4
Design brief A silicon valley based start up developed a smart device which required a marketing/promotional website about the product, the system and design as well as an application to control and interact with the grid.
Challenges The scope of the product underwent a string of changes through its development timeline. This kept modifying the design brief. Understanding the new area of internet of things (IOT) where exciting and challenging.
Road map
Process Data architecture was made on paper after a series of discussion with the client and stakeholders. The wire frames evolved on the process reflecting changes in design brief and thoughts.
IOT interface app
UX Architecture Process Initial mapping of data flow.
My Home
Create new contact 12:06
Create New Contact Locks owned by me Add from Contacts
3
Apsouni contact
Phone contacts
Contact name
Suresh
Help Phone
Cycle
Sebastian
Bike
Thomas
Address
Locks shared with me Camera
Kiran
Add to a group
Locks shared on Xigrid
12:06
Done
Sudir’s Apsouni
Home
Contact selection to add 12:06
Favourite
Vishnu
Social network link
Homestay
Abraham
Room
Leena
Wireframes Select a lock to share
Sharing with contact 12:06
1
12:06
Suresh
Cycle
Sebastian
Bike
Thomas
Locks shared with me Camera
Kiran Privileged
Vishnu Car
Privilege settings
Apsouni contact
Home
Only for use
Abraham Leena
12:06
12:06
Done
Locks owned by me
Usage settings
Privilege settings
Lock name
Lock name
Home
Home
Sharing with Add a privilege ? YES NO
Usage settings
Suresh Lock setiings privilege Usage settings Control notiďŹ cation Beep Lock sharing privilege Share lock with others Share lock with privilege
Time limit 00/00/00
Start date
Start time 18:00
End date
00/00/00
End time
18:00
Occurance S
M
T
Weekly
W
F
S Yearly
Dec
Year limit
Month limit
Usage limit No of times
T
Monthly
10
2016
Visual design web 1 Process This visual treatment was inspired by tile blocks of information which can be rearanged and resized according to the priority of information and other parameters.
Visual design app 1
Visual design app 2
Final visual design Android and IOS applications and digital marketing website have been released in thebeta stage after 2 months of design and devolopment.
This is the ďŹ nal parallax design out put of apsouni website that agreed by the client and stake holders. This is evolved from a lot of research and studies.
PROJECT 4
Banking app
This is a edesign of thei current app into an e passbook, taking the bank directly into its customer’s pockets.
Initial ideas included:
Final output
PROJECT 5
Social netwroking app
A community required a social networking app developed fo their members.
PROJECT 6
Web re-design
A tech startup required their website redesigned.
PROJECT 7
Logo & Web identity
A startup asked us to communicate online their sale of luxury products. A classic logo that could be used on product materials ranging from wood to metal. The colour and form were chosen keeping in mind the durability of the products over generations to come.
Logo :
Initial ideas included:
Initial wireframes included :
Final output
Logo The school name here
PROJECT 8
Website re-design A school looking to redesign their website to cater to the new method of parents researching schools online before taking a decision regarding their children’s education.
Final VD : Initial ideas included a more traditional look :
PROJECT 9
Logo & Branding Rebranding for a digital agency creative studio required a logo which showcased the combination of technology merged with creativity in its form and colour.
Initial ideas included :
PROJECT 10
Logo & Branding An event management company wanted a logo developed which conveyed a young and energetic team, based on which the colours and form were chosen.
9 ninty 8
EIGHT
PROJECT 11
Logo & Branding Rangoli is the common thread running though the cultures of the north and southern India. The logo developed for Craftmandi-a collection of artisans making and selling indigenous art work, was based on the colours of rural India spanning across the geographical divide.