Matthew Sebastian\ ux portfolio
6 likes774 views
This document provides an overview of 10 UX/UI projects, including wireframes and visual designs. It summarizes the design process for a healthcare app that allows users to search for doctors and make appointments. It also summarizes the process for a news app that delivers brief news articles on various topics. Other projects addressed include an IOT interface app, banking app redesign, social networking app, website redesigns, and logos/branding for various clients. Wireframes and visual designs are included to showcase the evolution of ideas and final outputs.
Matthew Sebastian\ ux portfolio
- 2. Healthcare app PROJECT 1 Bringing healthcare access closer to people by putting it in their pockets. CFI reimagined the way people access vital healthcare services
- 3. UX Architecture Process Initial mapping of data flow.
- 4. 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 Wireframes my 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 name Specialization M T W T F S S INR 250 consultation Address of the hospital or clinic View Dr. Name last name Specialization M T W T F S S INR 250 consultation Address of the hospital or clinic View 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 my med Search results Dr. Name last name Specialization M T W T F S S INR 250 consultation Address of the hospital or clinic View Dr. Name last name Specialization M T W T F S S INR 250 consultation Address of the hospital or clinic View 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 User can login email@id of the user Type in search My appointments My location My regular doctors my med Dr. Name last name Specialization Book an appointment Testimonials Clinics Services Specialization Education MBBS MS Affiliations Awards & recognition my med Dr. Name last name Specialization Address is mentioned September 2014 Choose date and time for the appointment 02 M 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 my med Dr. Name last name Specialization 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 number By confirming, you agree to the terms & conditions Book appointment 03 Tu 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 04 W 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 05 Th 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 06 F 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 07 S 13:15 13:30 13:45 14:00 14:15 14:30 14:45 15:00 15:15 my regular doctors Dr. Name last name Specialization 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 Notes: Make an appointment Dr. Name last name Specialization last 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.
- 5. Final output as viewed by patients
- 6. A responsive website for desktop or tab version of the app is specially designed for the doctors or their assistants to manage their appointments. Final output as viewed by doctors
- 7. Design brief Create a news app that provides people with succinct news articles covering a broad range of topics. Challenges 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. Story of news app PROJECT 2 To stand apart from the plethora of news apps already available in the market. Catering to customer’s growing demand for personalization and interaction.
- 8. UX Architecture Process Initial mapping of data flow.
- 9. 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 users to 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 users to vote on. Yes No Maybe SPORTS News article heading is placed here within two sentences. Source +14 stories Advertisement 3. NAVIGATION MENU User can login email@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 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. 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 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. 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 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. 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 user clicks 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
- 10. 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.
- 11. Final output
- 12. 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 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 PROJECT 4 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.
- 13. UX Architecture Process Initial mapping of data flow.
- 14. 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 Apsouni 12:06 12:0612:06 Create New Contact Add from Contacts Help 3
- 15. 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.
- 16. Visual design app 1
- 17. Visual design app 2
- 18. Final visual design Android and IOS applications and digital marketing website have been released in thebeta stage after 2 months of design and devolopment.
- 20. This is the final 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.
- 21. Banking app This 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:
- 23. Final output
- 24. Social netwroking app A community required a social networking app developed fo their members. PROJECT 5
- 25. Web re-design A tech startup required their website redesigned. PROJECT 6
- 26. 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 : PROJECT 7 Initial wireframes included : Initial ideas included:
- 27. Final output
- 29. 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 : Logo The school name here PROJECT 8
- 30. 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 9
- 31. 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. ninty EIGHT 98 PROJECT 10
- 32. 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. PROJECT 11