After a long hiatus, I have finally come back to writing on the blog (sorry guys!)  I have finally completed the app and it's layout.  I changed the homepage to having the navigation on the bottom instead of from a button on the top left.  This is because it would be more intuitive for navigation on the bottom since people right away know where to go for navigation.  The top left navigation button is very common, but since not everyone has experience with apps,  the bottom is the best place.

The center has the main feature, search for clinical studies.  You can either search for a key term in the search box, or refine your search by clicking on the filter buttons.  When you get to the search results page, there are options for advanced search filters such as age, gender, location, etc.

On the navigation bar, there are buttons for About us, which is general information on Mount Sinai and our app project.  Contact us is to contact our general team about questions regarding the app or clinical trials in general.  To contact about specific studies, there is another contact feature on each study allowing you to ask the investigators specific questions.  The FAQ is a frequently asked questions page that is pretty self explanatory.  It only includes questions in general for clinical trials and not for specific studies.  The sign up link allows you to sign up for updates with us in case you are unsatisfied with your search results.

The specific study page has finally been completed since last time! If you search for specific study pages on other websites you may find it to be filled with jargon and hard to navigate.  That is why we created the slideshow.  It has all the 6 basic question words as the slide titles being who, what, where, when, why, and how.  Each slide is designed to answer these basic questions about every study.  It will make it more complicated for researchers to post their studies but it's much better for patients!

If you are uninterested in flipping through a slideshow, then I guess you're out of luck. OH WAIT! You can just simply click the buttons below the slideshow for access to the information you would want in figuring out which study is for you.  It has its goal, its qualifications, contact information, study location, and more.
The tell me more page is organized very similarly to this page except instead of a slideshow, it has an explanatory video by the investigator of the study, and underneath it has buttons for the timeline, study procedures, informed consent page, and participant testimonials.  The informed consent page will contain all the jargon most of us hate, but it's required so I guess we have to deal with it.

Below I have included a few more screenshots of the app and how it should look.  I hope it passes the ultimate test on the app market and I get a bunch of phone calls begging me to work for them because of my genius (a man can dream).

I decided I didn't like the way the app interface from the previous design.  The introductory slideshow just wouldn't give the patients access to the information in a manner they would like.  I decided to go with a homepage that gave access to all the features of the website with a click of a button rather a slide of a slideshow.  This way, they can easily sift through the information at their leisure and know what information what about to be displayed, at least for the opening page.  For each individual study however, a slideshow can still be used.  The who, what where, when, why, and how model will allow for easy access to the information and knowing what was about to be shown.  For the website, the opening page can still have the introductory slideshow since that could be at the top of the page and have all the information below it.

This is the new home screen.  I like the quick access it offers to all the information they would need at the click of a button.  The color scheme can be changed adding a background image to make it more interesting.
I also decided on a color scheme for the whole app; the light blue and white alternating colors.  This was on Rebecca's suggestion to make the whole app a unanimous color scheme as most apps don't change that up for every page.

I made this slide last week, but when I was looking at it, I was thinking I want some pictures to go here to make it more interesting to look at.  Also I want the pictures to go along with the theme I'm going for and I'm unsure what to use.
What I'm thinking is getting rid of that last box on the bottom and replacing it with just a button that says "Click here to Get Started with Advanced Search" all in blue hyperlink color.  That would free up some space to put pictures in the 2 other boxes.

Now here's a question I have.  Should the FAQ slide have sample questions from the FAQ? Or should it just be an introduction to the FAQ with a link to the full FAQ, similar to what is already on the slide?  I'm going to consult the boss on this one.

As of now, the FAQ and the Law We Abide By slides and pages are all getting their information from clinicaltrials.gov.  It's the easiest way to get the most accurate answers to most of the questions our users would ask and accurate information relating to laws that govern our existence.
The About This Site page needs input from Dr. Atreja.  I'm not sure exactly what information should go on there exactly, since I haven't been with the hospital since this project's inception.

