Julia Nasser
UX designer
Made with

T By Daniel: Website Redesign

May 2018 - Aug 2018

The Problem

T By Daniel is a Brampton-based tea company that provides customers with the ultimate tea experience both online and in-store. Their website allowed customers to purchase loose leaf tea in bulk. However, the site quickly became outdated as new products introduced in the store (such as new teas, chocolates, bowties, tea ware, books, etc) had yet to be represented on the site. This discrepancy caused frustration and confusion among many online customers who were 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.

Research & Development

T By Daniel: Website Redesign

Personas

In the research stage of this project, I conducted informal and casual discussions with T By Daniel's customers to ask them about their online and in-store experiences. Their responses helped me formulate a general idea of the consumer base and how I could approach the redesign. Some common pain points among many customers were as follows:

  • Frustration over the inconsistency between online and in-store products  
  • Overwhelming blocks of text make it hard to sift through information 
  • Confusing navigation with no option to filter results

In reviewing these pain points, I decided that the redesign should include a clearer navigation, an efficient filtering system, more bright and engaging visuals, and the option to purchase in-store objects online.  


T By Daniel: Website Redesign

Wireframes

Using Figma, I created low-fidelity wireframes to map out pages and create a balance out of both images and text. 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.

Final Solutions

T By Daniel: Website Redesign

Website Improvements

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:

  • Clearer navigation. The addition of a navigation bar at the top of the page as well as a dropdown menu 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, bowties 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.
  • Brighter experience. 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).

Scroll on the mockup to see the full page!

Scroll on the mockup to see the full page!

Final Prototypes

Below are sample screens of the final website design. Feel free to also check out tbydaniel.com to see where the site is now!

Takeaways

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 lesson 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. 

If you're lucky enough to have found Julia you must know that you have found a true gem. She is creative, completely talented, and a very quick worker, which I think is such a valuable trait when you're running a small business and need a fast turn-around for your design requests. She always leaves me in awe of her work, even when I throw new challenges her way. She's also such a genuine person, and over time has become one of the most valuable members of the T By Daniel team. Thanks for everything Julia!

Renata Lewis, Co-founder of T By Daniel