Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Federal City Council Case Study - Responsive Landing Page

•
•

To help launch the SeeDC app, I was tasked with creating a responsive landing page that would direct people to download the app.

1 of 20
Download to read offline
Initial Client Meeting Federal City Council - Kevin Clinton • Interviewed client to determine the client expectations and project scope • Determined that an engaging landing page was needed to help educate tourists about the SeeDC app, an app that specializes in helping people tour D.C. like a local in the surrounding communities • Established a timeline for deliverables and client check-ins
Competitive Analysis Landing Pages Offers incentive for downloading app SeeDC Uninformative Informative Spendee Nothing offered for downloading TripLAgent HubSpot Marketing Grader OPPORTUNITY
User Research • Completed 6 user interviews with families & tourists on the National Mall • Collected 30 user surveys online from people of all ages, employed and retired • Organized data with an affinity map to identify user pain points, user preferences, & opportunities for the landing page
Personas Landing Page • We created personas based on the goals of D.C. visitors as well as the pain points found in the affinity map. • This helped us prioritize which app features would appear on the landing page.
Design Studio Sketches • Using the data from our competitive analysis & user research, we completed several 5 minute sprints to sketch out our ideas for the landing page. • Each time, we spent 2 minutes to pitch our design to one another and then determined as a team which components could be used for the landing page.
Iterated Sketches • Most of our initial sketches expressed a desire to build out an entire landing page website; however upon review, we determined that we would revisit the landing page format in order to provide the correct type of site to the FCC. • We sketched a generic landing page and labeled it with the components we pulled from our last round of sketches.
Wireframe • Large images behind details show destinations in D.C. that are located in surrounding communities • App features should be introduced immediately
Wireframe • In the initial client meeting, FCC gave us 20 pages of tour listings that will appear in their app. They wanted users to know what the SeeDC app offered, so we completed a card sort to identify key topics of interest.
Wireframe • Offering app reviews & advertising the personalization feature were requested by the client, so we included these before the partnership section. • The “Partner With Us” section was created in order to allow companies to advertise their partnership with SeeDC and also encourage new companies to join via contact form.
Initial Prototype • The initial prototype was created in keynote to mimic the scrolling on the landing page. These selected slides show the fixed navigation bar as well as highlight some of the more important components of the landing page. • The client was initially confused by the scrolling effect in the keynote prototype and also pointed out that they did not have any content for the landing page. Since we presented this to the client one week after our initial meeting, we had plenty of time to review all their feedback and produce additional prototype iterations.
Responsive Design • Our next iteration included a responsive design layout since many people now use their mobile devices to browse the web. • The main goal for the landing page is to convert web browsers to actual users of the SeeDC app, so several calls to action were placed throughout the site to direct people to download the app.
Final Client Meeting The final step in our process was to present our iterations and final designs to the Federal City Council.
Final Design • The top of the page features a familiar D.C. attraction with a small description about what SeeDC is, images of the app, and where it is currently available to download. • From our competitive analysis, we realized we wanted to advertise SeeDC’s selling points. Our card sort helped us identify which features should have dedicated sections on the landing page where people can see additional information. • We highlighted the special story by Michelle Obama first since the geotagged stories are the main app feature. As a bonus, we offer the ability to unlock her message immediately by downloading the app. This was also inspired by our competitive analysis on conversion.
Final Design • Our survey results listed several people who wanted to be able to share their trip highlights with family and friends, so we made sure to let everyone know that this app contains those features. • In the competitive analysis, we found that our landing page had an opportunity to convert people to users if we showed the content creatively. We did this by photographing and filming select locations around D.C. to advertise the local spots away from the National Mall. We reaffirmed this by adding related quotes from people we interviewed. • Below the recommendations, there is another call to action for the user to download the app.
Final Design • After showing the app features, we introduced the “Partner With Us” component of the landing page. Here, SeeDC partners have an opportunity to be featured equally via a revolving carousel. • The size of the contact form is a clear call to action for future partners to reach out for additional information on joining. • Since this is a longer landing page, we added an arrow button that users can click to go back to the top of the page.
App Recommendations • We conducted usability testing with a beta version of the SeeDC app and found that the home screen was not intuitive for people to navigate through. • Additionally, the 20 pages of tour listings were not clearly understood to be included in this app based on the current home screen. • As a result, we completed separate research to provide app recommendations for the FCC. Current SeeDC home screen
Competitive Analysis SeeDC App Filtered Information Static/Traditional Layout Dynamic/Innovative Format Unfiltered Information SeeDC TripAdvisor Hotels WeLove Smithsonian OPPORTUNITY
Updated Home Screen • The app recommendations were presented in the form of clickable wireframes to focus on the new functionality. • To compliment the partnership section on the landing page, we designated the top part of the home screen for a featured guide. This featured guide can be rotated on a daily, weekly, or monthly basis with the goal of pointing users to a specific activity that they may not have initially thought about. Additionally, we offer the tour duration so users can plan their day accordingly. • We derived from user research that a search bar was needed to find information and multiple categories were needed to organize content. • We also discovered an opportunity for children to use the SeeDC app by offering a Kids Corner.
Persona SeeDC App • Since the Kids Corner appeared to be an opportunity for SeeDC, we created a persona of a 6 year old child named Zoe. Her scenario was used to determine a user flow for the Kids Corner.
Clickable Prototype • For Zoe’s user flow, she is a budding architect who wants to draw and color a picture of the Washington Monument as she stands in front of it. The rotating flower is a navigation for this section. The main app menu is accessible through the hamburger icon.

More Related Content

