Suzanne Ankerbrand: Portfolio

PORTFOLIO

Conceptual sketch for the Software Release Dashboard. The purpose of the Dashboard is to display the releases assigned to the user, show pending actions as well as provide search functionality.

Conceptual sketch for the Dashboard displaying the details of one release, where it is in the process and who has completed what step.

Screenshot from the Axure prototype of the initial view of the Dashboard. The page includes: an alert if the user has a pending action, a list of releases in which they have a role; a search feature. The user can expand each release in the list to view additional details.

Continuation from the previous view: the user has expanded the view for release #12345. The expanded row gives the user a quick overview of status in a Gantt chart.

Screenshot from the prototype of the search results. User has searched for "Sales App."

Screenshot from the Axure prototype of the details for one release. This view includes a gantt style graph for an easy visual reference of status; below the graphs are the details of what has been completed for the release and when, and what still needs to be completed.

Example of an email a user will receive from the system. In this case, the user has been assigned a role in a release.

Conceptual sketch for the Software Release Dashboard. The purpose of the Dashboard is to display the releases assigned to the user, show pending actions as well as provide search functionality.

Conceptual sketch for the Dashboard displaying the details of one release, where it is in the process and who has completed what step.

Continuation from the previous view: the user has expanded the view for release #12345. The expanded row gives the user a quick overview of status in a Gantt chart.

Screenshot from the prototype of the search results. User has searched for "Sales App."

Example of an email a user will receive from the system. In this case, the user has been assigned a role in a release.

Software Release Dashboard

Redesign of a system that controls, tracks, and manages movement of software into production.

of Selected Projects

Project 5

Journey Maps

Created for the Social Security Administration (SSA), these journey maps depict two different visual representations of a user’s possible interaction with the agency.

More about these projects...

Project 3

UX Guerilla Lab

For the redesign of a human resources intranet website, research was conducted in an agile-like fashion via a Guerilla UX Lab.

More about this project...

Project 4

Insurance Product Interface

Project for past employer, Fidelity & Guaranty Life (FGL), to redesign the interface that displayed product information to agents on the FGL agent portal site.

More about this project...

Screenshot of the old, outdated agent portal homepage before the redesign. The page suffered from serious content sprawl.

The new interface was designed in Photoshop. Visio was used to label and describe sections of the new page as well as functionality.

Screenshot of the newly designed and deployed Agent portal homepage.

Screenshot of the old, outdated agent portal homepage before the redesign. The page suffered from serious content sprawl.

The new interface was designed in Photoshop. Visio was used to label and describe sections of the new page as well as functionality.

Screenshot of the newly designed and deployed Agent portal homepage.

Project 7

FG Life Agent Portal Homepage Revamp

Redesigned homepage for the FG Life (Fidelity & Guaranty Life) agent portal, SalesLink, which provides marketing resources and business details to agents.

More about this project...

FG Life Agent Portal Redesign (Prototype)

This project was another phase of the FG Life Product Information Interface redesign (see Project 5). This phase involved incorporating the product information interface into a product portal where agents could find and search for types of products.

More about this project...

Project 6

As part of the redesign of the agent portal, a new product area was designed. This initial view presented all products to the user.

The redesign included a new "shopping cart" where agents could order or download marketing materials.

Users can easily view (and download) marketing materials for each product.

Want to see more? You can browse through the entire 80-page prototype! The link is provided on the project page.

As part of the redesign of the agent portal, a new product area was designed. This initial view presented all products to the user.

The redesign included a new "shopping cart" where agents could order or download marketing materials.

Users can easily view (and download) marketing materials for each product.

Want to see more? You can browse through the entire 80-page prototype! The link is provided on the project page.

Project 2

Software Release Interface: Phase 3

Project 2 is another phase of the Software Release Interface featured in Project 1. (The entire release system involved 5 different stages.)

More about this project...

Conceptual sketch of phase 3 of the software release process. The first step is for the analyst(s) to upload requirements and design documents. The steps in the process are:
1. Upload design/requirements documents
2. Lead analyst certifies (reviews) the design/requirements documents
3. The Project Manager then reviews and approves the release for the next step, development.

This initial view presents the "Add File" button as the first step in the process.

Conceptual sketch depicting that a file has been uploaded. A table displays the name of the file uploaded, the file type, file name, and who uploaded it. The analyst can chose to add another file or submit the documents for approval.

Conceptual sketch depicting the view when 2 files have been uploaded by the analyst. Again, the analyst can chose to add another file or submit the documents for approval.

Conceptual sketch depicting the view when the lead analyst certifies the documentation that were uploaded. If the person certifying is not the lead analyst, Only 2 approved roles can certify the documentation. The lead analyst or another person the lead analyst has pre-designated in the release to act on their behalf.

Conceptual sketch depicting the view when the Project Manager reviews and approves the release for the next step, development. At this point, phase 3 of the release process has been completed.

