UI & UX

Tacoma Fire Logs

About the Project

Our team was tasked with designing a mobile friendly, modern website for a  wood re-manufacturer company, the main goal was to update the website to the standard while maintaining a very simple design the previous website was built with just HTML.

To better understand the needs and expectations of the target audience, the design team conducted both quantitative and qualitative research. A survey was distributed to existing users of the brand to gain insights into pain points and preferences. In-depth interviews were also conducted with a group of users who had used similar AR apps in the past.

Our Role on the project 

  • User Research & Analysis 
  • Wireframes
  • UI Design & Prototyping

THE PROCESS


Build. Measure. Adapt. Learn.

  • Formulate and validate the hypothesis
  • Focus on Research results that will benefit users
  • Externalize the notes

RESERCH & PROBLEM DEFINITION

RESERCH & PROBLEM 
DEFINITION

Hypothosis

Going into this project we actually got to sit down with users of the current website who have been clients of the company for 20 years. Majority of the clientele is not very tech savvy and would appreciate a straight forward website so our hypothesis going in is it needs to be a very simple design yet have a modern feel.

Research

We talked to several current users and asked them a few questions. Here is what we found. 

  • 95%  of the current clients like how simple it is
  • 100%  of the current clientele hates how slow loads
  • When showing a test group the current website 15% felt it was an unsafe website 
  • Upon showing our test group the previous website they were unsure what the company did 

Personas

Design Impact

User Stories and MVP

User Flow

DESIGN EXPLORATION

Low Fidelity Wireframes

Low Fidelity Wireframes

We sketched several paper wireframes that allow us to draw out as many ideas as possible with the knowledge of the required elements to the applications design based on users goals, needs, and frustrations. We took these paper wireframes and built digital versions in Figma to build interactive wireframes for test groups to well…test. 

Findings

  • Users found that the design was to crowded
  • Users suggested an ability to view past orders 

Design Solutions

  • We simplified the design even further
  • We added a feature for a confirmation email to be sent to the user about past orders.

Prototyping

Mid Fidelity Wireframing

Findings

Solutions

VISUAL DESIGN

Designed For Simplification

After a few iterations and multiple tests we designed the final screens with Figma We conducted a final A/B test on some elements we were still unsure about during that process we finalized, defined, and implemented the final design patterns, elements, and colors.

Our goal was to make a simple and cohesive experience making the primary use of the site about information and to the point for loyal and consistent clients for decades. Many of which stated themselves “barely know how to use email.” It was important that we don't over complicate anything.

WRAPPING UP

What did we take away from this project

Loyalty Matters. On this project we had a unique opportunity to actually talk with several clients that had been involved with the company for decades, before websites were even a thing. It was kind of refreshing talking to people who just wanted the website to work and be as basic as possible. We still updated it to a new modern look and the clients really enjoyed that and felt like they were a part of the design process which was enjoyable. 

You can always  learn something new. This project definitely isn't the most complex website we ever built but there's always an opportunity to learn something new. We used video’s for the about us section on that site that were recorded in 480P. We wanted to use them but they felt very outdated so we put them through an AI program that converts the resolution to 720P by filling in the missing data using artificial intelligence which we didn’t even know was possible.