UX Case Studies

Neudesic: HOA and Vendor Management

  1. Background & Description
  2. Techniques, Tools & Technologies
  3. Screen Captures

Background & Description

The purpose of this product was to enable HOAs to produce RFPs for services needed (e.g. snow removal, landscaping, pest control) and to enable vendors to bid upon these RFPs. The first phase of the product's development, documented here, involved a registration process for the vendor users and a set of tools for account management.

The user stories were written in advance of my involvement, so I initially reviewed the stories to get a high-level view of the product being built. Story questions and some rough ideas for the information architecture also came out of this activity. There was no documentation on who would be using the product (outside of the role names in the stories), so I worked with the PO to put some definition around the roles ( p1-role-definition.pdf, 94 KB).

The next task was to design the navigation model for the vendor registration process. I represented it as a diagram ( p1-navigation-model.png, 165 KB) to keep conversation from going too far down into design details that would be worked out during design sprints. The PO as well as engineers participated in this activity.

The team was working in two week sprints, and I ran the design a sprint ahead of the engineers to ensure the design was fully explored and defined by the time it was needed. During each sprint, I conducted the following activities:

  1. Identified and refined the user stories with the PO (elaborated on the content and added CoA).
  2. Interaction and visual design to produce wireframes (using Keynote) and prototypes (using HTML, CSS, and Bootstrap).
  3. Reviewed the resulting design with the team and made appropriate changes based upon the feedback.
  4. Documented the design ( p1-sample-design-doc.pdf, 1.7 MB).
  5. Produced the front-end assets needed by the engineers (images, HTML, CSS, and Javascript).

Some challenges on this project: it took a few sprints to come up with the right approach to the UI documentation; wanting to strike a balance between keeping it light and containing sufficient detail. Two week sprints presented a time challenge since I was responsible for producing the front-end assets. Lack of time also meant that we had to table usability testing to a future phase of the project.

Techniques, Tools & Technologies

Techniques Tools Technologies
  • Storytelling
  • Role Definition
  • Information Architecture
  • Wireframing
  • Interaction Design
  • Visual Design
  • Design Implementation
  • Design Documentation
  • The Omni Group Omnigraffle
  • Apple Keynote
  • Panic Coda
  • Adobe Photoshop
  • Adobe Illustrator
  • Microsoft Word
  • Bootstrap
  • Less
  • jQuery

Screen Captures

img/p1-landing-page.png img/p1-reg-step-1.png img/p1-reg-step-2.png img/p1-reg-step-3.png img/p1-user-admin.png img/p1-new-user.png img/p1-edit-user.png img/p1-delete-user.png img/p1-marketing-assets.png img/p1-service-locations.png