From Project Inception to Post-Release Optimization

We design, build and operate digital services across the touch-point spectrum. From corporate websites and e-commerce platforms to mobile native apps and digital campaigns. We must support digital transformation that delivers great user experience.

In order to deliver the ultimate digital experience that transforms our perceptions, we should have a solid process behind the scene that helps us build the right experience for the right audience.

Let's have a real example for a process regarding how we build a web presentation/journey for an UI Toolkit product which has been designed specifically for Angular 2. Our role in this journey will be Web Project Manager.

Defining Your Project

The process should start with a (high level) project definition—an internal initiation of projects within your business organization. Some typical activities you might go through are:

Project definition (what & why). Stakeholders would define:

• business goal
• business justification

Discovery Phase: Brainstorming and Information-Gathering

Once there is an agreement with the business stakeholders on why we need it in first place (such as web presentation of product), we should take a deep dive into the exact business needs and objectives that we need to solve as part of this project. In other words, you are starting the discovery phase of the project. In the discovery phase, normally we should onboard more specialists from your organization, since it is crucial for the successful scoping of the project. It is a collaborative information-gathering process meant to dig deep into the details of what is important to a client's business, target audience and industry.

During this phase—consisting mainly of brainstorming sessions—the team works closely to analyze the existing journey and user experience. The team will dig into the business data and the analytics data to come up with insights and hypotheses about problems and possible solutions. Here are some common activities during this phase (these might vary depending on the project):

Within the business group (e.g. Product Marketing, Product Managers and you—the Web Project Manager) the following activities should be done:

• Agree on product positioning, product messaging and go-to-market strategy
• Perform competitor/market analysis
• Understand the product by having a product demo
• Define the customer journey
• Build a hypothesis that needs to be validated
• Build some draft content that tells the product story if possible
• Agree and finalize the Key Performance Indicators of the project that will measure the success of achieving the business objectives

Once there is a meaningful output, the group should be further extended by adding more specialists like: Project Management teams, Engineering teams, Digital Analytics experts, SEO experts, Content Writers and Personalization & Optimization specialists that could further dive into:

• Data analysis and insights on current website conversions and the customer journey
• SEO requirements and consulting
• Technical solution approach and consulting
• Plan user testing and validation of hypotheses
• Finalize project scope and timeline
• High level personalization and optimization strategy

Where the outcome in terms of deliverables would be:

• Detailed scope & business requirements of the project
• Final hypotheses and tactics to achieve project goals
• Draft content that combines all of the different perspectives

UI/UX Prototype Phase: Creating a Framework

All of the prerequisites above have to be prepared and ready for the UX/UI Prototypes & Requirements phase. You will create the whole framework and structure for the UI with which the final solution will be implemented. This is the phase where the prototypes undergo massive iterations, incorporating ideas and finalizing content.

Your teams will follow some main stages in order to deliver the project:

• Use cases, interactive workflows—engage with UX Designer
• Web journey (Google Analytics) relevant data export and insights—engage with UX Designer
• Information architecture—engage with UX Designer
• Wireframes of page templates & interactive prototypes—engage with UX Designer
• Early validation with end users—engage with Product Managers and Product Marketing Managers
• URL structure/internal linking verification/keywords—engage with SEO Expert
• Technical solution finalization (high level migration/release plan)—engage with Engineering Team Leads
• Estimates adjustment, planning and commitment of resources—engage with Engineering Team Leads
• Input for best conversion optimization practices—engage with Personalization & Optimization team

Once we have interactive prototypes we are able to have early validation with real end-users or customers. The engagement of everyone at this stage to review the prototypes is crucial for the success of the project. Typical activities include:

• Content iterations until we have the final content—engage with Stakeholders and Content Writers
• Review, iteration and approval of the prototypes—engage with Stakeholders

Deliverables:

• Interactive prototypes for main sections and functionalities
• Final content

Graphic Design Phase: Branding and the User Experience

