matthew sebastian\ ux portfolio
TRANSCRIPT
Healthcare appPROJECT 1
Bringing healthcare access closer to people by putting it in their pockets.
CFI reimagined the way people accessvital healthcare services
my med
1. APP OPENS TO FIND A DOCTOR
4. VIEW OF DOCTOR’S PROFILE
Search results
2. SEARCH RESULTS 3. NAVIGATION MENU
5. SELECTING APPOINTMENT TIME 6. CONFIRMING APPOINTMENT 7. REGULAR DOCTORS LIST
Wireframesmy med
Search by doctor, clinic, speciality
Search by locality
Bangalore
Search
Change your current location settings.
my med
Fill in more details to get better results.
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
M T W T F S SINR 250 consultationAddress of thehospital or clinic
my med
Search results
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
Dr. Name last nameSpecialization
M T W T F S SINR 250 consultationAddress of thehospital or clinic
View
M T W T F S SINR 250 consultationAddress of thehospital or clinic
User can loginemail@id of the user
Type in search
My appointments
My location
My regular doctors
my med
Dr. Name last nameSpecialization
Book an appointment
Testimonials
Clinics
Services
Specialization
Education
MBBS
MS
Affiliations
Awards & recognition
my med
Dr. Name last nameSpecialization
Address is mentioned
September 2014Choose date and time for the appointment
02M
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
my med
Dr. Name last nameSpecialization
Address is mentioned
Details to confirm your appointment
Appointment at 13:00 on 17 Sept INR 250
Name
Reason
Email id
Contact #
An SMS confirmation will be sent to this numberBy confirming, you agree to the terms & conditions
Book appointment
03Tu
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
04W
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
05Th
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
06F
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
07S
13:15
13:30
13:45
14:00
14:15
14:30
14:45
15:00
15:15
my regular doctors
Dr. Name last nameSpecializationlast visited on 12 July 2014
Notes: Follow up required every 4 months.
Make an appointment
Dr. Name last nameSpecializationlast visited on 12 July 2014
Notes:
Make an appointment
Dr. Name last nameSpecializationlast visited on 12 July 2014
Notes:
App opens to page where you can search for doctors nearby based on current GPS location or change the area.
Search results of doctors are shown based on poximity to the area. Settings can be changed to view alphabetically.
Navigation menu provides options to manage settings and other stored data.
Details of the doctor’s qualifications and testimoni-als can be viewed. Check how authenticity can be maintained.
Choose a convenient time for an appointment from those available.
To book the appointment, details are taken and an SMS confimation is sent.
Users can maintain details of thei doctor’s visits and use the app for follow up appoint-ments.
A responsive website for desktop or tab version of the appis specially designed for the doctors or their assistants
to manage their appointments.
Final outputas viewed by doctors
Design brief
Create a news app that provides people with succinct news articles covering
a broad range of topics.
Challenges
Road mapProcess
Over a span of 3 months, we moved this project frominception to delivery. Research involved studying the
current usage patterns of how people use the existing newsapps. Their short attention spans coupled with wanting
to spend as less time as possible, let to us developingan 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 quickreading of articles and a model for revenue where
advertisements can be placed were some of the features.
Story of newsapp
PROJECT 2
To stand apart from the plethora of news apps alreadyavailable in the market. Catering to customer’s growing
demand for personalization and interaction.
News feed
NEWS TYPE
News article heading is placed here within two sentences.
Source +14 stories
POLITICS
News article heading is placed here within two sentences.
Source +14 stories
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.
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
1. APP OPENS TO NEWS FEED
4. NEWS TYPE PAGE (politics/finance, etc)
POLITICS
News article heading is placed here within two sentences.
Source +14 stories
FINANCE
News article heading is placed here within two sentences.
Source +14 stories
OPINION POLL
A question will be posed for the usersto vote on.
Yes No Maybe
SPORTS
News article heading is placed here within two sentences.
Source +14 stories
Advertisement
An opinion poll generates more interaction with the user and hence keeps the user more engaged.
Ads placed intermittently generates revenue.
2. NEWS FEED WHEN YOU SCROLL UP
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 +14 stories
OPINION POLL
A question will be posed for the usersto vote on.
Yes No Maybe
SPORTS
News article heading is placed here within two sentences.
Source +14 stories
Advertisement
3. NAVIGATION MENU
User can loginemail@id of the user
Type in search
Tracked news
Topics
Politics
Business
Finance
Technology
Sports
Lifestyle
Topics lets you edit which section of news articles you want visible on your home feed. This can be edited at anytime.
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.
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 ducimus qui blanditiis praesen tium voluptatum deleniti atque corrupti quos dolores et quas molestias except uri sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorumfuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum solu.
Advertisement
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 ducimus 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.
App name
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 ducimus qui blanditiis praesen tium voluptatum deleniti atque corrupti quos dolores et quas molestias except uri sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorumfuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum solu.Summary of the news article in a few lines is mentioned here. Iusto odio dignissimos ducimus qui blanditiis praesen tium voluptatum deleniti atque corrupti quos dolores et quas molestias except uri sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorumfuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum solu.
The Gaurdian
Entire news articles are shown at the source of the article but under the name of the app as mentioned in the action bar.
5. ENTIRE NEWS ARTICLE
When a userclicks on the news heading, it links to the full news article.
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.
Tracking
Just in
News article heading is placed here within two sentences.
Source
Yesterday
News article heading is placed here within two sentences.
Source
17 September
News article heading is placed here within two sentences.
Source +14 stories
Advertisement
24 September
News article heading is placed here within two sentences.
Source
Skip
Login or sign up
Email id
Password
Sign in with google
Sign in with facebook
or
Log in
By logging into the app you accept our Terms and conditions
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.
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.
6. SIGN IN / LOG IN PAGE 7. NEWS TRACKING PAGE
Wireframes
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 emphasizedand images were restricted to the ad banners. More
interactions were to be included to engage users - participation in opinion polls.
Design briefA silicon valley based start up developed a smart device
which required a marketing/promotional website about theproduct, the system and design as well as an application
to control and interact with the grid.
Challenges
Road mapProcess
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
PROJECT 4
The scope of the product underwent a string ofchanges through its development timeline. This kept
modifying the design brief. Understanding the new areaof internet of things (IOT) where exciting and challenging.
Wireframes
Privileged
Only for use
Privilege settings
Locks shared with me
Locks owned by me
Home
Cycle
Camera
Bike
Car
12:06
Apsouni contact
Suresh
Sebastian
Thomas
Kiran
Vishnu
Abraham
Leena
12:06
Done
Lock name
Lock setiings privilege
Usage settings
Lock sharing privilege
Home
Sharing with
Suresh
12:06
Select a lock to share Sharing with contact Privilege settings
1
Add a privilege ? YES NO
Share lock with others
Share lock with privilege
Control notification
Beep
Usage settings
Lock name
Time limit
Occurance
Usage limit
Home
Start date End date
12:06
Usage settings
00/00/00 00/00/00
Start time End time18:00 18:00
MS T W T F S
Weekly
Month limit
No of times
Monthly Yearly
Dec Year limit 2016
10
Apsouni contact Phone contacts
Social network link
Done
My Home Create new contact Contact selection to add
Contact name
Phone
Address
Add to a group Favourite
Locks shared with me
Locks owned by me
Locks shared on Xigrid
Home
Cycle
Homestay
Room
Camera
Bike
Suresh
Sebastian
Thomas
Kiran
Vishnu
Abraham
Leena
Sudir’s Apsouni12:06 12:0612:06
Create New Contact
Add from Contacts
Help
3
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.
Final visual designAndroid and IOS applications and digital marketing
website have been released in thebeta stage after2 months of design and devolopment.
This is the final parallax design out put ofapsouni website that agreed by the client
and stake holders. This is evolved froma lot of research and studies.
Banking appThis is a edesign of thei current app into an e passbook,
taking the bank directly into its customer’s pockets.
PROJECT 4
Initial ideas included:
Social netwroking appA community required a social networking app developed
fo their members.
PROJECT 5
Logo & Web identityA startup asked us to communicate online their sale of luxury products.
A classic logo that could be used on product materials ranging from woodto metal. The colour and form were chosen keeping in mind the
durability of the products over generations to come.
Logo :
PROJECT 7
Initial wireframes included :
Initial ideas included:
Website re-designA school looking to redesign their website to cater to the new method
of parents researching schools online before taking a decisionregarding their children’s education.
Final VD :
Initial ideas included a more traditional look :
Logo The school name here
PROJECT 8
Logo & BrandingRebranding for a digital agency creative studio required a
logo which showcased the combination of technologymerged with creativity in its form and colour.
Initial ideas included :
PROJECT 9
Logo & BrandingAn event management company wanted a logo developed
which conveyed a young and energetic team, based onwhich the colours and form were chosen.
nintyEIGHT
98
PROJECT 10