City Search Website

The Brief

Wrigley Field, deep dish pizza, and “the Bean”  — all a part of the beautiful city of Chicago. For a personal project connected to Udacity’s FrontEnd Web Developer Nanodegree, I developed a website featuring a map of Chicago. The project required, HTML, CSS, JavaScript functionality, and use of third-party APIs ( see the original design ). However, I had not tested the the product with real users. I decided to go back and iterate on the original webpage from a UX perspective and center my thought process around the needs of a first time Chicago visitor.

full case study HERE


The Results

A competitor analysis showed that similar city search webpages used easy to navigate search features, large photos, and clear fonts in their design; the newly designed site incorporates these elements along with a rating system for users. During the user testing sessions after design iternations were made, users completed red routes more quickly.  Overall reported satisfaction with the site increased.  The new design is more accessible and easier to navigate for visitors to the city.


Key Tools and Deliverables



view the low fidelity prototype HERE

view the high fidelity prototype HERE


Challenges & Iterations

The new prototype was designed without full consideration regarding whether the third party API could be implemented as desired.  Therefore, some of the elements users liked may not be translatable to a a coded prototype.  Once a coded protype is attempted, it may be necessary to re-iterate on how the 3rd party API’s are used.  This may call for a change in webpage design, which would again need to be tested with users.