Screenshot from the Axure prototype of the initial view of the requirements phase. The first step is for the analyst(s) to upload requirements and design documents. The table below the tabs lists the steps in the Requirements/Design phase, who is responsible for completing those steps, and the current status of each step.

In this scenario, the release has two parts: a database (back-end) release and a Web/app (front-end) release

Screenshot from the Axure prototype of the dialog window that pops-up for uploading a requirements or design document.

Screenshot from the Axure prototype depicting that one file has been uploaded for requirements/design documentation

Screenshot from the Axure prototype depicting that the release is now ready to be Certified (reviewed) by the lead analyst.

Screenshot from the Axure prototype depicting that the release has been approved by the project manager. The next phase of the release process, Development, can now begin. The table depicting the steps for the Requirements/Design phase now shows that all steps in this phase has been completed.

Conceptual sketch depicting the view when 2 files have been uploaded by the analyst. Again, the analyst can chose to add another file or submit the documents for approval.

Conceptual sketch depicting the view when the Project Manager reviews and approves the release for the next step, development. At this point, phase 3 of the release process has been completed.

Screenshot from the Axure prototype of the dialog window that pops-up for uploading a requirements or design document.

Screenshot from the Axure prototype depicting that one file has been uploaded for requirements/design documentation

Screenshot from the Axure prototype depicting that the release is now ready to be Certified (reviewed) by the lead analyst.

For the Customer Engagement Map, affinity diagrams were created on white boards to flush out the touch points and details of the journey for 2 personas. This is the sketch for the external user, Hilda.

An affinity diagram was also created on white boards for the second persona, Miguel, the SSA field office representative.

Additional details of the journey and touch points were worked out on paper, bringing the journey of the 2 personas into one view.

After rough sketches and affinity diagrams, a more refined sketch was created to compose ideas for layout and design.

Voila! The completed Customer Engagement Journey Map depicting the journeys of Hilda and Miguel as they use assorted technologies and touch points to resolve the problem.

Map #2: The Beneficiary Journey Map was created for the CIO of the Social Security Administration. It depicts a (very) high level view of how an individual can possibly interact with the agency over the course of a lifetime.

An affinity diagram was also created on white boards for the second persona, Miguel, the SSA field office representative.

Additional details of the journey and touch points were worked out on paper, bringing the journey of the 2 personas into one view.

After rough sketches and affinity diagrams, a more refined sketch was created to compose ideas for layout and design.

Voila! The completed Customer Engagement Journey Map depicting the journeys of Hilda and Miguel as they use assorted technologies and touch points to resolve the problem.

Here I am drumming up volunteers for the UX Guerrilla Lab. Signs and props (and candy) were used to grab the attention of the people as they walked by.

In addition to signs, and balloons, other props were used at attention getters. Books were used to encourage people to "tell their story."

One of the activities of the lab was a quick survey in which visitors told us common reasons they visit the human resources websites and what pages they use more often.

A volunteer shares his story with me at the "tell us a story" station.

A team member works with a volunteer at the card picking station. For this activity, names of common human resources functions were printed on cards. Users selected those items they wanted to see on a human resources landing page.

Here I am drumming up volunteers for the UX Guerrilla Lab. Signs and props (and candy) were used to grab the attention of the people as they walked by.

In addition to signs, and balloons, other props were used at attention getters. Books were used to encourage people to "tell their story."

One of the activities of the lab was a quick survey in which visitors told us common reasons they visit the human resources websites and what pages they use more often.

A volunteer shares his story with me at the "tell us a story" station.

One of the conceptual model sketches I created for the product landing page.

Interface design for the product landing page created in Photoshop. Due to the wide variety of content associated to one product, a modal window with tabs was used to display various product information.

Another view of the interface design. In this view, the product modal window is displaying sales materials associated to the selected product.

A third view of the product interface design. In this view, the availability of the product is displayed in an interactive map.

One of the conceptual model sketches I created for the product landing page.

Another view of the interface design. In this view, the product modal window is displaying sales materials associated to the selected product.

A third view of the product interface design. In this view, the availability of the product is displayed in an interactive map.

"New Business" Interface for FG Life Agents

The New Business section of the FG Life (Fidelity & Guaranty Life) agent portal allows agents to view new insurance business they’ve submitted as well as status of sold policies.

More about this project...

Project 8

Concept created on a white board for the agent “new business” interface. The “new business” area displays policies that agents have sold and the status of each policy. Agents can also run reports for business they’ve sold.

The white board sketch was then flushed out in greater detail on paper.

The "new business" sketches were brought to life in an Axure prototype.

Because of the many available views in the "new business" interface, modal windows were used to display multiple levels of content.

The white board sketch was then flushed out in greater detail on paper.

The "new business" sketches were brought to life in an Axure prototype.

Because of the many available views in the "new business" interface, modal windows were used to display multiple levels of content.

Project 9

Case Study: Wayfinding Application

Project completed for a 6-day user experience bootcamp at Rutgers University. The goal of the project was to design an application that would allow students to quickly find and reach their on-campus destination.

More about this project...