Today was a productive day! With Jeremy's help, I was finally able to get the screenshots I wanted.  I am creating a slideshow within a slideshow on PowerPoint.  I want the opening screen for the app to cycle through slides.

The first slide is about why bother with a clinical study and what they are. I gave an image of the first draft of what it would look like.  It won't have the little pointer on the top in the real version but it came with the format I used so I haven't removed it yet.  I picked the colors based on the medical record redesign competition introductory slides, which had colors that were easy on the eye and yet not black and white boring.  I also decided to throw in the details of how the studies are FDA monitored through the use of institutional review boards.

The second slide is about why we need participants reinforced.  The idea is to enforce the notion of needing the volunteers. It also has a link to how to get started and takes you to the advanced search page.
There will be a main page where each of these individual slides will be members and just cycle through.  It would be unwise to claim "Mission Accomplished" before the deed is fully done like some famous people we know, but we're at least on the right track.  The designer's block is slowly starting to fade!
At this point, I'm not sure if I may throw the last part on the bottom into another slide and add some nice images to this slide instead of just text.  As good as I am for picking colors (please, applause at the end), I think there should be some nice images thrown in there.  I may take a consultation to determine the right images to add.

Now, I finally start the design process, or at least only for an iPad.  I began utilizing the iPad PowerPoint slideshow that Dr. Atreja made available to the team, so let the screenshots begin!
At this point, I'm at a designer's block right now.  Yesterday, I could not come up with a screenshot I found useful, so I decided to try and figure out all the different features the PowerPoint slideshow has.  Unfortunately, I cannot find the right way to show a slideshow on the iPad PowerPoint tool he gave us.  I really think the slideshow will add a nice touch to the app and would be more compelling for viewers than a long video by a guy in a lab coat, but I cannot find the right way to show it at this point.

For the app, I would really like the slideshows to be fluid like in the app to the right.  That's News360 which allows you to view different stories by topic and then choose which source you want to read.  I love the layout that resembles a slideshow of different articles.  That's how I want the app to be introduced.  It's true that you can't always get what you want, and we don't need the Rolling Stones (not the magazine) to tell us that, but I still think there's a way to get this in there.

In the meantime, I have tried at a screenshot of the advanced search page.  To the left is a snapshot of where I was at a few hours ago. It's really simple, with buttons to set age, gender, disease, and turn location on (only works from a phone).

I want the search to look like Google Maps advanced search. You can see a video of it at this link. https://www.youtube.com/watch?v=cQWaJqewXLw#at=17.  I couldn't get a video to properly embed on this blog so I posted the link instead.  The way Google Maps works is you can select which filter you want to turn on and it changes the search results in no time.  I also want a color surrounding the search result showing how close it fit the search filters.  Google can do it much better than what I'm capable at this moment, but I plan on reaching that level.

I now have a much more solid idea of what the app and website are going to look like.  It'll have a slideshow on the opening page cycling through a few slides that introduce the website and its functions with a background in how our website was established and operates.  Each slide will be designated by a row of symbols depicting each slide's purpose. The app may just be a row of dots for each slide, much like many other apps on the market.
The slideshow will have this layout for the app as pictured to the left, even though definitely not this aesthetics.  It will be a slide show that automatically rotates through slides: Why bother with a clinical study?, how we can help you, Advanced search slide explanation and link, sign up for updates, About this site, laws we abide by, and submit a study.
There will be a similar style slide show for each study that will switch through automatically just like the home page.  It will have why, what, who, where/when, how, and a sign up slide that will describe how to get involved.  Why describes the purpose of the study and why we need to conduct a clinical research trial.  What will depict what exactly will be done during the trial, be it a drug testing or a surgical procedure trial.  Who will state who is qualified with specific age ranges, gender targeted, etc. Where/when is pretty straight forward what it will present.  It will be where we tell them where the study is conducted and when the study is taking place along with description of the sponsoring company.  The how page will be a link to an interactive timeline showing what will be happening along the course of this trial that you can click on specific items and it will give a full description.  Finally, the last slide will have a sign up sheet with space to enter your contact information.

