T By Daniel
Web design revamp completed during my 2018 summer internship at T By Daniel.
Research, visuals, prototype
May 2018 - Aug 2018
Figma, Illustrator, Photoshop
T By Daniel is a Brampton-based tea company that focuses on providing customers with the ultimate tea experience both online and in-store. Currently, their website allows online customers to purchase loose leaf tea in bulk. However, the site is quickly becoming out of date as new products introduced in the store (such as new teas, chocolates, bowties, tea ware, books, etc) have yet to be updated on the site. This discrepancy causes frustration and confusion among many online customers who are looking to buy T By Daniel’s new releases. So in the summer of 2018, I was tasked to redesign the website to eliminate this confusion, as well as to refresh the layout and colour scheme in light of the company’s new brand image.
The big question
How might we improve the current website to better reflect in-store products to online customers?
The revamp of the website focuses on the use of more images and illustrations, clear navigation, and bright colours to express the new theme as well as to provide customers with a more visual experience to aid in their shopping.
The new website now allows the purchase of chocolates, gifts (tea ware, accessories etc), and bowties. Additionally, the store menu is included in the navigation to give customers a better idea of what teas and snacks are currently being sold in the store.
I approached this problem by gathering data about T By Daniel’s average customer. After spending numerous weeks in the store understanding the relationship the staff has with the customers, I began to better understand the problems in the current website. From these observations, I crafted user personas that summarized my findings:
Since several new pages were needed for the revamp, wireframing became an integral step for this project as it allowed for a greater experimentation of ideas. Pictured below is a sample of wireframes I constructed whilst keeping in mind our goal of crafting a more visual experience. The idea was to move away from text-heavy pages by showing, rather than telling. This meant having vibrant headers at the top of each page to better guide users, as well as including various images throughout each page to stimulate and retain user-interest.
After a long four months, the final solution is enables users to navigate through the website more efficiently and to purchase products more easily. The website is a step up in many ways including:
The addition of a navigation bar at the top of the page enables the user to more easily access the wide variety of products that T By Daniel has to offer. This improves the user experience as it reduces frustration around accessibility of website content.
access to more products
Creating separate pages for chocolates, gifts, etc, not only ensures that website content is organized and easy to access, but also allows users to more easily purchase their favourite products from the comfort of their own home. This improvement goes hand-in-hand with the updated navigation bar as it aids in eliminating the frustration users felt about the lack of updated products on the website.
The extensive use of bright illustrations and images in this redesign more accurately reflect the positive vibe of the T By Daniel store. Additionally, incorporating a brighter, more feminine colour scheme lightens up the online experience and appeals more to the average customer (who, for T By Daniel, are often middle-aged mothers).
What made this project interesting for me was the amount of detail and thought needed to craft a better experience for online customers. From preliminary research, to wire framing, and to creating the final prototype, every step was an incredible learning experience.
A key thing I learned in this project was the importance of consistency across all pages. Before this project, my screens sometimes did not follow seamlessly from each other. However, designing multiple pages for one website has quickly taught me to follow specific guidelines and to keep a consistent theme with buttons, typefaces, and layouts. I learned that this, in turn, creates a more cohesive experience for the user, and also makes the hand-off to developers much simpler.
Another important thing I learned through this project was how to create an execute a schedule. Since many additional elements were needed for the website such as product photography, illustrations, and icons, it was important to allocate time for each task in order to finish everything by the deadline. From this experience, I can confidently say I have gained a clearer understanding of the time it takes for me to complete certain tasks, which has overall helped my planning and productivity.