People live busy lives but want to know what is currently going on in the world. The popularity of podcasts and audiobooks allow people to consume information without having to stop and read. I wanted to provide a news resource for those with busy lives.
I was asked to research and design a mobile news application and to then build a landing page to advertise the mobile application.
Through interviews and paper prototyping I was introduced to a segment of people who consume news via social media. They are not in the habit of collecting RSS feeds or visiting their favorite online news source. They access Twitter or Facebook and review their feeds.
I wanted to take this information and design a news application that would provide access to this form of news discovery while also providing power users the ability to collect and maintain their own sources.
For non-power users I wanted to provide a list of categories or topics with top stories for each. This would provide quick access to news stories with minimal effort on their part. From there they would be able to scan headlines or select a story in order to dive in deeper and for those with busy schedules an option to listen to an audio readout of the headlines or of a story would be available.
In the future I wanted to provide the option to create, add, and manage custom playlists for those individuals who wouldn't be in a position to read over an extended period of time. Commuters particularly came to mind here.
I began by drafting a sample poster advertising the mobile application to get a feel for the style I wanted to pursue in the landing page design. I did this by focusing on text and not imagery to convey the application's purpose.
The next step was to sketch a layout for the landing page. I wanted to incorporate sample images of the application alongside a description to highlight the main features.
Using the sketches as a guide I went about putting together a low fidelity mock of the landing page. I knew I wanted to have an alternating flow of mobile application screenshots on one side and a feature description on the other side of the page. My thought was that this alternation would break things up visually.
I would later decide to increase the fidelity of the app screens to better convey the mobile application design.
After selecting a color palette, I next went about incorporating it into the mobile screens that would appear on the landing page. I was inspired by the Pocket Casts mobile application for the audio player. Pocket Casts is a popular audio consumption platform (in the top 10 on iTunes in the News category for paid apps) and is one I personally use.
In the first iteration (leftmost) I used the same color palette as was used in the mobile screens. The feedback I received from peers would guide me toward a more neutral tone in future iterations with the intention of drawing more attention to the mobile screens.
In the second iteration (middle) I added a tagline to the top of the page to provide context as to the goal of the mobile application. Mobile phone bodies were added around the mobile app screens in order to provide additional environmental context. The sectional background images were updated to provide even more environmental and feature context.
In the last iteration (rightmost) a shadow was added to the tagline text to provide contrast against the light background image. A dark opaque overlay was also added to the feature background images to allow the feature copy to stand out more.
While working on the code for the landing page I decided that I wanted to attempt to further grab the attention of the audience. My hypothesis was that by having the tagline for the page appear upon page load as if it were being typed on the page, I could achieve this.
In order to provide application download links anywhere on the landing page I also used CSS to have the header persist at the top of the screen upon scroll. I also increased the z-index for the header to a value large enough that it would remain on top of everything on the page.
My code for this project can be found here.
During the prototyping phase I introduced the color design language and instructions with interactive portions. I wanted to engage the audience by providing illustrated instructions alongside written ones. The idea being with each task after a person performs the instruction within the application feedback is provided to indicate completion followed by automatic advancement to the next task. I also wanted to provide the flexibility to go at one's own pace. There would be options to skip tasks or entire sections and to go back to previous tasks as well.
We also wanted to include additional tutorials for advanced features that would appear after the basic tutorial when the layers or filters features had been selected. A prompt would present the option to continue learning more if the person were interested. This would only appear one time but could be accessed thereafter by selecting the "?" help section on the left panel.
Clickable prototype can be found here.
In the end education was our main focus. Our research led us in that direction. Our goal was to empower people using the application to reach their goal. Our suggestions were well received and we handed off our research findings to the Create team so that they could be prioritized and addressed.
