TWISTHINK

NEW WEBSITE

PROJECT OVERVIEW

Project Goal

The project goal is to create a window connecting Twisthink and potential management levels customers, future employees, and media. The official website helps the audience gain a vivid picture of Twisthink’s brand image, team capabilities, work samples, and company cultures.

My Role

Twisthink hired Mark Green from Mintium as the project lead, a marketing colleague and I were twisthink internal resources. Three of us assembled the website design team and I participated in the entire process and designed for both desktop and mobile versions. I am responsible for defining product message, developing affinity diagram and information architecture, creating wireframes, style guides, and design concepts. I worked with developers and together we brought this website alive.

Recommendation Letter

Mark Green

Creative Director @ Mintium, LLC

From start to finish, Zhenmin was the X factor in the redesign of the Twisthink website. His sharp design instincts, deep understanding of human-centered design and commitment to always making the user’s experience exceptional created engagement with every scroll and inspiration with every click. Zhenmin’s visual sensibilities empowered intuitive user flows with arresting graphics, fresh icon design, and clear data visualization. His eagerness to collaborate and passion for creative exploration produced interactive solutions that were dynamic and satisfying. Zhenmin met challenges without complaint and accepted direction with a smile. His winning attitude and design creativity made working together efficient, effective and most enjoyable. If you’re looking for innovative, creative design, look to Zhenmin.

Mark Green

Creative Director @ Mintium, LLC

From start to finish, Zhenmin was the X factor in the redesign of the Twisthink website. His sharp design instincts, deep understanding of human-centered design and commitment to always making the user’s experience exceptional created engagement with every scroll and inspiration with every click. Zhenmin’s visual sensibilities empowered intuitive user flows with arresting graphics, fresh icon design, and clear data visualization. His eagerness to collaborate and passion for creative exploration produced interactive solutions that were dynamic and satisfying. Zhenmin met challenges without complaint and accepted direction with a smile. His winning attitude and design creativity made working together efficient, effective and most enjoyable. If you’re looking for innovative, creative design, look to Zhenmin.

Main TARGET User

Clients

  • C-Suite
  • VP
  • Director
  • Manager
  • Strategy field
  • Design field
  • Technology field
  • Engineering field

What they are looking for

  • Twisthink Capabilities

Future Hires

  • Full Time
  • Contractor
  • Interns

What they are looking for

  • Twisthink Culture/Space

Press & Media

  • Newspaper
  • Podcast

What they are looking for

  • Twisthink History

Previous website

The reason behind the redesign of twisthink’s official website is not only the previous site was outdated, but also it didn't clarify and deliver the right message to its audience, we conducted investigation and concluded users pain points that need Improved.

Home

Why twisthink

How we work

Our work

Meet the team

Blog

Pain points

Clients

Clients complained about they still don't understand what twisthink capabilities are after visited the website. There are is no section or page describe the twisthink specialties in detail. Too many words and unfamiliar diagrams made clients more confused.

Future Hires

There is no sections, images, or pages indicate any of company culture, working environment besides team member headshots and job openings.

Press & Media

There is no section or page talk about company history, facts and value, they cannot collect any useful information about twisthink from its website.

unfriendly interfaces

Case Study Section

In order to present what products twisthink had worked on in the past, there were some case studies featured at the homepage. However, only a few links could lead to fully developed case study pages, others failed to. The mix of navigation brought confusion and disorder to audiences while they were discovering.

Capabilities Section

Couple of paragraphs were used to describe what twisthink’s capabilities are in the mid of previous site’s homepage. No images or icons were added alongside, which made audiences easily fly pass or quickly lose the interest of the most important section. At the end of the day, audiences were still unclear about what twisthink's capabilities are.

Blog Section

The blog section could only be seen when audience clicked the tiny button at the bottom saying “read more", which wasn't user-friendly or convenient for audiences.

Case Study Section
In order to present what products twisthink had worked on in the past, there were some case studies featured at the homepage. However, information only reveal when mouse on hover, and only a few links could lead to fully developed case study pages, others failed to. The mix of navigation brought confusion and disorder to audiences while they were discovering.

Capabilities Section
Couple of paragraphs were used to describe what twisthink’s capabilities are in the mid of previous site’s homepage. No images or icons were added alongside, which made audiences easily fly pass or quickly lose the interest of the most important section. At the end of the day, audiences were still unclear about what twisthink's capabilities are.

Blog Section
The blog section could only be seen when audience clicked the tiny button at the bottom saying “read more", which wasn't user-friendly or convenient for audiences.

