Treetopia is a ecommerce retail company that sells high quality artificial Christmas trees and holiday decoration products. I enjoyed my time working on this very fun project with the creative colleagues from Treetopia. This project was part of an ambitious rebranding initiative. In order to define their brand personality and better target the customer niche, we needed to redesign Treetopia's mobile and desktop homepage to emphasize the colorful personality.
Analyzed market positioning and brand personality
Incorporate new brand identity in the website design
Communicate value proposition through multiple touch points
Re-structured an ecommerce website and introduced new content block (customer photo grid)
Designed the flow of website to accomodate new branding strategy
Designed a template of the mobile homepage that is curated for the mobile experience
Communicate brand image to the target user group through design language
In this project, I finished and handed off the low-fidelity design (wireframe on the left) of Treetopia's mobile homepage. For the purpose of illustration, I made a high-fidelity version (right) based on the wireframe. The actual UI design was taken care of by the UI team in the company.
What is Treetopia?
Before going into designing, I first needed to understand why were we doing this. The project scope includes redesigning the homepage of Treetopia desktop website, and launching a mobile website that wasn't existing. This project was part of a larger coporate-wide roadmap project, that had long-term business goals, and consisted of several other projects of different scopes.
The long-term goals emphasized building brand awareness and establishing better customer relationship. This was a rebranding of this colorful artifical Christmas tree brand. Looking at the current website where Treetopia sells its products, lack of brand personality and differentiation undermined its attraction to the right people. Additionally, Treetopia didn't have a mobile website, which was a huge diadvantage under the current "mobile first" trend. So we identified the challenges we need to overcome to achieve the high-level business goals.
To effectively establish the branding identity, we needed to understand Treetopia's legacy. What kind of brand is Treetopia? What were their objectives as a company and what's in their blood?
The company set a series of objectives for the 2018 sales season. Some of the goals ought to be achieved by launching new website before December 2018. The success of this project is defined by how well the redesign address these points: Define brand personality on the Treetopia website, partner with the right people and leverage user-generated content, use consistent language across all touchpoints, and lauch the mobile website.
At the beginning of this project, we had a clearly defined direction, which was to emphasize the "COLORFUL" characteristics of the brand, regardless of how it may impair the green tree's sale in the short term.
How did I approach this strategy?
As a new member of the team, I wanted to understand the brand better, especially about the corporate communication, and the public relations it wants to establish. The company supported me in this exploratory journey. I was able to read the past customer research data, sales and product reports, scripts of 2018 commercials (due to NDA I could not displayed them here). Those material made me understand Treetopias' market positioning, and helped me think about strategy from the coporate level.
After that, I made the following diagram to visually represent the user dynamics. This graph simply conveys what Treetopia promises to offer to their different user groups. I referred to this diagram repetitively throughout the process, to ensure our design language speaks for the target group.
I went thoroughly through the current website, documenting brand elements, and trying to explain what needs to be achieved with the elements on the homepage.
Each content block on the homepage needs to convey certain value, such as value proposition, credibility, conversion to purchase, etc. Some of these value have higher priority and thus should be placed higher on the page, and some lower priority content can be pushed down. Given limited resource and time, I was told that redesign of some content (like the standard marquee and footer section) was out of scope. So I should be targeting the colorful and green tree's shopping section, PR and testimonials, or add in other content if I can justify it.
In addition, I followed Treetopia's social media accounts on Facebook and Instagram. By "stalking" their recent posts and interactions, I became familiar with the company's tone of speaking.
When I dug into Treetopia's Instagram page, I found some very interesting user-generated contents.
A lot of the instagram photos came from expert decorators and customers who purchased Treetopia's products before. Treetopia displays some of the selected customer photos on its Instagram page to inpire others. These UGCs help Treetopia's customers make their own statements, and foster the Treetopia community. I believed that they should also be leveraged on the new homepage, as means to enhance the brand identity and build credibility with new customers.
My colleague and I were responsible for different parts of the project. His job was to redesign the desktop homepage, and I was responsible for designing the mobile homepage (because Treetopia used different assortment and layout for desktop and mobile websites), but we did the ideation together.
Before joining in the discussion, we went through a lot of colorful websites searching for inspiration. Then we put together a mood board for us to stay on top of the "color".
After looking at a lot of colorful brands and their websites, we concluded 3 common ways to express the colorfulness: 1. Bulk usage of color, 2. Background color complementing the subject in the image, 3. Color in texts. We wanted to enhance the colorful taste from all three aspects, especially using bulks of color.
We communicated our needs with the commercial team. They responded with an exciting news: the commercial shoot will produce product images with strong vibrant background colors to match or complement the product colors. With these images, we will be able to bring the colorful taste of our brand to the next level.
Image: At the site of commercial shoot
We did several whiteboard discussions and brainstorms together. Because the redesign didn't need to follow the current website template, we were quite open to any ideas.
Image: whiteboard discussion
We went through our sketches together. Several ideas captured our eyes. So we picked them out and discussed how these ideas serve the branding goals.
We shared these design ideas with other stakeholders. The team particularly liked the customer photo grid, as a result, the content team has made it on the top of their pirority list. They thought it was a great idea to showcase customer photos and comments on the homepage. It addresses multiple objectives at the same time: 1. Help customers make a statement, 2. Inspire new customers, 3. Build credibility, 4. Bring together the community.
In order to make sure the new homepage does all the job it should be doing, I made a diagram of all the components and tasks ought to be represented on the homepage.
We decided to first design the main flow that applies to both desktop and moible devices. To do it, we created the page flow on the desktop scale because it was easier to make design decisions with an existing desktop version as reference. Then, we will replicate the flow on the mobile design with reasonable variation specifically tailored to moible experience. Below was our first iteration of desktop wireframe.
Mobile Homepage Design
While my colleague was working on the desktop wireframe iteration, I started exploring the treatment on the mobile homepage. Although we were working individually on the design, we collaborated closely and communicated frequently to make sure the 2 versions were consistent.
What's different about mobile web design?
One big difference between the mobile and desktop website is how users interact with the interface. On the desktop webiste, users are familiar with hover interaction and are more willing to use their mouses to click around. However, on the mobile device, people almost only want to scroll. As a result, contents hidden in the folded menu almost never get a chance to be viewed.
Because of that, I will need to move some secondary product category out of the navigation menu and display them in the main flow. So I modified the content structure of mobile homepage and appended new categories.
Mobile HP Sketches
Next, I started sketching more ideas, focusing on exploring different ways to present the same type of content on the mobile device.
Make Design Decisions
Now I had a lot of different alternative designs for one block of content. How should I make design decisions? I started a design critique with the UX and UI team, stakeholders from the Content team, Customer Relationship team and the site manager. We discussed the pros and cons of each design alternative, and voted on the favorite design. By the end of design critique, we had selected the most optimal design for several main sections on the homepage.
Some of the criteria we used for selection were:
- Avoid horizontal scroll
- Shorten click path
- Keep the page length short (no more than 4 - 5 screens)
- Maximize valuable information
Based on the team's best judgements, I designed the low-fidelity mobile homepage. In addition, I creatively added a parallax scroll effect to the image grid, so that we could display more images within the same page length.Leave Out Unique Collection
On the mobile homepage, we took away the "Unique Collection" block to keep the page short, because this product collection only contributes a small portion in the revenue. Even so, the team thought the page length is longer than ideal.
In order to further reduce the page length, we combined the product image grid with "shop by color" CTA, using colorful tree images to replace the palette. This combination brought another benefit: the colorful tree images helped explain what to expect if customers click on the color collection.
In this iteration, we seperated customer photos from the testimonials section, and moved it up above value propositions. The reasons for that were: the customer photos can better expresses the tagline "Show your true colors". Moreover, showing these colorful images early on the page helps establish brand personality.
After these 2 iteration, we had successfully reduced the page length from 5 to 4 screens.
Annotation and Handoff
By the beginning of the 4th week, I had finished the low fidelity design of Treetopia's mobile homepage. Because of how the company divide responsibilities of UX and UI roles, as a UX designer, my responsibility ended there. Last step on my side was to annotate the wireframe to explan design decisions, rationale, suggestions, and hand it off to the UI team.
Below was the annotated document that I handed off.
My time at Treetopia ended soon after I handed off the low-fidelity design. The new homepage had yet to go through usability test and preference test against the old homepage before it can be implemented. I was not able to participate in those testings and iteration due to the limited time I could spend there.
In order to have a same level comparison with the old homepage, I made a high-fidelity design to showcase the possible outcome (the following design only represents my personal take on the project, not the Treetopia company).