MY PROCESS
STAKEHOLDER INTERVIEWS
Stakeholder Interviews allows me, the Designer to meet directly with the direct owner of the project. Aside from hearing directly what the owner wished to achieve, it exposes the Designer to the very subtle, but very impactive, nuances of desires and concerns. These include exceptional excitement or exceptional worries.
Deliverable
The primary deliverable for this phase of the project is to insure that all the requirements of the owner are clear, concise and documented. This phase is used specifically by the Designer to ask any questions they may need clarification on. This also allows the Designer to hear exactly what the PM hears, eliminating misunderstandings and the hours of communication that follow to clear things up.
USER RESEARCH & PERSONA CREATION
The research phase begins with conducting interviews or workshopping with the team to determine the problem trying to be solved, KPIs, the target market, brand values and much more. This phase provides the Designer the time needed to truly identify the Target Audience that the current project will be created for.
Like the StakeHolder Interviews, this phase allows the Designer to hear directly from the Users what their Requirements and expectations are. This information allows the Designer the chance to begin a Competitive Analysis of other sites that are favored by the users in order to understand more clearly the User's expectations.
Knowing all this, the Designer can begin working with Usability in order to create Personas. These are fictitious individuals on paper that are created to reflect the needs of the most Users, and/or the most common functions or needs.
Deliverable
The primary and secondary deliverables for this phase of the project are the same as the StakeHolder Interviews.
The tertiary deliverable is the creation of Personas.
REALITY MAPPING & PROCESS EVALUATION
Reality Mapping Sessions (Brainstorming) are a group of activity that allows Design and Development to get together with the Users of the project to identify the User's actual workflow process as well as capture suggestions that they may have.
Having direct User involvement provides real world information and insight that Dev, Design and PMs may not have as to what really is happening, and what really should.
This phase is the most influential of all the phases in assuring the project will meet the User's needs and expectations. Without direct User involvement, all solution will only be theoretical.
Deliverable
Reality Maps for both the general, overall workflow as well as all the most commonly executed actions of the project.
INFORMATION & EXPERIENCE ARCHITECTURE
This phase is used to architect the new Process Flows that will support all of the StakeHolder and User requirements. Flow Charts help visualize the entire process.
The Information Architecture maps or Site maps can include any level of detail, from indication simple sequential screen flows to something as complex as showing front end, back end, User, support, technology and communications in a single Map. Site maps are useful for showing every single page on a site but can tend to get complex.
Deliverable
End deliverables for this phase should be paper maps that illustrate all the process flows that need to be validated for approval from Users, StakeHolders, Designers and Developers.
WIREFRAME CREATION AND TESTING
The design phase often begins with paper sketches to get the ideas out on paper. From here, WireFraming begins: the fidelity of wireframes varies from project to project. WireFrames are generally black and white line drawings that depict at a very basic level how the User workflow, as defined by the design mapping and Information Architecture phase will be laid out and function in the environment that the project will reside in.
Because there are no colors, sizes, specific placements or extraneous elements, the WireFrame allows everyone to focus purely on Work flows and the human interactions with them to achieve the optimal solution.
Deliverable
WireFrames that depict how the new process flow will fit into, and work within the environment it will be placed into. Final WireFrames can be at various levels of detail: this will be dependent on the specific needs of the entire team working on the project.
There are many ways to do testing, I find usability testing is the easiest way to understand how real users experience a product. This can be done moderated or unmoderated. It is best to give users a few tasks to complete followed up with a survey on their experience.
A/B testing is ideal when struggling to choose between two competing elements or trying to detect small differences in design.
An A/B test was conducted to determine which Area view users preferred. The hypothesis was users would prefer the version with overview of two separate Areas.
The Results
The results revealed a 100% of users preferred the two separate Areas overview.
Conclusion
With a clear winner, the decision was made to use the variant design. Users preferred the two separate Areas overview for a more simplified and clean look. The addition of larger icons allowed users to clearly differentiate the separate Areas.
VISUAL DESIGN & MOCKUP CREATION
This is the phase where I focus on what the product will actually look like. Visual Design is the process where the Designer layouts the approved wireframes with a look and feel that either adheres to a pre-defined set of style guidelines, or creates a new look and feel that adheres and supports the Brand Platform and Strategy of the project's primary StakeHolder. This may be the company's Branding, Partner Branding or co-branded projects. This is when the design library will begin to grow with components. As the UI of the product comes to life, I create a clickable prototype if it has not already been done. These visual mockups are then used to test the Design with Users as well as providing the closest visual possible to what the end product will actually look like when completed.
Deliverable
Visual Mockups are generally flat .PNG or .JPG files, Sketch created pages or a clickable prototype. All of these deliverables visually display the most important functions, interactions and flows for the project. They should portray enough information and interactions to be able to use for presentations and approvals. Selected output of Mockups will be determined by the Designer and the project's timeline.
DESIGN SPECIFICATIONS
Design Specifications are the final deliverables that design provides to Development. These document specific pixel sizes, hex color, widget behaviors, roll over effects and everything else that is needed to build the project to meet exactly the approved Design. Time permitting, a design system of the visual language can be developed using Sketch, Invision or AdobeXD.
Specifications are made at a level that eliminates the need for Development to contact Design with questions about any identified functionality (but should always contact them before adding any new functionality going into the Design).
Deliverable
Design Specifications are most often in the form of a PDF file, or other easily printable format. The final product is easy for others to access, read and use beside them as the project is actually being built.
DESIGN SUPPORT & POST LAUNCH
While it may appear that Design is complete at this point, it really begins the longest phase of Design:
Development Support. I am there to support my team with any answers that the Design Pattern Library does not provide and I begin reviewing built items in production to write UI bugs.
Design continues to work on the project helping assist with the countless design/performance/timeline trade offs that all projects have. Sometimes there are limitations and changing the design slightly solves the problems, sometimes it needs a heavy redesign to accommodate.
Design also makes use of this time by beginning to work with Project Management to begin identifying Phase II items. This allows both the PM and the Designer time to scope the resources and time needed for Phase II.
Deliverable
Continued Design support working close with Development. Pro-active User Interviews and Requirements Gathering for Phase II. Conduct potential Post-launch User Survey to solicit feedback about v1.0 and gather additional requirements for v2+.