Federal City Council Case Study - Responsive Landing Page

  • 1. Initial Client Meeting Federal City Council - Kevin Clinton • Interviewed client to determine the client expectations and project scope • Determined that an engaging landing page was needed to help educate tourists about the SeeDC app, an app that specializes in helping people tour D.C. like a local in the surrounding communities • Established a timeline for deliverables and client check-ins
  • 2. Competitive Analysis Landing Pages Offers incentive for downloading app SeeDC Uninformative Informative Spendee Nothing offered for downloading TripLAgent HubSpot Marketing Grader OPPORTUNITY
  • 3. User Research • Completed 6 user interviews with families & tourists on the National Mall • Collected 30 user surveys online from people of all ages, employed and retired • Organized data with an affinity map to identify user pain points, user preferences, & opportunities for the landing page
  • 4. Personas Landing Page • We created personas based on the goals of D.C. visitors as well as the pain points found in the affinity map. • This helped us prioritize which app features would appear on the landing page.
  • 5. Design Studio Sketches • Using the data from our competitive analysis & user research, we completed several 5 minute sprints to sketch out our ideas for the landing page. • Each time, we spent 2 minutes to pitch our design to one another and then determined as a team which components could be used for the landing page.
  • 6. Iterated Sketches • Most of our initial sketches expressed a desire to build out an entire landing page website; however upon review, we determined that we would revisit the landing page format in order to provide the correct type of site to the FCC. • We sketched a generic landing page and labeled it with the components we pulled from our last round of sketches.
  • 7. Wireframe • Large images behind details show destinations in D.C. that are located in surrounding communities • App features should be introduced immediately
  • 8. Wireframe • In the initial client meeting, FCC gave us 20 pages of tour listings that will appear in their app. They wanted users to know what the SeeDC app offered, so we completed a card sort to identify key topics of interest.
  • 9. Wireframe • Offering app reviews & advertising the personalization feature were requested by the client, so we included these before the partnership section. • The “Partner With Us” section was created in order to allow companies to advertise their partnership with SeeDC and also encourage new companies to join via contact form.
  • 10. Initial Prototype • The initial prototype was created in keynote to mimic the scrolling on the landing page. These selected slides show the fixed navigation bar as well as highlight some of the more important components of the landing page. • The client was initially confused by the scrolling effect in the keynote prototype and also pointed out that they did not have any content for the landing page. Since we presented this to the client one week after our initial meeting, we had plenty of time to review all their feedback and produce additional prototype iterations.
  • 11. Responsive Design • Our next iteration included a responsive design layout since many people now use their mobile devices to browse the web. • The main goal for the landing page is to convert web browsers to actual users of the SeeDC app, so several calls to action were placed throughout the site to direct people to download the app.
  • 12. Final Client Meeting The final step in our process was to present our iterations and final designs to the Federal City Council.
  • 13. Final Design • The top of the page features a familiar D.C. attraction with a small description about what SeeDC is, images of the app, and where it is currently available to download. • From our competitive analysis, we realized we wanted to advertise SeeDC’s selling points. Our card sort helped us identify which features should have dedicated sections on the landing page where people can see additional information. • We highlighted the special story by Michelle Obama first since the geotagged stories are the main app feature. As a bonus, we offer the ability to unlock her message immediately by downloading the app. This was also inspired by our competitive analysis on conversion.
  • 14. Final Design • Our survey results listed several people who wanted to be able to share their trip highlights with family and friends, so we made sure to let everyone know that this app contains those features. • In the competitive analysis, we found that our landing page had an opportunity to convert people to users if we showed the content creatively. We did this by photographing and filming select locations around D.C. to advertise the local spots away from the National Mall. We reaffirmed this by adding related quotes from people we interviewed. • Below the recommendations, there is another call to action for the user to download the app.
  • 15. Final Design • After showing the app features, we introduced the “Partner With Us” component of the landing page. Here, SeeDC partners have an opportunity to be featured equally via a revolving carousel. • The size of the contact form is a clear call to action for future partners to reach out for additional information on joining. • Since this is a longer landing page, we added an arrow button that users can click to go back to the top of the page.
  • 16. App Recommendations • We conducted usability testing with a beta version of the SeeDC app and found that the home screen was not intuitive for people to navigate through. • Additionally, the 20 pages of tour listings were not clearly understood to be included in this app based on the current home screen. • As a result, we completed separate research to provide app recommendations for the FCC. Current SeeDC home screen
  • 17. Competitive Analysis SeeDC App Filtered Information Static/Traditional Layout Dynamic/Innovative Format Unfiltered Information SeeDC TripAdvisor Hotels WeLove Smithsonian OPPORTUNITY
  • 18. Updated Home Screen • The app recommendations were presented in the form of clickable wireframes to focus on the new functionality. • To compliment the partnership section on the landing page, we designated the top part of the home screen for a featured guide. This featured guide can be rotated on a daily, weekly, or monthly basis with the goal of pointing users to a specific activity that they may not have initially thought about. Additionally, we offer the tour duration so users can plan their day accordingly. • We derived from user research that a search bar was needed to find information and multiple categories were needed to organize content. • We also discovered an opportunity for children to use the SeeDC app by offering a Kids Corner.
  • 19. Persona SeeDC App • Since the Kids Corner appeared to be an opportunity for SeeDC, we created a persona of a 6 year old child named Zoe. Her scenario was used to determine a user flow for the Kids Corner.
  • 20. Clickable Prototype • For Zoe’s user flow, she is a budding architect who wants to draw and color a picture of the Washington Monument as she stands in front of it. The rotating flower is a navigation for this section. The main app menu is accessible through the hamburger icon.