Established in 1989, SmartShape Design Co. is an industrial design company in Cleveland OH. As the company is growing by including more creative experts in different areas, to provide an end-to-end service to clients, the outdated website that had been used for several years, which was text-heavy, cannot serve well any more. They would like to change the structure, layout, and visual style of the whole website, and sufficiently present their diverse work portfolio, design capabilities, and firm culture.

Structure Flow-01

My Role

As a UX Designer in SmartShape Design, I partnered with a project manager and a graphic designer to work on the company website redesigning project. I was assigned to work individually on the earlier stages, including exploring the trending style, reorganizing the information structure, created an image-copy balanced layout, and added more minor interactions to smoothen the browsing experience. And I was involved in the visualization exploration in the last couple months.

Based on the research of current website styles, in order to reflect the company's value of providing insightful, creative and authentic design service, the design team decided to go for a neat, informative and timeless style.

It's over 20 years since SmartShape Design was established, so they have been working on a great amount of projects covering a variety of areas. And their professional capabilities have been developed to provide end-to-end service to different clients. In order to demonstrate their expertises that could fulfill different clients' needs, I created a hierarchical navigation that could lead visitors to the detailed information about what they are looking for. By adding hyperlinks between pages, the browsing experience becomes more intuitive, and it adds the possibility that visitors see some new information that they don't intend to find, which also can bring benefits for the company marketing purpose.





In order to give visitors a brief idea of what SmartShape Design has been doing, all their projects are listed in a 3-column grid with thumbnail images to showcase the products. The project names with brief description are displayed in the black overlays. Some of the projects have a detailed page describing the design process and related information, therefore an indicating mark is added on the project tile. As considering that clients in different industry may intend to find the projects related to their areas, a filter is added on the top of the grid for visitors to sort out the information.


Hero image is one of the main features used in the website layout. Full-bleed high-resolution images on the top of each page are delivering SmartShape's spirits of providing authentic and user-centered design, and always being open, innovative and cooperative. In order to make the case study easier for visitors to understand, it showcases the images with associated descriptions in a story-telling format.



As the company is keeping growing, more and more designs will be created. While the new website will be used for a long time, so I designed three strictly organized and flexible page layouts for the future updates. They can add new contents and new projects by using the templates, or even add new sections in the website structure. 

Responsive Macbook
Responsive iPad
Responsive iPhone