Federal City Council Case Study - Responsive Landing Page
•
1 like•586 views
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
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
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.