Looks like we are ready to add some colors. Yes—this is the Graphic Design phase. The visual design is the process of imbuing the website’s interface with the brand’s strengths and visual language to best enhance the user experience. It converts the research and analysis, content and structure into an attractive, guiding and responsive experience for the users. On this phase additional input might be needed from the Product Marketing team in terms of providing product related visual materials like screenshots and videos that could be embedded into the design.

As an output from this phase, the Graphic Designer should provide:

• Graphic design concept

That should be shown and discussed with the whole group, and if needed, design iterations should be done afterward.

At the end of this phase you will deliver: Final Design concept, and if needed, production visual elements should be ready too.

Implementing the Design

Once the design concept is approved, wireframes and all business requirements enter into the Implementation team for production and the Implementation cycle. Programming transforms the wireframes and design into manageable webpages, modules and widgets in Sitefinity.

Engineering ensures the final quality and performance through extensive UI testing, and also applies automated testing for business critical workflows. Common activities for this phase are:

• Front-end and back-end development—by Engineering team
• Testing and bug fixing —by QA team
• Verify analytics tracking settings—by Analytics team
• Provide final KPIs dashboard and reporting—by Analytics and Reporting teams
• Implement a personalization strategy into the journey where appropriate—by Personalization & Optimization team

and Deliverables would be:

• Final fully functional solution on User Acceptance Testing environment with access to Sitefinity Content Management system
• KPIs data visualization dashboard

As we all know, KPIs vary by project, but here is a list of some typical and some more specific things you might want to measure for web projects:

• Pages per session for new organic users
  Question: Are users able to find content they will engage with?
• Ratio of new users to e.g."getting started" (new organic users to reach your main Call To Action)
  Question: Are users finding the main site CTA?
• Amount of time spent on the most important list of pages
  Question: Are the readability changes improving length of engagement?
• Ratio of users interacting with the navigation
  Question: e.g.Since the navigation location moved, are users finding this content?
• Bounce Rate for traffic originating from campaigns
  Question: Are we continuing to spend our money effectively?

Acceptance & Training Phase: Testing the Final Deliverable

Almost there—next we have to go through the Acceptance & Training phase. The fully-functional solution is delivered on the UAT environment for final review by you, the Web Project Manager, and UX. The UX team provides additional UI testing of the final deliverable. Stakeholders will run into typical activities as:

• Last content review and small updates
• Acceptance testing and final approval

The Engineering team will help with:

• Initial training of stakeholders
• Release on LIVE environment
• Providing documentation
• Ongoing training—should be done together with Web Project Manager

While the Personalization & Optimization team should help out with A/B tests and personalization tactics setup.

Deliverables:

• Final solution on LIVE environment
• Technical documentation
• Training

Optimization Phase: Monitor the KPIs

Here we go, the last stop of our journey is the Monitoring & Optimization phase. An ongoing monitoring of KPIs should be performed where:

• Launch user testing and validation activities on LIVE—by Web Project Manager
• Monitoring of KPIs dashboards—by Personalization & Optimization team, Web Project Manager and UX Designers
• Propose optimization initiatives—by Personalization & Optimization team, Web Project Manager and UX Designers
• Manage and execute iterative optimizations—by Personalization & Optimization team
• Continuous data collection and reporting—by Analytics team

In order to deliver:

• Reporting against the initial business objectives
• Lessons learned on the implemented web journey and future optimization suggestions
• Expert assessment report for future optimization activities

A Journey from Inception to Optimization

The journey from project INCEPTION to post-release OPTIMIZATION might look pretty strict, but it should differ from structure to structure. The main takeaways are:

• You should work collaboratively during the discovery phase, so everyone’s input is taken
• You should make sure that the correct KPIs are agreed upon, set and measured afterwards
• It's important to leave the expertise in the hands of the specialists
• Once your project is released you should continue to optimize it, and learn from the insights

Last but not least, digital transformation is an emerging trend and sometimes can overwhelm. Don’t let that stop you from starting the process and delivering the customer experience your users truly want.