Interface Design & Development

This is the implementation phase of the Product & UX Strategy. Essentially, this service will build upon the Product & UX Strategy report and transform the recommendations into a working digital product.

Process

Before we start

Every Interface Project starts with an “UX Assessment & Strategy,” or a similar strategy phase. The findings from this initial work, usually in the form os "user stories", will guide the interface design process. Our “UX Assessment & Strategy” also provides a Creative Direction and Visual Concept to guide the visual design.

Our Interface Design Approach

CCM Design's approach to interface design is unique based on the fact that we built dozens of those interfaces before.

We always use a component-based approach to frontend development. This gives us two advantages.

First, it is proven to be the best approach for interface development, resulting in more resilient and flexible interfaces, and providing better results in the multitude of screen sizes we have nowadays.

Second, it provides us the ability to start the development process as a parallel process to the design, where we can start working on multiple components at the very beginning of the projects, before the user flows and visual design are ready.

This approach essentially expands our timelines, making it possible for us to work with aggressive timelines when necessary.


Interface Wireframes & Mockups

Based on the Strategy, our web design team puts together the sitemap and wireframes for the different sections and pages of the website. This is done in the form of a Low Fidelity Interactive Mockup.

With the wireframes defined, our team designs sample pages for the website to guide the development of the prototype. In order to get a better sense of what we will build, our team will design a high-fidelity interactive mockup with all the relevant pages and templates for feedback and discussion.

Deliverables & Activities

  • Low fidelity interactive mockup;
  • High fidelity interactive mockup;
  • Feedback call for design tweaking; and
  • Sign-off on design deliverables.

Interface Prototype

With the low-fidelity mockup and the sample page mockups, we are ready to start building the interface prototype. This is when the interface begins to take shape in the form of frontend code, and we will be able to experience how the interface works on browsers and devices.

At this point, we have feedback rounds for design tweaks and proofreading. Although not encouraged at this point, larger design changes are possible, but they might require significant development time and affect the final delivery date.

Deliverables & Activities

Hard-coded interface prototype considered an alpha version.


Backend Development – CMS Integration

When a CMS Integration is necessary, its implementation happens in parallel with the “Interface Prototype” stage. At the Backend Development stage, we identify the sections and pages where the Aspen team would regularly update and connect them with a CMS. The specific CMS to be used will be subject to a decision made between CCM and the client. We usually work with a few CMS’s that could work for this case, as Directus, WordPress, Strapi, Contentful, to name a few.

In this case, we will define the ideal CMS based on the best UX for the people updating the content since this is a user- centered design, where the users are the Aspen Team.

Deliverables & Activities

A virtual meeting with the client team to discuss the CMS needs and the PROs and CONs of each option.


Interface Testing

With the prototype online, we encourage as much testing as possible and logging the feedback in a backlog for prioritization. Once the backlog reaches a critical mass of comments, the teams will assess their content and define a course of action.

Deliverables & Activities

Beta version of the interface. This is considered a “ready- for-launch” version of the website. The Publication PDF will be ready and could be uploaded to the platform for launch.


Full website Testing

With the Beta Version online, in theory, the project is ready for launch. Our team will run a full test on the website, checking each one of its functionalities. The client team will have access to special links where they can review the product in its full. Any feedback provided at this point will be prioritized for implementation.

Maintenance

After the launch, our dev team always stays at least for three months on maintenance duty to ensure all high priority bug-fixes are addressed, and the backlog is implemented. As an option, we offer extra 3 or 6 months of extra support.


Deliverable

The final deliverable of this service is a working digital product. Usually a website or web app, deployed as a beta version and a maintenance period.


Format and Timeframe

We use a customized agile methodology to cut some corners and achieve the results in more efficient way. The timeframe for the implementation may vary radically depending the projects scope and complexity.