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.
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.
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.
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.
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.
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.
There is no sections, images, or pages indicate any of company culture, working environment besides team member headshots and job openings.
There is no section or page talk about company history, facts and value, they cannot collect any useful information about twisthink from its website.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Applied on buttons and important text to attract more attention.
Applied on background, sections, boxes, and containers.
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.
Sketched numerous icons ideations for strategy, design, and technology categories.
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.
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.
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.
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.
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.
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.