Wiredcraft Co.
Reimagining online presence for Wiredcraft


Taking a long break from my life in Brisbane, I returned to my hometown, Shanghai in summer 2017. As part of my journey, I took on an internship at Wiredcraft , a web application and design agency at the heart of the city.


My client is simply the company. Wiredcraft provides web and mobile solutions to some notable companies located in mainland China, including Starbucks China , World Bank , Etam and more.


My challenge is clear - apply a modern and tech feel to the current website. More importantly, find a balance between pragmatic (tech) and artistic (design) style to better represent the company.

Wclco old


Visually elevate wiredcraft.com website based on the existing content and page hierarchy on the staging site. Responsibilities include:

  • Choice of typeface and size
  • Explore and set the visual style of the website
  • Consider reusable UI elements on the website
  • Produce a style guideline for the team


I created a 9-day plan for the website redesign:

  • Day 1-2: Research and exploration of visual style (Moodboard, font style and size, illustration style)
  • Day 3-4: Create early UI elements following principles of Atom Design
  • Day 5-7: Mockup
  • Day 8-9: 1st Round Iteration


Day 1: Duality - Research and Moodboard

Following my leader's recommendation, I was advised to create a moodboard to explore and communicate my choice of style. Duality was my obsession at the time. Therefore, I went on and stitched up my very first moodboard exercise.

Dual moodboard

Here is a simple vision of what I had for the hero section of the homepage.

Dual hero

My exploration of dual-colour got cut short, as my leader later then pointed out that the company is after a clean and simple approach while keeping a good balance between creativity and corporate feel. The dual color exploration I had was leaning towards a pink-ish color, which may not be ideal for corporate side of users.

This led me to go for a more minimal style.

Day 2: Minimal - Exploration

With the new direction in mind, I was ready to start over. However, I was interrupted by my boss (who has a strong opinion on design) to explore font pairing options for the new logo design he produced a couple of days earlier

Font pairing

The font-pairing exercise actually helped me shape a clearer concept in my mind. So I went on and painted it out.

Simplicity exploration

I created some custom icons for the services provided by Wiredcraft.


At the end of the day, I got the green light from my leader with some minor changes on the button colors.

Day 3: Style Guide

This was the first time I took a deep dive into an established design approach - Atom Design and directly it to my design process.

Style guide

Day 4: Off Rails

Starting from Day 4, my work began to part ways with the initial plan. I realized that my leader wasn't the decider for the project. Instead, my boss, who had an entirely different vision of the project, is my true client.

Day 5: Black and Red

According to the feedback and new direction provided, I created a new style, which was the final progress I made on the project due to some changes in project planning and management.

Black red home
Black red blog


The result was not quite as what I expected. The project was halted internally and the company decided to outsource on the design work later on.

However, I was proud of my design and the style I came up with at the final stage. I re-tuned the design to fit for my own portfolio website, which is the one you are currently browsing.


Work Tile

I applied the dual-color and added some transitions to the work tiles.


Wiredcraft Co.

Reimagining online presence for Wiredcraft

Website Redesign / Style Guide


Wiredcraft Co.

Reimagining online presence for Wiredcraft

Website Redesign / Style Guide


  • Moodboard is a great way to explore and communicate the overarching style of a project that you may want to get started on. For the designer, Moodboard is an efficient way to check the consistency among typeface, UI elements, stock images, illustration style and more by laying them out on a board (either physically or digitally). For the stakeholders and clients, it is also a great way to show the feel and direction without putting much extra explanation.
  • Be clear with who the decider of the project, the true client. Working closely with the true client to be on the right track and get regular feedback to minimize the risk of going the wrong direction.
  • An organized design guideline helps a designer to think ahead the reusability in both design and development phase. During the design phase, creating a library of reusable UI elements (for example, using symbols in Sketchapp) will keep the consistency among the various pages and boost the speed of changing any widely used elements. When it comes to the development phase, front-end developers can start implementing these smaller components straight away, which could help make the entire development cycle more efficient by reusing them.
  • It's not the end of world to have your concepts killed - you can try implementing it into your future or past works.
  • For any agency work, there sits a boundary between delivery and perfection, and the boundary is set by time and budget .


Design Guideline Principle

Josh Clark and Dan Mall - Atomic Design

Design Guideline Examples

< Back to Work