The menu image will be set up like this image to the right.  The icon is on the top left of the page and when you click it, a menu slides in from the left and you can pick what you like.  The menu should include items for searchbox, Homepage, Advanced Search, About this site, Laws we abide by, sign up for updates, submit a study.

Design is maybe the hardest part of development.  I would say there aren't many things I wouldn't do in order to make this easier (just kidding, but you get the picture), however, I think I have a much clearer idea about what I would like to create in the end.  I can outline the principles in a few goals I am setting for the design of the website:
1. The first one is the most straight forward and basic one but here it is. Make sure all the information that must be included on the website is accounted for.  This one's pretty obvious, but might as well state it anyway.
2. While all of the information still needs to be there, the website is as concise as possible.  All the space available on the screen is used, but there isn't an overload of information in one place.  When dealing with smartphones and tablets, it's a necessity because people need to be able to choose with their fingers.  Also, try and keep the number of pages as small as possible without overloading them with info. Complexity should be kept to a minimum and too many pages to a website can get confusing to some.
3. Every page is organized in a clear manner so no one would easily get confused by how to use the website.  Each button is clearly marked and appropriately placed.  They say the number one thing that will determine a company's success is location.  Make sure that everything is properly placed since ease of use will stand as an advantage against competition.
4. Keep the viewers entertained while on the website.  This doesn't mean put on games on the website for them to use, but make sure the graphics and effects on the website are intriguing and pleasing while getting the same point across to a diverse audience.  The aesthetics need to keep people interested in the website enough to get them through the pitch of committing to a clinical trial.

That covers the main points I want the website to have. I set them as goals and make sure that as I continue throughout the design process, I keep these goals in mind at every step.

There's a lot to cover in getting all aspects of design in, so this may take a bunch of posts to get everything on the table.
I'm going to put up a checklist together of things to keep in mind while designing an app.  I know Jeremy put one together on his blog which is much more in depth than this one, but I'm sure my list will eventually encompass what he has already written, and I hope some of the stuff here will highlight the most important concepts.  The billboard and store design mindset is a great strategy to remind yourself of the overall goal of the specific thing you are designing.  His full design checklist is available from his 6/26 post.
My checklist is a mixture of what I have thought about and read online in designing apps.  They also make sense taken out of context of course.

1. Have a clear idea of the flow of the website/app and how it's going to intertwine to make the finished product.  Jeremy wrote that you must ask yourself "Is the progression from one screen to the next intuitive?"  This is going along with the idea that each link on the page to another part of the app should be appropriately labelled, but to get a clear image of the flow of the app, a flowchart or flow-map is needed.  This gives a picture version of what the users would be experiencing when using the app, which helps drastically in design.  It's hard to drive a car without a view of the road ahead.

2. Work as a team.  This may sound kind of impeding for a designer to have to consult a "bureau" to implement design, but it's necessary.  A designer may come up with an idea that may be out of the reach of the tools currently supplied to the developer, and would need to be avoided due to it's cost.  The only way to find out of these budgeting issues is to consult with the team and find out what is a plausible solution.

3. Try and design in a way that encompasses different resolutions.  The recommended method is to start with the highest resolution and go down from there.  The best is to use vector graphics since they are completely malleable to the size needed.

4. Don't overcrowd the screen with information.  Jeremy also touched on this idea in his blog.  While it is necessary to get all the functions into the app you want, it is not necessary for them all to be on the same screen.  Overcrowding leads to the user getting overwhelmed and distracted from why they are using the app.  It's also tempting when designing for something with a high pixel resolution to stuff more into the page to take advantage of the extra space.  Make sure that the functions are broken up best by screen and not all thrown into one screen for simplicity and to fill in space. Also, for touchscreens people's fingers are only about 1.6cm - 2cm wide, so you don't want buttons too close to each other.  People will get annoyed if they can't select the button they want and leave the app altogether.

