Matthew Sebastian\ ux portfolio

$Page 1: Matthew Sebastian\ ux portfolio$
UX/UI Portfolio

Healthcare appPROJECT 1

Bringing healthcare access closer to people by putting it in their pockets.

CFI reimagined the way people accessvital healthcare services

UX Architecture

Process

Initial mapping of data flow.

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



View



View


my med

Search results



View



View



View


User can loginemail@id of the user

Type in search

My appointments

My location

My regular doctors

my med


Book an appointment

Testimonials

Clinics

Services

Specialization

Education

MBBS

MS

Affiliations

Awards & recognition

my med


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


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


Notes:

Make an appointment


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.

Final outputas viewed by patients

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.

UX Architecture

Process


News feed

NEWS TYPE

News article heading is placed here within two sentences.

Source +14 stories

POLITICS


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


Source +14 stories

FINANCE


Source +14 stories

OPINION POLL

A question will be posed for the usersto vote on.

Yes No Maybe

SPORTS


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


Source +14 stories

FINANCE


Source +14 stories

OPINION POLL

A question will be posed for the usersto vote on.

Yes No Maybe

SPORTS


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


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



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



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


Source

Yesterday


Source

17 September


Source +14 stories

Advertisement

24 September


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.

Final output

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.

UX Architecture

Process


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

E-Mail

Address

Facebook

Twitter

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.

Visual design app 1

Visual design app 2

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:


Final output

Social netwroking appA community required a social networking app developed

fo their members.

PROJECT 5

Web re-designA tech startup required their website redesigned.

PROJECT 6

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:

Final output


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

Logo & BrandingRangoli is the common thread running though the cultures of the

north and southern India. The logo developed for Craftmandi-a collectionof artisans making and selling indigenous art work, was based on the

colours of rural India spanning across the geographical divide.

PROJECT 11