AET Translation Website Re-design


a website where you can find professional and quality translation service and more . . .

ABOUT

About the project

This is a web re-design project I completed @Jiahua US Service. My task was to refresh the overall design of the old website, which was designed almost 10 years ago.

My role

Sole designer and front-end developer

Achievement

After release, it boosted incoming traffic by 25%, sales by 5%.

EVALUATE OLD WEBSITE

Like in every re-design project, I first carried out a comprehensive evaluation of the old website to find out usability and/or design problems and decide where I should start.

Take a look and feel for yourself

Old website has many usability and/or design problems, some are very severe. What do you think of flollowing screenshots? Outdated? Word-crowded? Want to close page and leave?
From left: old homepage; a part of a service page; an old price table.

Data don't lie

People may have different opinions based on their own experience. But data always tell the truth. A bounce rate of 65% is very high. Actual words per page are 5 times what people normally read on website.

Typical storyboard

In typical scenarios, the old website either brings 0 business, or increases colleagues' workload.

Usability testings and interviews

In order to have happy users and colleagues, I conducted remote usability testings and user interviews. I also interviewed colleagues who are in charge of answering phone calls and email inquiries, to see if there are patterns of users' questions.

USERS' TRUE NEEDS

Not surprisingly, having too many contents and confusing navigation cause most frustrations for both users and colleagues.

A quick scan of useful contents is desired

Here are some interview quotes.

Outline for each service

Based on interview results, I came up with a general service outline. It was then tailored to fit in each service page.

INTO THE REDESIGN

Iterations of layout

At this point, I already knew:

  • the website needs to have some, and not too many contents
  • at the same time should let users have a quick scan
  • So I first started with page layout.
Picture above: wireframe of page layouts
Picture above: high-fi mock-up of page layouts
After low-fi and high-fi mockups, layout 4 was adopted for having a side index and a wider content area. Plus, the side index is sticky and always remains in users' sight.

Contents simplified

Then I worked on editing and simplifying contents.

Take Why choose AET as an example. It's true that users do want to know about the company, but read 1000 words? Maybe not.

Less words, more pictures and spacing can better convey the message.

Use of accordions

For contents like FAQ, using accordions is a better way to organize and show them. Though users need FAQ, it does not mean they are interested in reading every question and answer.

Tables refreshed

Cluttered, difficult to read tables are replaced by clearly marked and clean ones.

Style guide

The whole website needs to look clean, professional and trustworthy. So I used different shades of black and grey. And I chose blue as the color to highlight elements that need more attention.

RELEASE - A PROVEN SUCCESS

I re-designed the whole website in the above mentioned approach, developed and launched the new website. After it went online, I kept monitoring key metrics and made adjustments in design accordingly.

Homepage

Homepage showcases 3 major advantages of AET, being rated top 3 on Yelp, and of course lists all offered services by the company.

Service page

Service page has a sticky side index on left, and necessary contents that users need.

More incoming traffic and sales

The new website was launched on 2017/6/30. Incoming traffic increased by 25%. Sales increase slightly 5%.
PreviousJH Responsive Web Design
Home
No Next