Redesigning Haier’s internal service and transportation platform.
Haier Group Corporation is a Chinese collective multinational consumer electronics and home appliances company headquartered in Qingdao, China. June 18th is China’s midyear online shopping festival. Our goal is to prepare our online platform for this date in order to ensure top notch user experience. Being one of today’s leading brand of major household appliances and a leader in adopting an open entrepreneurship platform, this means competing with other E-commerce platforms in not only making speedy deliveries but also creating the best user experience.
My project was to redesign the site homepage that ships on June 18th for internal use to keep track of orders from customer payment to delivery. My second task was to translate the web version design into a mobile version.
The Internet Technology board wanted its brand identity to be coherent and easy to understand with little written information, yet professional and complex enough to display all needed data. I used my design analytical skills to tell compelling stories visually with complex logistical data. Since I was one the only designer on this project, I was able to touch almost every part of this project and have my designs ship to production - it was a really special experience working so closely with the team and watching my designs come to life.
I started off being not too familiar with Haier’s complex sea of data. Combined with my lack of complete fluency in Chinese, this was definitely the most difficult step to pass by…
I focused on internal research, targeting people within the company who understood things from different angles (business administrator, head of IT, product manager etc). From talking to people who understood the problem and the platform more, I was able to truly understand what I’m designing for.
I first started jotting down and sketching out some initial ideas. However, I was incredibly frustrated since this was my first time learning how to turn complex numbers and data into visually appealing designs.
I quickly discovered some helpful sites to learn from and get inspired by. Some example reference sites: huaban.com, 58pic.com, echarts.baidu.com.
Because I was on a very tight timeline, my second medium fidelity iteration actually was approved and I moved straight to the hi-fi stage. The iteration was actually the one that was shipped. This process took a week (5 days).
Next, I began transforming web version screens to mobile. This was a huge challenge especially for the homepage. Because the desktop version shows a horizontal timeline, making all the information fit vertically without losing any important flow was extremely difficult.
Now, with a better understanding of Haier's data, I began exploring with different color themes to get an initial idea of how the mobile design should "feel" like. I decided to choose a lighter color scheme knowing that those on the mobile might be commuting in all different lighting settings. A lighter color scheme would make the information easier to see and understand.
I then brainstormed potential features and grouped them into different problem spaces.
After receiving feedback from my sketches, I decided to keep the map of China static across the three toggle categories. I also decided to place the calendar and categories features at the top of the screen. These static components span across all three pages because of their importance in the information hierarchy.
I conducted some market research on calendar features, analyzing how hotel websites carry out their booking process. The calendar feature allowed the company to specify in between dates to organize the data. For instance, if June 18th was part of the date, the orders would show to be skyrocketing.
I also conducted market research on category features, analyzing other online shopping platforms. Clicking open the categories selection page leads to a page where the company can choose all, or a combination of e-commerce platforms. This shows the amount of order logistics ordered from one e-commerce, a combination, or all platforms.
This process also took a little over a week before it was shipped on June 18th.
Another task I completed was making visual infographics to tell the story of Haier’s complex data and to offer simple visual form of understanding.
After discussing with the IT board, we picked out several impactful designs and combined ideas together.
Data visualization characterizes the effort to help people understand the significance of data visually. Big numbers, patterns, and correlations may go undetected in text-based data; information may be lost quite easily. Therefore, in my attempt to best represent data in a visual context, every design decision had to be strategic. From the organization of data to coming up with design solutions to best represent sets of data to putting everything together in a visual context, this process required iterating and re-iterating in order to use visually to tell a comprehensive story about Haier's data.
After a summer of trying to understand and visualize a sea of numbers and data, I started to value the importance of communicating without words. It forced me to think differently, critically, and creatively in order to create truly impactful designs.
A drawback I had was learning how to tackle different artistic preferences between the Western culture that I grew up in and the standards of the Asian culture. Although I value simplicity a great amount, I often found myself creating very complex designs in order to include all information.
I also was not used to the fast-paced work pace of Haier. When it comes to design, I like to brainstorm and ideate ALOT, gather user-testing results, create lo-fi sketches, slowly move into medium-fi, then perfect changes for high-fi. However, time constraints led me to skip many steps in order to meet deadlines.
Throughout the design process at Haier, I learned to be open-minded about my iterations, be considerate of my decisions (with developers in mind as they have their own constraints as well), and be humble when receiving feedback.