RESPONSIVE WEB DESIGN / REDESIGN
Triton Promo Inc. is a marketing company that offers promotional products, service awards, business gifts, fulfillment programs and creative concepts. Since its inception in 1985, they have established an extensive global vendor network that stretches across North America to Europe and Asia. Their clients include large and small organizations that need to generate maximum promotional impact in support of their marketing activities and investments.
TIMEFRAME: 12 WEEKS
TOOLS: SKETCH, INVISION, PHOTOSHOP
The primary objective is to improve Triton’s website to convert users into clients and to generate more business through increased sales. It is also intended to educate users on the company’s services and capabilities.
The first step was to identify the problem and conduct the preliminary research to understand the industry, as well as the pain points of the current website. To understand its users, I created a survey and interviewed 5 people to understand their motivations and to determine what factors would influence their decisions when selecting a marketing company.
Insights from Surveys:
Analysis of Competitors
A competitor analysis was conducted with the purpose to glean insights from the data I collected, enabling myself to make informed UX design decisions. While assessing some of the biggest competitors of Triton, I was able to understand what features were most important to include and gauge where the company stood in the market. This also enabled me to evaluate the strengths and weaknesses of the competition and help solve usability problems.
From my research and experience working at the company, I constructed 2 user personas to represent different targeted users.
Persona 1 represents a young, driven Marketing Director working at a large corporate company. She represents clients who like to be heavily involved with the order process and prefers things to be done as fast and efficiently as possible.
Persona 2 represents an older, self made business man. He prefers everything to be taken cared of by the team and has little interest in being involved with the process. He just wants to ensure that he is receiving a quality product and that his order will be completed by the scheduled date.
I asked a few individuals to perform some tasks to assess possible pain points users may face while using the old website. For each task, they were asked to vocally explain everything that was going on in their head.
From the usability tests and interviews, I was able to identify 4 visible pain points that users were experiencing:
Pain point 1: All inquiries must be done over the phone. Couldn’t order products through website
Pain point 2: No up to date online catalog to search for products and pricing
Pain point 3: Website is not very informative
Pain point 4: Company processes were inefficient
Examining the pain points, I came up with solutions for each problem and addressed them accordingly:
Solution 1: Design a more user-friendly product search engine, improve the user flow and allow for orders to be placed online.
Solution 2: Utilize the website to create an up to date online catalog for users to search for products and find pricing. This allows for client control and can eliminate time spent on the phone discussing their needs.
Solution 3: Include key facts and information about what the company provides, how the company provides its services, as well as its vision and core values.
Solution 4: Incorporate client logins for company profiles. This will allow them to access their order history, saved products and allow for an easier process. This can also assist with company uniform programs and fulfillment programs.
I went through a series of sketches and iterations to redesign the user interface and address the pain points that were identified
Annotations for Re-design
I expanded the About Us page so it could provide more information about the company and designed key features such as the login button and categories for the product search.
It was also important for me to include the company’s mission statement and a short paragraph outlining the company’s services, as many users throughout the testing process were not clear as to what the company provided.
As customers need social proof and brand assurance, it was essential to include client’s testimonials as well. Building trust in the brand is key, and showcasing customer testimonials would highlight the company’s key benefits and promote the company’s customer experience.
As you look at the previous design, the testimonials took up way to much space on the home page. I chose to organize the testimonials as a slider, so it would still be as effective, without cluttering the page.
A user flow was constructed from the point of view of a client to identify the users steps to search for a product and place an order online.
Once I had the wireframe sketches done of the user flow, I proceeded with designing low fidelity wireframes on Sketch. I tested a few variations of the design, keeping in mind the pain points that were identified. The main user flows I wanted to focus on were:
Searching for a specific product (T-Shirt) and ordering it online.
Signing in and learning about the company
It was essential to ensure that users would be able to find products with ease and that all categories were accessible to them. Once clients also signed in, they would be able to access their art files and order history.
Once I had the low-fidelity wireframes completed, I utilized the prototype function with sketch and tested it with users again, documenting their experience. From the tests, some of the main features that needed to be revised were:
Triton Process :
Didn’t need to be included on the Home page.
Needed to be formatted differently as the text may not be legible with the 4 across format. I chose to change the layout to a z-pattern.
Once I had the hi-fidelity wireframes completed, I wanted to assess if it would be functional and easy to navigate for the user. So I proceeded with final usability tests to identify key insights and receive user feedback regarding the redesign. After consulting with the team and drawing conclusions from the final tests, there were some final changes that I made to the user interface:
Navigation bar was changed to include 2 separate nav bars:
First navigation bar included the About Us page, Contact, Search bar, Sign in button, and cart button
Second navigation bar included the product categories