Ridin Dinesh
Avatar

Case Study

Complete makeover from branding to website

Role: Corporate Branding, UX and UI Designing

iPad App
  • Macbook Image
  • Project Rundown

    The American Chamber of Commerce in Thailand (AMCHAM) is the leading international business association in Thailand. Promoting shared economic prosperity between Thailand and America since 1956.

    They really didn’t change anything about their brand or website until now. They understand that it is important for them to evolve as the business grows and to keep up with the moving trends. It would also help them attract the younger audience and business entrepreneurs.

Project Challenge

This project consists of two separate sub-projects, first is the rebranding and then the website redesign. The first main challenge is to rebrand Amcham with a modern look and feel by maintaining their signature look. Ones this is done, redesigning the website would be much easier as we would have full brand guidelines (Logo, Brand Colors, Font, and Mood board).

Project Goal

New Amcham would have a new look for its business with a great online presence.

Tools Used:

  • Adobe Photoshop

    To create graphics for Corporate Branding

  • Adobe Illustrator

    To create graphics for Corporate Branding

  • Adobe XD

    To create wireframe, UI and Visual Design

  • Invision

    To review and share design assets to developers.

Phase 1: Rebranding

I started off with a meeting with the Amcham management and marketing director where I learned about their organization in detail. Try to understand their vision and how they want to be presented.

This phase of the project took over 20 days.

Phase 2: Website requirements, Content and Finalize Sitemap

For any website project, it's important to understand their requirements in depth. Ones the requirement is understood, we discuss the sitemap for their website. A sitemap is one of key factor that ensures the success of the website design, this would give the client and me a good idea of what all pages we need. Plus for the client, they would know what all content they need to prepare.

Ones the sitemap is approved. Client gets started on preparing draft content for each page.

Ones the draft content are prepared, I move to the next phase, which is Wireframe designing.

Phase 3: HiFi wireframe design

During this phase, I would create wireframes for all the pages using the content they provided. All wireframe is designed based on the bootstrap framework.Ones wireframe designing is done, I would present the wireframe to the client and explain to them the design idea. I would do a couple of revisions on the wireframe based on the client's feedback.

After the approval of all the wireframe design, I would move to the UI and Visual design phase.

Below is some screenshot of the finalized wireframes.

Multiple revisions/iterations are done for all the designs.

Phase 4: UI and Visual Design

I would this phase by creating a mockup of the homepage first, which would give the client an overall look and feel of the website. Ones the client approves the homepage mockup, I would then design the rest of the pages. It's important that the client understands the design direction from the homepage design otherwise, we would end up having a lot of revisions throughout this phase. Plus it would give me more confidence knowing that the client is on the same page with me.

This phase goes through 2-3 revision rounds where we test and refine the pages.

Below are the final designs.

Conclusion

Project was a great success, both website and new branding had received great user feedback.