CORE functions

During our early design process, our team had concluded six foundation points in order to let the audience learn twisthink brand quickly and clearly. The purpose of the website is to build a strong path for audience to discover, understand, and believe in twisthink; ultimately transform their thoughts to action - contacting twisthink for further information.

Before we started designing the actual new website, we decided to put our feet in audience’s shoes by asking ourselves tons of essential questions related to the twisthink brand. With those questions prepared in mind, we would quickly recognize what message from pages/sections failed to be delivered to audience, and make changes from there.

Who we are?

What we can do?

Who we've served?

What work we've done?

What's our achievements?

What is our work life?

What talents we need?

What resources we offer?

Who we are?

  • Company History
  • Team Members
  • Value Proposition

What we can do?

  • Strategy
  • Design
  • Technology
  • Engineering

Who we've served?

  • Clients Name (Credibility)
  • Testimonial (Social Proof)

What work we've done?

  • Case Studies
  • Related Case Studies

What's our achievements?

  • Awards
  • Facts

What is our work life?

  • Company Culture
  • Work Space

What talents we need?

  • Career

What resources we offer?

  • Blogs
  • News
  • Whitepapers

AFFINITY DIAGRAMMING & IA

Starting from the scratch, our team has created separate pages/sections to address core messages. We also discussed main purpose of each page, and clustered different sections together to tell the story smoothly. Finally, we summarized six main navigation pages and many detail pages into natural relationships.

WIREFRAME & user flow

The team has sketched up  low fidelity wireframe to visualize every page layout on desktop. Understanding the right order and scale for each of the video, image, paragraph, and icon was essential. We made sure each layout has correctly prioritized the most important message we want to deliver to our audiences.

Home

Work

Capability

About

Blog/News

Contact

Case Study

Capability Detail

The marketing team has discovered there are almost one third of users who visited previous twisthink website on mobile devices. The design team decided to make a separate mobile version of the new twisthink website.

Converting design from desktop to the mobile platform wasn't an easy job. We started all over again to resize and rearrange all design elements from the desktop version. It became a challenge when the mobile site grew too long with all the information, we solved the problem by creating distinctive interactions and navigations in order to keep the good user experience without losing any information.

SMART & INTUITIVE INTERACTION
IS A FOUNDATION OF DESIGN

interactions

Desktop

Animation Made By Invision Studio

Case Study Section

As a consulting firm,twisthink has successfully served plenty of clients from many distinctive industries. Our goal was to show as many case studies as we could to our audiences.

work Section

As a consulting firm,twisthink has successfully served plenty of clients from many distinctive industries. Our goal was to show as many case studies as we could to our audiences.

It took too much space if all contents were vertically placed in the traditional way. Users would spend unnecessary time to scroll down/up to find their desired contents and information.

Adding a vertical navigation bar on the left somehow did solve the long-page scroll problem. However, the website integrity didn't exist anymore because of the foreign design element.

The best solution was to have the navigation bar at the top, and the page contents slide between left and right. This design utilized the advantage of the off-screen space to avoid infinity scrolls.

Career Section

Unlike other companies, twisthink is a small company that doesn't have many job openings. Company leadership decide not to create a separate career page but embedded with its culture page.

Career Section

Unlike other big companies,twisthink is a small company that doesn't have many job openings. Company’s leadership decided not to create a separate career page but embed with its culture page.

A traditional career page usually contains many small sections that link to different job description pages. However, it would create extra clicks for users to get back to the previous page.

When users click to expand any sections, the previous section would automatically collapse. This design would not only make the website less messy but also save plenty of vertical space.

Blog/News Section

Twisthink has its traditions to write blogs, share news, and publish white papers. As time goes by, all three categories will eventually have numerous articles and papers.

Blog/News Section

Twisthink has its traditions to write blogs, share news, and publish white papers. As time goes by, allthree categories eventually had numerous articles and papers.

Paging seemed like a good solution to fit endless information, whereas, users would easily lost the track of previous information after they looked tons of.

Infinity scroll with a load more buttons, in this case, was a better solution. It allowed the user to quickly scan the content without any extra clicks. Load more button prevented information getting overloaded to the user.

Mobile

Comparing to redesign website on a mobile platform, building interaction on mobile was very similar to the desktop version, such as dynamic navigation.

It was a bad user experience if the content has exceeded the screen size. Especially when the navigation bar wasn't sticky at the top of the screen, the user had to move the page up and down to change between pages.

This would be the ideal situation to have all content on one page, and the user could easily navigate between pages.

