Tinkerlust - A Fashion E-Commerce that focused on preloved luxury brands.
My Role
After venturing as a Freelance Designer, I joined Tinkerlust as the only UI/UX Designer in the company collaborating closely with product managers, developers, marketing team, merchandiser team, graphic designers, business analysts, and stakeholders to develop the new version of Tinkerlust website.
Over the course of 12 months, I revamped version 2.0 of the whole Tinkerlust website both for the Desktop and Mobile versions, working on the new features in parallel as well as making continuous product and funnel page iterations throughout the whole time here.
Some other projects besides Tinkerlust that I took care of were: Tinkerjoy, Tinkerstyle, StellarW, and multiple platforms revamps.
Revamp Goals
The beginning was rebranding for Tinkerlust. Then I found out that there were things that could also be improved from both the UX and UI perspectives. Because Tinkerlust is an E-Commerce website, the first goal I had in mind when planning this revamp is to build a more user-friendly website with a clear funnel flow so the users who are also customers to Tinkerlust will be able to browse through the products and buy them without any problems. Not to mention the website was quite outdated in terms of the UI compared to the other e-commerce websites, thus the rebranding was at the right timing.
Research and Explorations
For the research, I was working together with the PM to collect some qualitative and quantitative data needed such as competitor research and user research. Because Tinkerlust had existed before I joined the team, we were able to collect data from the existing customers who have been using Tinkerlust for a long time and from new customers as well. We then explored any issues they have ever encountered during their journey in browsing through the web.
We also conducted usability testings for the existing website to see how the users interact with the website directly. With it, we were able to extract some constructive human insights. Generally from the data and the UT, they were able to browse through the homepage with ease. The most frequently met weak points were trying to find products on the product page, and the payment process where they had to fill in their data like address and such. Users, especially customers also apparently did not know how to use the customer dashboard well, even though it was an important page where they could access many of their personal and useful information there.
New Face
From the research we have done prior to this designing process, we found out that there were not many problems found on the old Homepage, so there was not as much change as the other pages. Nevertheless, it was still an important thing to work on because this will be the first page that users will see when opening tinkerlust.com.
The Homepage was the first page I was working on along with the rebranding project. While the branding team was working on the new brand for Tinkerlust, I was working on the wireframe for the homepage. Working with the old homepage as one of the references, I switched some of the flow for some sections that were there and designed a new layout with a more modern and elegant look fitting for a fashion e-commerce website.
From the video above, you can see the new design for the New Homepage. What was changed there was not only the whole User Interface but from the User Experience perspective, I moved the what-we-called-as-the "Notification Ribbon" to the most top of the page above the navbar because it is usually used to show the active promo we usually have.
Then for the navigation bar (navbar), it was also redesigned with a new look and layout. It was already categorized at first but the new layout made it look neater and cleaner. The new addition was the new arrival section in each category's menu. Besides that, I have changed some menus using icons instead so it won't look too crowded there. Because it was a new thing to use icons, I made the icons to show their label when the cursor hovered over each of them.
Below the navbar were the main banners which were made to be full-width, when it was not before, and scrollable. The two banners below were called mini-banners specially made for the "Blog" post and "Featured Sellers". The changed for these two mini-banners from the old design was that the text and button were separated from the images instead to increase the SEO to the website.
Continuing on there was the "New Arrivals", I did not really change much of it just made it neater and cleaner by removing some not-needed info on the homepage. Of course, this decision was also discussed with the merchandiser team and the marketing team who handled the products in Tinkerlust. I also moved the "numbers of items" to below the New Arrivals title, while the button was moved to below the new products instead of keeping them at the product slot on the old design.
Following the main banners, the "Community's Favorite", which had been moved to below New Arrival, was designed to be full-width with all of the 6 favorite brands listed there. In this revamp, the community's favorite was planned to show live products based on the brands instead of the static images to increase the interest in the products and brand itself.
The promo section's design was what changed most in this Homepage. Prior, the promos previously were made like the old mini-banners, that was the text combined with the text. But, in this revamp, I separated the text and the images yet again for better SEO results. Then the banner for the main promo itself was redesigned to the new layout instead of following the same similar design to the main banner which was full-width-banner. The other promos were made into 3 per row instead of 2 per row (old design) and varied into 2 sizes, square and landscape for the visual variations in favor to not make it look too symmetrical and repetitive.
Next, we have the "Featured Sellers" section which was also redesigned to be full-width following the main banner. Then last but not least section, there was the "Testimonials" section which was totally revamped from the old design as well. Previously it was just in a small corner at the bottom page and only showed one testimonial at a time, but in this revamped, I made it its own section which shows 3 testimonials at once and even scrollable with navigation arrows and auto-slide to show there were more than 3 testimonials available.
For the footer, I redesigned it to make it look neater, cleaner and fitting the new brand. I also moved the "subscribe" section to the footer instead of at the end of the homepage beside the testimonial. That was for the Desktop version.
As for the mobile version, it is not much different from the desktop version because it is still a website and not an app. However, despite that, because I intended to design the whole website to be user-friendly on mobile and with PWA in mind, I designed the mobile version to look like a mobile app. The navbar separated into a sidebar and bottom bar, just like how any mobile applications have a bottom menu bar.
The sidebar was more for the menus navigating to the categories available and to other projects that Tinkerlust have like the Tinkerjoy, while the more personal menus like cart, wishlist, and profile (also served as the customer dashboard) were put to the bottom bar, along with the brands for easier navigation.
Another thing that was quite different from the desktop was that the promo section was made into two per row instead of three like the desktop version because if it were made into three as well, it will look too small on mobile. Besides that, they were more or less the same as it was made to be responsive.
Customer Dashboard and Profile
Customer Dashboard is where users, particularly Tinkerlust customers, can find their personal info like order history, wishlist, addresses, and profile. This is also where the customers can ask for a refund for their orders.
Customer Dashboard is one of the other pages that was revamped most from the original one. I added a sidebar for easier navigation to the pages available in the customer dashboard. On the dashboard homepage, I also added some of the lists for the order history, wishlist, and address as they were the main focus of the info found on the customer dashboard. As they only showed recent ones, users can find the full list of each section by going to each of the respective pages.
The order tab goes to the order page where users can view their order history and their order status such as pending, complete, and canceled. Users can also complete their pending payment for the pending orders from this page. For Refund, I created a new tab solely for it because of how the refund system in Tinkerlust is built. At first, I planned to have the orders be refundable along from the order page, but since the products sold on Tinkerlust varied from different stores, it was decided to be better to have a separate refund page instead.
Different from the order page where the list was based on orders, the refund page listed the items based on the products that have been bought by customers instead. It was more similar to the Wishlist page instead of the Order page. Here users/customers can easily select the products they want to refund directly instead of having to go through the order history like on the Order page.
On the address page, users can manage their address, be it editing existing addresses, or creating new ones. What's new here besides, of course, the overall layout and design, I added some new functions like the add new address, and label feature which would be useful for the many addresses that the customers have. The label part is optional, but with it, users can label their address either as Home, Office, Apartment, or other things they have in mind.
Then there was the Wishlist page where all of their favorite items go to. I also added a new feature here where users now can select more than one item to delete the sold-out products or to add the available ones to the cart directly. Finally, there was the profile tab that leads to where the users can find and edit their personal data like their name, birthday, and so on.
The customer dashboard on the mobile version can easily be accessed through the bottom navbar by choosing the "Profile" menu. On the header were the profile photo and user's photo. The "Become a Seller" button will direct users to the "Start Selling" page where users can register as a seller (will be explained further in the next case study). Below that, instead of the sidebar menu like on the desktop, it was a slide-able horizontal menu because the sidebar is still used for the main menu for the Tinkerlust website.
Another that differs from the desktop version is that the mobile version does not really have the dashboard homepage, instead, it goes directly to the order page. It's because it is more user-friendly for the mobile version which has limited space in comparison to the desktop one.
Animations, Do You Need?
So far before the revamped, Tinkerlust website look like a static website to me because there was no transition or animation whatsoever. That was why in this revamped, I also added some simple animations and transitions that could help with beautifying the website more, making it more interesting and appealing so the users would want to stay longer on the website.
It might not be much but it could be seen around the preview videos above and the one on the left which was a preview of the product page that will be explained further in the next Case Study.
With animation, it helps with showing how the features flow around the whole page and website. It's especially useful when you are presenting the website to others.
In A Sense...
This work was still far from done because I had to revamp the whole website and so far it was only the Homepage and Customer Dashboard. My work continued on as I had to work on the funnel flow and the seller pages for Tinkerlust, and I will be explaining them in another Case Study in the near future.
It had been a ride of roller coaster working on this revamping project as I had some struggles, I won't lie about it, but I also learned a lot from this. I learned how to conduct proper research and compile all the data needed for a better design thinking process before all the wireframe and mockup parts come. It was also a ride in working on it as the sole UI/UX Designer, although I did discuss with the other teams which were involved in building the new Tinkerlust together.
Overall, it was a very interesting experience, and it's not over yet. So, let's meet again in the next Case Study where I will explain more about the Funnell Process and Flow of Tinkerlust.