THE PROJECT

Web Design

UX Design

 

Trinity Time is a watches design brand based in the UK, Inspired by space travel with a combination of elegant, creative and futuristic. The brand mainly focuses on selling well-designed watches online. My goal was to design a website for the brand selling products and providing service online.

DESIGN PROCESS

As a startup business with limited resources and time, the best I can do was prototyping and testing at the same time after the research and flow design, and refining the prototype with user feedback.

USER STUDY

I interviewed with potential customers to know what they prefer on a fashion accessories website and the feedback showed the following:

  • it’s phone friendly – Tim
  • A simple and clean outlook can let me focus on the products – David
  • easy to navigate and find out the product I need – Thomas
  • a well-designed website gives confidence to me to shop – Karen

SKETCH & WIREFRAME

Based on the brand identity, research and user study, I was planning to launch a simple website that focuses on showing the product without any distractions. I started with sketching on the paper to visualise my idea and the overall structure. 

WEB STRUCTURE

I started working on the site structure after I had a basic visual idea from the wireframe process. Basically, my aim was to keep the header navigation simple, and the other information links such as term, shipping and private at the footer.

PROTOTYPE & TEST

Although the website was building up with WordPress and Elementor, I launched an MVP demo to gather some feedback for helping me keep improving on it. the aim of this MVP was to gather feedback on the visual design and interaction details.

DESIGN ITERATIONS

After the MVP being tested by some of the customers, I refined the design based on the feedback

More clean and organised header

I moved the logo aside and centred the Navi to keep everything well organised and clean.

Re-arrange the footer setting

I highlighted the main Navigation with the bold title, and keep the less important information under the social icon.

Add navigation bar to other models within the same series.

I added a navigation bar at the end of the product page that can direct the user to visit the other products. 

DESIGN-SYSTEM

TYPOGRAPHY & COLORS

VISIT THE WEBSITE HERE