Website User Interface (UI) Design

A project for FiXiT Foundation

Success!
Project completed on

Pro Bono Time

35–50 hours
over 3 months

Details

FiXiT launched our GetYourFix.org web site a year ago. We utilized a template design and mapped out the structure on our own. In the last year, we have had over 6500 people register on the site and currently 20 new profiles are posted daily for families and pets in need. We have established that there is a need for this program and that people are interested in it. Now - we need to take it to the next level with a more professional structure and design.

There are three primary objectives:

- Improve the overall flow of how information is presented and people are drawn into the site.

- Improve the experience for Funders/Sponsors so more possible funders will sign up, fund fixes, and come back to fund more.

- Improve the registration process for all parties - Owners, Funders, Clinics, etc.

Description

Whether your organization requires a simple website to share information or a more complex website to interact with your audience, user interface design is an important part of the website design process. This project will bring on a professional with expertise in developing audience profiles, organizing content, and designing website user interfaces. The professional will build site maps, wireframes and flowcharts to help an organization articulate its website re/design mission and goals prior to visual design and construction of the site.

Deliverables

  • A site map of the website’s content taxonomy and structure
  • Up to 10 (or an agreed upon number of) wireframes, which may include the homepage, content navigation pages, and content presentation templates, focusing on the organization of the website’s content, key web elements and functionalities
  • Flowcharts and / or specifications for highly interactive features of the website
  • Descriptions of website audience / personas
  • Documentation of any constraints pertinent to later website visual design and development
  • Note: the deliverables do not include logo, color scheme, typographic style, or other visual design elements

    Project steps

    1. In preparation for the initial meeting, the organization completes and delivers the Project Brief to the professional for review.

    2. The professional and the organization conduct an initial meeting to discuss the Design Brief and the organization’s project expectations, intended uses and functionalities of the website, proposed content, typical users, key user behaviors and tasks.

    3. The organization provides the proposed content. The professional conducts a content inventory grouping and prioritizes the proposed content. (This can be as simple as a spreadsheet that contains each piece of content, content type indicator - static, dynamic, event, pdf, etc. -, and available copy of the proposed content.)

    4. The professional creates a draft site map.

    5. The professional and the organization review the site map and make necessary modifications. From there, the professional and organization will determine which pages/template pages will become wireframes and the total number of wireframes.

    6. The professional creates the wireframes and goes through 2-3 rounds of review with the organization. In this process, the organization and the professional focus on the new website’s key functionalities, user interface flows, and content organization.

    7. The professional finalizes the wireframes, and documents the user interface flow in a user flowchart along with any specifications for visual designers and developers.

    8. The organization and the professional review the deliverables together and wrap up the project.

    Prerequisites

    Professional

    • At least 3 years experience in information architecture, information system design, UI/UX design
    • Experience in creating site maps, wireframes and user flowcharts
    • Experience in / understanding of the process for creating personas
    • Ability to communicate in writing the design specifications for website visual design and development

    Organization

    • A Project Brief completed prior to the initial meeting to articulate the organization’s needs, major functionalities of the website, typical users, key user behaviors and tasks, and project expectations
    • Ability to communicate any specific software requirements and design requirements
    • Ability to provide all proposed content for the website

    No one has asked a question yet.

    Recently completed