GUIDELINE (12 columns)

COLORS

The key message that twisthink was trying to deliver to audiences through the website was we are able to empower the clients to grow and accelerate their speed of innovation. We interpreted green (brand color) as growth, orange as passion, and blue as innovation. We associate green color with strategy related elements. Orange with design related elements. Blue with technology related elements.

Theme Colors

Grayscales

Theme Colors

Applied on buttons and important text to attract more attention.

Growth

#93d95d
#58b80f

Passion

#f3ab38
#e95a24

Innovation

#7df1ff
#3fa1ed

Grayscales

Applied on background, sections, boxes, and containers.

#ffffff
#f7f7f7
#ebebeb
#777777
#1f1f1f

Gradients

TYPOGRAPHY

Barlow (All Capitalized)

AA

AA

AA

AA

IBM Plex Serif

Aa

Aa

IBM Plex Sans

Aa

Barlow (All Capitalized)

AA

Extra Bold - Italic

AA

Bold

AA

Medium

AA

Medium - Italic

IBM Plex Serif

Aa

Medium

Aa

Normal

IBM Plex Sans

Aa

Normal

ICONOGRAPHY

I found three different icons styles from Google for leadership team to choose, they picked the thick and thin line style to move forward with. This inspiration image has become my design guideline throughout the whole process.

Icon Exploration

Sketched numerous icons ideations for strategy, design, and technology categories.

Icon Exploration

Icon Development

Icon Development

Final Icons

User Research

User
Research

Product Research

Product
Research

Product Design

Product
Design

UX Design

UI Design

Connectivity

Analytics

Edge Devices

Software

UI ELEMENT

Button

Buttons

BUTTON

HOVER

BUTTON

HOVER

DISABLE

BUTTON

HOVER

SELECT

READ MORE

Input

Input

Text
Error

DESIGN concepts

DESIGN concepts

Usability was the priority of our design concept. Following developments were conducted:
1. Remained enough space for case study titles and descriptions to match with images
2. Experimented different graphic layouts, such as including all case studies on one page or emphasizing a certain number of case studies at a time.
3. Compared dark and light themes & Concluded the best theme outstanding the case studies.

Usability was the priority of our design concept. Following developments were conducted:

1. Remained enough space for case study titles and descriptions to match with images

2. Experimented different graphic layouts, such as including all case studies on one page or emphasizing a certain number of case studies at a time.

3. Compared dark and light themes & Concluded the best theme outstanding the case studies.

original plan

We originally created a modern and unique user interactions with sticky window effect. I've visually made an prototype (animation below) to express our idea. Development team think it is very complex to build and decided to implement other elements first. Finally the website launch date gets close, the development team haven't figure out the solution, our design team decided to select an easier plan in order to make sure the website can be launched on time.

final design

We want to create a clean looking , purposeful, and intuitive interface. Two case studies at a time doesn't look messy, colorful image combined with white box container made the case studies pop out from the grey background. Two  arrows on each side allow user easily navigate between projects.

Final Concept

DEVELOPMENT PROCESS

design experiment

Font Implementation

Font Implementation

Spacing Exploration

Spacing Exploration

Mobile Interface Examination

Mobile Interface Examination

A NEW WINDOW TO
RE-INTRODUCE TWISTHINK

A NEW WINDOW TO
RE-INTRODUCE TWISTHINK

Work Page

Capabilities Page

Blog/News Page

Contact Page

Case Study Page

About Page

Mobile

DESIGN VS development

The completion of final design wasn't the last step of the whole design process. Most of the time, the implemented design could be very different from the original concept. To solve the gaps between concept and reality, collaborating with developers, adjusting details, and testing the final implementation on several web-browsers, operation systems, and display sizes are indispensable to achieve the best user experience.

Google analytics

Number of Audiences comparison between previous website and new website.

Audience Engagement Rate comparison between previous website and new website. As you can see from this diagram, more audiences stayed on one session/page much longer compare to previous website.

website feedback

I interviewed Brent as one of the target audiences, his feedback is the Navigation bar should have drop down menu since there are many different sections buried in each page. Like this image below.

Brent Beukema

Senior Industrial Designer@ Twisthink

I interviewed Brent as one of the target audiences, his feedback is the Navigation bar should have drop down menu since there are many different sections buried in each page. Like this image below.

Learn more about the twisthink website, visit:
www.twisthink.com

Thank you for watching!

Thank you for watching!

MORE PROJECTS

aircuity 2.0

visual research tool

eaton demo app