Initial Client Meeting

• 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

Federal City Council - Kevin Clinton

Competitive Analysis Landing Pages

Nothing offered for downloading

InformativeUninformative

SeeDC

Spendee

TripLAgent

HubSpot Marketing Grader

Offers incentive for downloading appOPPO

RTUNITY

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

• 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.

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

Filtered Information

Unfiltered Information

Dynamic/Innovative FormatStatic/Traditional Layout

SeeDCTripAdvisor

Hotels WeLove

Smithsonian

Competitive Analysis SeeDC App

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.

• 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.

PersonaSeeDC App

• 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.

Clickable Prototype