What I learnt redesigning a microsite | UI/UX Case Study
Introduction
Brief: Redesign a microsite which focuses on the 2020 Lunar New Year, year of the rat campaign that needs to be optimized for mobile and cater for rural areas which have poor internet connectivity to participate in the Wheel of Fortune.
The challenges
- Microsite will be 90% focused on mobile users.
- Initial design does not cater to mobile responsive.
- Information of how to participate and prizes for the Wheel of Fortune are not available.
- User-generated-content using Instagram photos will greatly reduce the microsite performance.
- 3 weeks, 1 UI/UX Designer, 3 days to develop a fully responsive microsite with visual assets provided.
Understanding the audience
According to the brief and challenges above, there are 2 groups of audiences to focus on.
- 90% of the users will be accessing the site on mobile as most of the roadshows and ads target are targeted on mobile.
- The rest of the users will be accessing the site from various devices.
The goal
To solve the design challenges.
Thought process
How to cater this site with tremendous amount of sections to have a fluid UX flow on mobile.
Designing a website for me is like visiting a new house. Where one invites the guests over to their house and take a guided tour. As they tour around the house, the guests are interested explore different rooms and their interiors.
Hero — When user enters to the site, the first things they see welcomes them with the campaign logo as well as the importance of sponsors logos with a call-to-action button that leads to the Wheel of Fortune participation. In this section, I have set the viewport height of 100VH with a specific minimum height to make sure that the site works properly even when user rotate their mobile screen to horizontal. There are too many sites which the VH is set to 100 but they tend to miss out on the responsive layout of horizontal mobile view.
Slider — The challenge here with the slider is on mobile, the images are always tends to be either too small or over stretch on desktop view. The solution over here is to have the image to be transparent and cap the image size so it caters to the minimal mobile viewing experience, any extra spaces will be filled by the slider background color instead.
Wheel of Fortune/Step-by-Step
- User click on Wheel of Fortune CTA buttons at Hero/Wheel of Fortune/UGC sections
- User login using their Facebook account
- User types in their Instagram handle
- System verify #hashtags on given Instagram handle account
- Proceed to Wheel of Fortune where user click on Spin
- Congratulate user on their reward
- User receive email on how to claim their reward
Image & User Generated Content (UGC) — Images are the biggest issue in the website, if the images are not optimized properly it will greatly impact the site’s performance and loading time. I have to make sure all the images uploaded to the microsite are compressed and if possible — use SVG file format for all vectors. The tool for compression I use is TinyPNG, this reduces approximately 72% of the full microsite file size and improve on the server’s bandwidth.
But even with compression of images, due to the number of images and the time to download all the images for the site to fully display to the user will be too huge and slow especially for users on a poor network connection. To optimize this as well as the entire microsite to have an even better UX, I have implemented lazy loading to all images on the site. With the use of lazy loading, the images will only download once the user scrolls into the viewport.
Loading PNG or JPEG files are still huge even after compression, but with the support for WebP image format, this reduces the images file sizes by another 29%. Here is a comprehensive article on lazy loading on images and videos on Google Developers-Web-Fundamentals-Lazy Loading and the use of WebP file format on Google Developers-WebP.
Zodiac — In the Chinese tradition that have been passed down from centuries. This section is where users will mostly stay longer and understand their zodiac signs. In desktop the zodiac icons are presented horizontally and on mobile vertically as this improves the UX on navigating through different zodiacs.
Merchandise — Instead of a promotional image to show case the merchandise. I went for the individual product approach which showcases each product and its price and on-click will link to the main purchase page directly which ease the purchaser from searching for the merchandise.
Roadshow — This section promotes various locations participating in the #cnykeepsmiling campaign. Reason in putting dual language in this section for each location is that various drivers prefer to type or even use voice commands to search for a particular location.
TV schedule — The initial stage of this section were to have an image to be updated daily, but to ease the job of the developer and allowing the audiences to view various days and plan their day ahead, I came up with a day-to-day tab design approach which allows the audiences to have an overview of the full schedule.
Video — Changes to the layout of this section is more towards the UI only. Reason being is that I added a border and able to select different tabs for each video to be display at the bottom as when we are always used to watching YouTube videos the suggested videos are always listed below the main video.
Article — The approach for this section is to have a card style design separating from the Lunar New Year look and feel of the borders and bright colors. Showcasing the trending articles with its thumbnail, author, posted on and various social engagement numbers. With tons of hyperlinks in the site redirecting to various domain, I added a manual prefetch attribute in the <head> section of the code to improve the speed of redirects. DNS prefetching resolves domain names before the user clicks on the link. Here is a documentation on The Chromium Projects-DNS Prefetching.
Footer — At the end of the page lies a huge space displaying the house of the rats.
Lo-Fi & Hi-Fi- wireframes
Starting off with the low fidelity wireframe of each section. I always like to draft out prototypes when I am commuting on train, because that is where all the time on the train — in silence can be used to brainstorm and churn out ideas on how each section and element react to the user, the micro-interactions, feedback on-click, on-hover as well as UI on-the-go.
Coming from a personal standpoint of view, I went for 3 different theme colors. Gold, Modern Blossom, Traditional Red. The above layouts are the first few initial UI for the microsite which does not feel it is good enough yet for the year 2020.
After a few days of refining the UI/UX, the final product of the microsite brings out the minimalism layout and flow with the Cherry Carrot theme.
Conclusion
I really enjoyed designing this microsite as well as building the front-end part of the site. This is the first site that I built that utilizes lazy loading and WebP image format support. I am also certain that this is just the surface of site optimization. As technology advances, for me as a UI/UX Designer with a Computer Science background major, I am very passionate to explore new challenges.
Thanks for reading! Feel free to have a look at the microsite here. Connect with me on LinkedIn.
