A search mobile application to help users find local businesses.
Yellow Pages Directory Service Mobile Application

This project was to create a mobile-first, user-centered business search platform application for Apple and Android devices.

Client

Original Yellow Pages Directory Services

My Role

I was involved in every phase of the software development life cycle (SDLC) for this application, from the initial data gathering during the discovery phase through to user testing and performing bug fixes upon launch.

I was responsible for user discovery and requirements synthesis, creation of wireframes and prototypes, and implementing the design in CFML/HTML/CSS/JavaScript.

UI
UX
Wireframes
Application Design
Mobile Development

Discovery

Initial research involved competition analysis and generating a list of potential desired features missing from the competition. This data was gathered through feedback from users and current customers. I also conducted a small scale end user survey via Google Forms to determine a list of nice-to-have features users might expect or want.

I used feature card sorting rankings determined from both the stakeholder survey and end user survey to generate personas for both their client base and end users. A user ‘search flow’ and site page-flow artifact was developed outlining different search scenarios within the application.

Low Fidelity Index Card Wireframes

popup image
popup image

At this point I was ready to literally put pencil to paper and begin creating hand drawn low-fi design comps on 3 x 5 index cards. Through a series of internal reviews and brainstorming sessions with company stakeholders, the design comps were iterated upon and refined further.

The use of the index cards created a different type of testing with the hands on nature being much more visceral.

Medium Fidelity Wireframes

With a well defined direction chosen through the refinement of the hand drawn prototypes it was time to bring the layouts into the digital realm. The low-fi wireframes were translated into medium-fi digital mockups in Adobe XD. This allowed for the creation of a clickable interactive prototype for use in qualitative user testing.

I completed the prototype and user testing could commence. The prototype was testing with a number of users from different demographics both internally and externally.

The feedback from the initial round of user testing was invaluable in helping to focus in on the needs of the user and balance that with business needs and requirements.

Medium Fidelity Wireframes

Once the prototypes were fine tuned the stakeholders were ready to move on to fleshing out more of the design elements. High resolution mock ups were created adding in fonts, color, iconography and placeholder imagery.

These mock ups were also put through a round of prototype testing. This round of testing was to ensure the user experience was still consistent with previous tests after color and detail were added. Throughout the project the goal was to ensure that the business needs as well as the usability goals were met. At this point, some features were stripped due to budgetary constraints.

The concept of the development of a native application for each platform was dropped in favor of a web view application.

Another round of user testing followed the conversion of the prototypes from medium to high fidelity. Additional refinements were made.

Dev Hand-off

Once the final mock ups were approved for development, I created the application using Cold Fusion/RAILO/CF Wheels and HTML/CSS and JQuery. The high resolution comps served as a style guide and design system for all of the UI interface components during development.

Once the application was complete, a final round of internal testing was done before launch. There were some additional optimizations made based on these tests concerning the suggestion engine. These tests were performed against key performance indicators created during the competitive analysis. A third party was contracted to perform an accessibility evaluation. Some stylistic traits were tweaked and fine tuned and also screen reader tags were added to assist users requiring screen readers.

As a continuing effort after launch, IIS search logs are analyzed to keep up to date on user behavior and identify hurdles and roadblocks.

Final Layouts

Next Project
A more tidy way to present multiple filters on a page
Advanced Filtering Concept