0

SIG Web Application - Definition and Design Phase

Converting the Standardized Information Gathering (SIG) questionnaire from MS Excel to a new web application.

The Santa Fe Group

SIG Web Application - Definition and Design Phase 

June 9, 2017

Hello Christine,

Thank you again for considering Openfield Creative for this exciting project. We are pleased to submit our proposal for the SIG Web Application project.

On the following pages, we have outlined our process for discovery and validation-based design. Our approach will surface the tacit needs of stakeholders and users alike, making them explicit and actionable for subsequent design and development. This nimble, user-centric design approach sets us apart because we can pivot on priorities and executional strategy as we assimilate with your stakeholder and user preferences and challenges.

The result will be exceptional, and thoroughly documented, design and functional requirements for building an online experience that is robust, secure and intuitive for end users.

Please feel free to follow-up with additional questions or requests for clarification. We would welcome the opportunity to talk through the document with you.

Sincerely,

Adam Sonnett D. Scott Frondorf
VP User Experience SVP Strategy
513.376.3726 513.632.3373

Table of Contents

Section 1 - Executive Summary

Section 2 - Success Criteria

Section 3 - Project Overview

Section 4 - Project Scope and Deliverables

Section 5 - Suggested Deliverables

Section 6 - Work Examples

Executive Summary

The Santa Fe Group (SFG) wants to take the current Standardized Information Gathering (SIG) questionnaire online by converting it from MS Excel to a new web application. Openfield Creative (OFC) will research and design an online experience that is robust, secure and intuitive for end users.

Success Criteria

OFC has reviewed the success criteria for the SIG Web Application Definition and Design Phase and are confident that OFC is ideally-suited for the project. Not only are we capable, but we have the capacity and — perhaps most important — the desire to exceed your expectations. How we align with your factors is described below.

The design is user-friendly, intuitive, and easy to navigate.
We produce consistent, efficient and intuitive user experiences that deftly balance the pragmatic (UX function) with the nuance of great design (UI form). This combination of science and art is one among many factors that set us apart from the competition.

Current users of the MS Excel spreadsheet can transition easily to the online application.
We believe that the burden of transition should not be placed on your users. Our goal will be to make the upgrade seamless and fast, leaving no doubt in the user’s mind that this is the right move for them.

The design is clean, simple, and visually consistent with SFG/SA brand guidelines and is ADA compliant.
We are experts at interpreting and applying brand tenets across the experiences that we create. ADA compliance is now table stakes for modern web experiences.

The process for updating and maintaining website content is straight-forward for SFG administrators and content creators.
Leading CMS systems are designed with the understanding that site administrators and content creators are not web developers. Updates to content should not require support tickets with your design/development partner.

The web application design and planned architecture is based upon proven and accepted secure website development standards while maintaining flexibility to grow and add new functionality over time with minimal cost.
We advocate and plan for low-cost, incremental approaches over expensive step-function changes.

We anticipate future web standards by staying current with best practices, understanding the boundaries and edges of standards, managing constraints and creating a design/functional context to enable evolution over time.

The web application is designed to capture appropriate analytical data informing future improvements and other aspects of SFG/SA work.
Evidence-based insights are essential for decision-making about tactical improvements or strategic roadmaps. Tracking how a website is used daily is a natural extension of the user-testing and validation we employ during design and development.

Project Overview 

We Understand the Present
As demonstrated by the SFG RFP, our clients often approach us with specific business problems they are trying to solve. They often have a high-level vision of the solution required. To develop a thoughtful and well-considered response, we first convert that vision into a diagram. This becomes a strawman (shown below) that helps us understand and size-up the effort required.

We Understand the Present
As demonstrated by the SFG RFP, our clients often approach us with specific business problems they are trying to solve. They often have a high-level vision of the solution required. To develop a thoughtful and well-considered response, we first convert that vision into a diagram. This becomes a strawman (shown below) that helps us understand and size-up the effort required.

This approach first requires a discovery phase that can inform subsequent design and development phases. In the discovery phase, we imagine the problem from all angles, developing personas and corresponding use cases to create a comprehensive ecosystem view. Understanding the intersection of your business goals and end user needs is essential. By building this context, we can clarify the components required to build the solution and work with you to determine their order and priority. This will allows us to generate insights and options throughout the process as well.

Think of this as our commitment to future-proof your investment. It does not require building every item depicted right away, but it does ensure that what is built today is done to accommodate a bigger vision. And at this stage, the cost to consider, design and build a foundation for that future state is substantially less than the cost of any rework that might be required later.