5. Be very careful with intro animations.  This is a big hit to my idea of an intro video into the site and app.  I would love to have a really nice video leading people into the website.  The problem is intro videos can take a while to load and make it take too long to get to the functionality of the app, which would aggravate the users.  Do not be overly focused on an intro video, since people are there not for videos but for the functionality of the app (unless it's youtube but that's different).  A better idea is to use an image to take up the screen during loading time and intro into the app.  It is much better in terms of loading the app and still gets the same idea across.

6. Don't leave users out of the loop on what happening with the app.  When the app is taking a while to load it can be misconstrued as a faulty app instead of just the connection, and people will leave the app with a "one way ticket".  Display a loading image to let the users know the app is working but waiting on the connection.

7. Don't blindly copy styles from different OS.  This is exactly in line with my post from yesterday about cross-platform frameworks that are offered.  Each device has it's own layout and platform, which must be kept in tact for that device.  It may require multiple versions of the same app.

8. Don't assume users will use the app in the same way.  Make sure that you use a testing group to determine if the app is designed in the most intuitive way for the most people.  I think the best way to overcome this problem is to give users the opportunity to either organize the app to their liking or to have all the choices lined out for the user to pick from.

9. Keep in mind that not every single element on a page has to be fully visible or extremely easily accessible.  Reserve the less necessary elements for buttons that are on the bottom of the page that must be scrolled down to or swiped down with the finger in order access. Here's a great example:

Keep gestures in mind that would reveal more of a page, but don't become overly reliant on them.  If the webpage is too confusing to use then people simply won't use it.

10. Take your sweet time in development.  There's no rush and there's no bonus for releasing a defective app early.  Take the necessary time to make sure all functions are properly placed before releasing the final result.

11. Make the app user-centric.  Think in terms of how the user will use the app and not how you're going to design that part yet.  That comes later when you consult your team.  The highest priority is given to user experience since they are who you need to impress.

I started to look over how to design a mobile app today.  Being a mostly CSS and HTML5 guy at the moment, this was all very new to me.  So the way I started gaining knowledge? Google of course! What I found is getting me on the right track towards app development, even though I have a whole highway to go.
What I found so far is basically the idea of cross-platform design.  This deals with the issues that arises when designing an app for a multitude of devices.  The solution one article points out is the cross-platform design scheme.  The article lists some pros and cons of a cross-platform scheme.  Before I get into the pros and cons I should at least mention what such a design is.  The idea of a cross-platform design is to enable you to write one code that would be implemented across different devices, be it an iPhone, Android, Android Tablet, iPad, etc. The image to the right shows the same app on different phones, the iPhone and some Android device.  Companies offer packages and software that allows you to write in some dynamic or script language that would be implemented across different device platforms.  Appcelerator and PhoneGap are examples of products that do this.  Now into the costs and benefits:

Pros of using a cross-platform framework:
1. Code is reusable: as the title of the design suggests, the code can be used across different device platforms.
2. Plugins: Major frameworks, such as Appcelerator and PhoneGap as mentioned before, allow access to plugins and modules that can plug into other services or tools.
3. Easiness for web developers: this one goes to us, the team creating the multitude of different implementations of the same app. It would make it easier for the web developers behind the scenes
4. Reduced development cost: instead of spending money and resources making different code and design for different devices, you write one version that is implemented across different platforms for you.
5. Support for different Cloud services: the frameworks also offer integration with cloud services like Box.net, which we use to share stuff as well.
6. Easy Deployment: this goes along with having only one code to be implemented across many platforms

