hero_ideas.jpg

IoT Website Design Process: CyntrX

IoT Website Design Process: CyntrX

By Della Wheeler Share This Story | | Tags   brand design, user experience, ux

Here at ThreeTwelve, we've been refining our web design process and working to create more successful products for our IoT clients. Our designers have been studying Hubspot's Growth Driven Design methodology as well as user experience and interface design. On top of that, we are continually studying the growing intricacies of the IoT industry.

We have found that when research and strategy are at the forefront of every project, we are then able to execute a much stronger final product. This was definitely the case for our new and amazing client, Cyntrx. Below I will outline the details of our process and how it led us to one of our favorite projects to date:


1. Discovery

I have spoken a bit about our discovery process in some past blogs so I won't get too in the weeds here. But the discovery meeting is basically an initial talk with the client and the team that will be working on the project. We get our project manager, strategists, designers, developers, and marketers all together in one room (or one conference call) with the client and talk about a few things:

  • Marketing and Sales Goals
  • Top Competitors
  • Target Audiences and Personas

This may seem like a small list but with our pointed questions, it turns into a really big and beneficial conversation with the client. It also starts to get our teams wheels spinning about how to best serve the client.

2. Competitive Analysis

After we've gotten a list of who our client thinks their competitors are, we also compile a list. This turns into a comprehensive look at the following:

  • Website design
  • Elevator Pitch
  • Mission
  • Products + Services Offered
  • Strengths
  • Weaknesses
  • and Key Brand Differentiators

This gives our marketing and design teams a chance to take a really deep dive into the competition and see how we can position our clients with strength and uniqueness.

3. Goals

Our goals process is derived primarily from the discovery meeting but it gives us a chance to take some time without the clients input to compile website goals, KPIs, and a marketing roadmap.

Website Goals:

The website goals include the following:

  • Literal goals like amount of traffic, engagement, etc.
  • Tactics to reach those goals

KPIs:

KPIs include increasing things like:

  • Website Sessions (organic, direct, new, and referral)
  • Pageviews
  • Contacts

And decreasing things like:

  • Bounce rate

Marketing Roadmap:

This is a 12 month view the steps and strategies we will implement in order to achieve the website goals and KPIs. This brings everything together and includes things like:

  • Objectives
  • Strategies for building, growing, and retaining
  • Marketing budget allocation
  • How we will evaluate goals
  • High Level Plan

4. User Journeys

Once we get to user journeys, we are really starting to dive into design and UX. This is where the designer and marketer get together and get into the meat of how the website will flow.

User journeys combine personas and buyer journeys with website pages and sitemap. Here's an example:

 

Screen Shot 2018-01-03 at 10.32.53 AM

In the above example someone who is not yet a customer would start out in the awareness phase of the buyer journey. They would come to the homepage, click on a benefit driven hero CTA which would then move them to the platform overview page where they'd click a CTA to download a datasheet. Ideally, this process would move them into the consideration phase.

This process really helps the designer build hierarchy and user experience first when they begin the website wireframe and prototype. As a designer who has taken part in this process numerous times, I think this is perhaps the most important step. It guaranteers that the clients' website not only looks really good, it also works for their goals.

5. Style Tiles

Style Tiles! This is definitely my favorite part of the process. "A Style Tile is a design deliverable consisting of fonts, colors and interface elements that communicates the evolution of a visual brand for the web." When we do this process, we usually create 3 different tiles and we don't share them with the client. It just helps us to get some creative ideas out while the initial strategy process is coming to a close.

Here are the style tiles we created for CyntrX:

 

Cyntrx_Style_Tiles_V1-01

 

Cyntrx_Style_Tiles_V1-03

 

Cyntrx_Style_Tiles_V1-02

 

6. Content Creation + Prototyping

This step brings up the age old debate, content first or design first? We have internally struggled with this debate for a long time until we decided that content and design go hand in hand. You really can't create one without the other.

This is another reason that step 4 is so important. It gives the designer enough to go on to create a prototype where the content writer can fill in. This becomes a dance between the two and has really worked well for us. It gives everyone an opportunity to start from a place of knowledge and creativity.

So this is probably the longest and most work intensive step of the process. The designer is designing comps and the copywriters are filling those comps in. We use Invision to place prototypes in for feedback.

We start with a intensive process of internal reviews and then give that prototype to the client when it is completely refined. Here, the client will place in their feedback and we are on our way to development.

 

Untitled-4-01.jpg

7. Refinement

The refinement process is continually happening during design through development and client approval. We refine the comps using Invision with the client before our developers tackle the job but sometimes a final live webpage needs refining as well. It is true that sometimes a comp looks great but it just doesn't work as well in the interactive space.

And perhaps the coolest thing we are learning about the refinement step is that it really never ends. As our clients and their customers change, so does the site. Analytics and client feedback are our compasses for the refinement process therefor the website is forever evolving. 


 

Love what you are hearing? We'd love to share our process with you. Contact us for more information about a website audit and our web strategy services.

 

Share This Story | |
bg_contact-illustration.png

Subscribe

If you like our ideas, subscribe and we’ll keep in touch.

Once per month, you’ll see our latest blogs show up in your inbox. And if we post something special (like an infographic or an eBook), you’ll be the first to know.