LOFTECH

LOFTECH PROJECT

To develop a website concept for the architecture company Loftech in a minimalist style. To emphasize the mood of the neo-modern and luxurious style of a developer company. The main goal of the site is to familiarize the client with the company and projects

About Project

Main Task

Solution

The layout with white background, dark brown, and sandy tones were chosen to accentuate the company’s style. The interface is laconic and rational. One block is equal to the size of one screen. It is convenient for the user to view the page, and not be distracted. Main tasks involve: analysis of references and work with structure, composition, visuals and text content

Product Designer: User Research, Marketing Analysis, Persona, Journey Mapping, User Stories, User Flows, Wireframing, Prototyping, Usability Testing, Branding, UI Design

My Role

Jul - Aug 2019, 8 Weeks

Duration

Individual Project

Team

Tools

Figma

Photoshop

MS Word

Design Thinking Process

Discover

Stakeholder Interview
Competitors Analysis
User Research

Define

Personas
User Journey Map
Empathy Map

Ideate

Brainstorming
Info Architecture
User Flow

Design

Test

Wireframes
Visual Design
Prototype

Usability Testing
Implementing Feedback

Competitor Analysis

A global architecture firm that designs transformative, purpose-driven, and highly sustainable buildings across sectors

Full-service architectural firm specializing in residential, commercial, institutional and industrial projects

Launched in early 2010 with a goal of bringing sustainable, modern, practical, and livable design solutions to the forefront of residential design

Who are looking for residential or commercial buildings

Lacking nice User Interface elements

Competitors

Beautiful pictures and good UI elements

No consistency in the location of elements

Companies and the Government choose them to do the projects

Great features, such as Filter and ‘Look on the map’

Pretty simple design with main focus of videos of the projects

Mision/Service

Target Audience

Strengths

Weaknesses

Persona

To have more impact - use fewer words and show more beautiful photos
To get more conversions — I decided to have ‘Contact’ as a primary CTA on the header so that it gets user attention which was missing earlier.
Coherent layout— every section was visually the same and felt a part of the whole.

Ideas:

Pain Points

Lifestyle and Behaviours

Being a first-time landlord
Feeling over-extended
Choosing the wrong area
A market crash

Has a print subscription for the Globe and Mail
Works with a financial advisor
Listens to podcasts daily
Uses Facebook occasionally and LinkedIn for professional purposes
Drives to work

Needs and Goals

43 years old
Married, with two children under 10
Owns a detached home in a Los Angeles suburb
Has a master’s degree
Works full-time as director of operations
Annual salary: $185,000

Wants to make a long-term investment that can evolve and serve different purposes over time

Hoping to take advantage of his buying power and current low interest rates

Looking to make an investment now that his kids will benefit from when they’re older

George Bim

Grid System

Grid for Desktop

1600 px

Grid for Tablet

1024 px

Grid for Mobile

414 px

Services

Navigation

Services

A minimalist style with pictures was chosen as the main point, so that users have an idea of what the building or house looks like and wanted to contact the studio. White&Black colors are suitable to be combined with the minimalist style that was used.

It was a key requirement for the design to be simple enough that anyone can use it. We need to take this to the next level.

Simple

There was a need to design this website with practicality in mind. The website’s design is straightforward. Loftech is a website that offers architectural and interior design services, it makes it easier for you to realize your dream house or building

Practical

Its homepage gives it a modern look. The navigation bar is minimal, with the only five options anyone would look for in an architect’s website: Projects, About, News, Services and Contact.

Minimalistic

Typography & Colors

High-Fidelity Wireframes

Montserrat

H2

H3

25

H4

20

H1

64

35

#1a1a1a

The following phase was developing the details; it needed to end up being ready to fit the organized layout. The text hierarchy, graphics, as well as images, required to end up being coherent with the overall look & feel and delivering the message precisely.

The purpose of the homepage is not to be a library of text and content, but rather, to serve as a teaser and trustworthy guide towards the pages that have the necessary information. A homepage isn't a library. It's a guide towards pages that contain necessary information.

#1a1a1a

Aesthetics

Home page

Contacts Page

Phone, Address and e-mail are provided on this page

This page displays house and their interior in the way make potential clients wanna live there.
It also has main information about the house with all necessary data and description.

This feature helps to create immersive experience for clients, especially when the use desktop version of website.

Page of house

360-degree view - imagine you are there

Service page is a fundamental part of any company website, that serve many functions. It presents a product to the customers, motivate them to get in touch with the company, as well as allow the company to collect the customer's data.

Services Page

The chosen design followed the same style & pattern as the home page with a brief statement at the top that was complemented with a relevant illustration which kept the design of the website consistent and simple.

I also decided to showcase projects of the company to make it easier to understand their style. The positive emotions felt by the user while exploring the structure through the website thanks to the warm colors and elegant design have a positive impact on presenting variety of apartments and houses in the best possible way

Gallery to show the projects

This page is aiming to showcase the projects of the company, and give main data such as size, number of rooms and main amenities, and general description of the property.