Estimated Cost to Redesign the SIG
Our estimate for the redesign is captured in two phases.

Phase 1: Discovery and Research
Budgetary commitment in the range of $20,000

Phase 2: UX/UI Design and Validation
Budgetary commitment in the range of $150,000 to $190,000

Project Total - $170,000 to $210,000

Project Scope & Deliverables
Our process and methodologies achieve project objectives by being informed by meaningful user understanding. As we move through the different project phases, many familiar artifacts of web application design are employed and produced.

Phases/Project Timeline
In order to meet the required end of 2017 launch timeline as stated in the RFP, we will seek to hold a kickoff meeting as soon as possible following award (first week of August, 2017):

Kickoff, Discovery and Research: July 31–August 18
UX/UI Design and Validation: August 28–November 10

UX Process & Approach
Our methodology organizes the activities necessary to successfully achieve project deliverables into defined periods of time. We follow a repeatable, scalable pattern that is designed to focus each pillar of the project team — client, design and development — on project priorities that are managed throughout the life of the project. Early activities would be focused on the development of planning tools such as sitemaps and wireframes, and the creation of working prototypes.

These tools can be used by key stakeholders to assess progress, evaluate options and redirect focus when necessary. They can also be used to facilitate user testing with a panel of end users to further validate workflow assumptions and UX conventions.

Project Scope and Deliverables

OFC will provide full UX design services to deliver a redesigned, user-centric experience for the SIG web application.

Consistent Web Design
Design, from early conceptual variations through final approved designs, will follow mobile-first/responsive best practices with multiple breakpoints for screen sizes including smartphone, tablet, and desktop/wide desktop. Although, smartphones are not a part of the initial release, we will ensure our designs will be able to scale for any future improvements.

Design from each stage of creative development will be presented, including:

  • Conceptual design explorations
  • Iterations and refinement
  • Final approved design templates

Design Overview
Our expertise in understanding complex systems and applying an ecosystem approach to wrangle them into forward-thinking solutions is our greatest differentiator. For our clients complexity can take many forms, and as a result, we are experienced with the challenges of creating cohesive systems from disparate parts.

  • User Interface Constraints — The SIG user interface will be designed according to industry best practices, UI standards, and SFG branding.
  • Usability and Learnability — In order to ensure usability, OFC/SFG will ask that customers participate in usability reviews throughout the development of the SIG. Selected partners may also be asked to participate in usability studies. If the SIG is not developed with end-user validation, the platform could prove too difficult to use for the average user.
  • Documentation — The SIG web app should include on-demand, online help as well as a user guide. In addition, the SIG web app may include videos and other helpful documentation. We will also thoroughly document our code as part of the development process.
  • Interoperability — All exported data and reports should be formatted using interoperability standards so that the data can be easily imported to and exported from Excel (and other formats to be defined later.)
  • International — Anticipating global usage, we will approach design and development in such a way that the SIG web app can be easily translated and sold in foreign countries including, but not limited to, Europe, Latin America, Asia, and the Middle East.
  • Accessibility — The SIG must meet or exceed ADA compliance guidelines and take advantage of accessibility features built into modern web browsers.

ADA Compliance
The Web is an important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities.

OFC’s UX designers are well versed in web accessibility standards and are engaged in regular activities to stay current in the field of accessibility. We attend weekly meetings with other experts on an accessibility board at Macmillan Learning, where we network with other subject matter experts to discuss accessibility best practices, and represent UX for Macmillan Learning.

During the development phase for Macmillan Learning’s Enterprise level software suite, we partner with Tech For All to test compliance.

Design Process
We work in a continuous state of collaboration with our clients to review and iterate upon the deliverables of each sprint. This allows us to quickly identify the ideas that are working so we can focus our efforts on further development and refinement in future sprints.

Suggested Deliverables

 

Requirement Comment Link
Competitive Insights An integral part of our process, our deliverable will be a high level report out to the product team. These competitive insights, along with those from key stakeholders, will lay the proper foundation to begin the design phase. Example Insights
The above example was scrubbed of all client reference and sensitive data. This is not the full report, but are able to share a few select screens with you.
Two (2) to three (3) visual design concepts rendered on three (3) main pages Our process allows us to move quickly into design execution and iteration. Primary pages and elements, such as those requested, will be delivered as key deliverables.

We work in a continuous state of collaboration with our clients to review and iterate upon the deliverables. This allows us to identify the ideas that are working so we can focus our efforts on further development and refinement. We foresee this process allowing for a minimum of two design rounds. In practice, the process typically allows us to work out design decisions in such a way that traditional rounds aren’t necessary —we are able to isolate the big ideas, and iterate on them as we refine the details as a future sprint deliverable.
Example Designs
Wireframes Low, medium, or high fidelity wireframes will be created based on the stage of the design process. Types included hand-drawn, whiteboarding, flat, and interactive. We utilize many tools including InVision, Axure, and HTML.