Now for the Cons:
1. The framework may not support every feature of the Device or Operating System: this is because any update to the devices from Google, Apple, Microsoft, or whoever that brings to light a new feature will not be compatible with the framework, that is until an update comes around.
2. You can't always use your own tools: Most frameworks want users to use their own development tools and suites, and that can mean that a developer has to forgo his or her own IDE preferences and use something else. PhoneGap actually allows one to use the IDE preferences native to that device platform.  Otherwise, you may have to just do the project without the cross-platform framework.
3. Code might not run as fast: cross-platform compiling may take considerably more time than using the operative system's native tools and calls for an app.
4. High-End Graphics and 3D Support is Often Limited: some tools, like Unity, allow for much better 3D and High-End Graphics
5. Vendor Lock-in: most cross-platform frameworks require you to use their own subset of JavaScript, which means that if you want to switch to another platform, that code you wrote before is likely not going to be reusable without a lot of work.

These are just things to consider when making an app.  Most likely, we won't use a cross-platform framework due to the fact that using your own tools and features are not supported very well and I wouldn't like to be tied in.  What I got out of it was opening my mind to the idea of having different versions of the same app that would be used on different devices.

Each operating system has there own specialties.  This can relate to layout or other tidbits of the OS that effect how information is displayed, retrieved, and stored.  I am going to mention some differences between the major operating systems that must be considered.
The first one I will talk about is open source OS's.  I'm not going to spend so much time here because they are fading from use in phones and devices and major companies beat the competitors.  These are used on the cheaper phones and do not have many special functions built in.  3D video and other luxuries are only available on major brand name phones, like the iPhone and Samsung devices. When designing for these OS's, keep in mind the restricted functionality not found on branded OS's.  Also keep in mind that some open source operating systems, like Android's OS, are used openly by other companies and do have increased functionality.
A major OS found is the Blackberry operating system.  It is made primarily for business, with functionality taking precedence of personality and aesthetics. Focus is on communication features like email and BBM and not on media display.
Another OS found is Apple's iOS which is found on both it's phones and iPads. Operating system security and compatibility has been a point of contention for some in regards to iOS. It is entirely closed-source, and Apple chooses on its own which software the platform will and will not support.  Aesthetics do take high priority here as does ease of use.
Windows now has its own line of phones and therefore its own OS to go along with it. Because it is a Microsoft product, it is easily compatible with many Windows programs such as Microsoft Office, making it a popular choice for businesspeople.
The Android is based off of the Linux operating system. Originally developed by an independent organization, it was later bought by Google, although the OS itself remains free and open source. Android is praised by many for his flexibility as a platform. Anyone can develop apps for the OS, and any company can release a phone using it. Even with this fact, however, there are still differences in functionality and appearance across Android phones and caution should be used not to overgeneralize Androids.
Given the nature of technology, updates must be regularly checked for and accounted for.  In just 3 months, the phone and device world can be changed drastically with the release of a new product or technology.

I think adding a slideshow presentation to each clinical trial post would be a great visual draw for people to the study.  The slideshow would probably cycle through the purpose of the study, who is qualified, what exactly will happen (of course only showing what we can that will not spoil the results), and the informed consent form (mainly a description of the consent form with a click-able link).  It should also include information on the sponsor who provided the information.  The slideshow will give easy access for people to browse through the study elements and what exactly they want and need to know.  We can make special icons for each slide that represents the purpose of that slideshow.
Each slide will be a click-able link to another part of the webpage or another webpage on our site.  The purpose of the study will link to the video by the doctor and some text as well.
I have to think a little bit on the best pics to use as the icons for each slide, otherwise I'd make this post more interesting with some pictures. 
Also, we should add a timeline of the trial from start to finish for them to see and click parts of as well.  This should be placed underneath the slideshow or have it on another page that has a link to from the slideshow presentation.  It will visually show patients what they would be doing throughout the entire trial.

Goals for the Summer
1) Exposure to Health Care System
2) Exposure to Mobile App Development
3) Enhanced experience with HTML5 and JQuery