Macmillan Learning: iClicker Reef app

PCA: Interactive Wireframes

P: clickable

Content Design Strategy and Requirements We help our clients imagine and create new features and content that push through the noise. Modern digital touch points must, in real-time, deliver the right content and insights to customers in a well-designed, easy-to-consume form.

See Example

U: SFG_RFP
P: SIG_Proposal

Requirement

Comment

Link

Competitive Insights

An integral part of our process, our deliverable will be a high level report out to the product team. These competitive insights, along with those from key stakeholders, will lay the proper foundation to begin the design phase.

Example Insights

 

The above example was scrubbed of all client reference and sensitive data. This is not the full report, but are able to share a few select screens with you.

Two (2) to three (3) visual design concepts rendered on three (3) main pages

Our process allows us to move quickly into design execution and iteration. Primary pages and elements, such as those requested, will be delivered as key deliverables.

We work in a continuous state of collaboration with our clients to review and iterate upon the deliverables. This allows us to identify the ideas that are working so we can focus our efforts on further development and refinement. We foresee this process allowing for a minimum of two design rounds. In practice, the process typically allows us to work out design decisions in such a way that traditional rounds aren’t necessary —we are able to isolate the big ideas, and iterate on them as we refine the details as a future sprint deliverable.

Example Designs

Wireframes

Low, medium, or high fidelity wireframes will be created based on the stage of the design process. Types included hand-drawn, whiteboarding, flat, and interactive. We utilize many tools including InVision, Axure, and HTML.

Macmillan Learning: iClicker Reef app

PCA: Interactive

Wireframes

 

P: clickable

Content Design Strategy and Requirements

We help our clients imagine and create new features and content that push through the noise. Modern digital touch points must, in real-time, deliver the right content and insights to customers in a well-designed, easy-to-consume form.

See Example

 

U: SFG_RFP
P: SIG_Proposal

 

 

Information Architecture

We excel at communicating complex ideas in clear terms. We drive the creation and communication of structures and relationships of systems, content and design.

 

 

See Example

 

U: SFG_RFP
P: SIG_Proposal

Functional Requirements

We partner with our clients to create requirements to wireframe, validate, and design around stories. We meet regularly to review the screens, ask questions, and raise flags that may affect feasibility. At times, after review, changes to requirements are necessary.

See Example

 

U: SFG_RFP
P: SIG_Proposal

Technical Framework

Another key OFC differentiator is our documentation. Development and, later, maintenance, should not require guesswork about the information architecture, design intent, content requirements, front-end code or other specifications.

 

At the start of the project, we will create an online guide that becomes the repository for everything associated with the project starting with this proposal.

See Example

 

U: SFG_RFP
P: SIG_Proposal

Browser Support/Cross Browser Compatibility/Legacy Browser Support

OFC will test for functionality and performance across the most common used browsers (Chrome, Safari, Firefox, Internet Explorer) using a variety of common devices (desktop, tablet, phone) and operating systems (Windows, Mac OS).

N/A

Security protocols including Encryption

OFC adheres to best practices around cryptographic protocols (SSL), and use a third-party (Veracode) for audits to reduce risk.

N/A

Hosting Services

Hosting is a cloud-based brokered service. OFC will gather quotes and present the best options back to the SFG based on the project requirements.

For current clients we use Amazon Web Services (AWS), Azure, and Rackspace.

N/A

CMS

Our preferred back-end environment, which we routinely recommend and implement, is the Umbraco content management system within an ASP.NET environment. We will, however, research across the CMS landscape to ensure the criteria for the SIG is met and recommend the platform that best complements those needs.

N/A

Analytics

We will assemble a suite of tools to help us observe how people use the site. Collecting different data points across SEO measurements and behavioral analytics will allow us to make informed recommendations for iterative enhancements and changes. The site will then be measured after changes are made, comparing the new data to the baseline to understand how the site metrics were affected (positive, negative or neutral).

N/A

Usability Testing and Summary Report

We are very comfortable and have extensive experience conducting user tests that are done via remote screen sharing.

 

We propose conducting 1-on-1 interviews (via a remote screen sharing session), each of which will include a usability test where the participant is asked to perform specific tasks using a clickable prototype. Testing will be conducted prior to initiating development.

iClicker Reef Usability Testing Case Study