Neoera
Website + Identity Redesign
PS
Neoera Architecture + Design, an architectural design studio, needed an update to the original branding and website as they were not reflecting the company's maturity. Neoera required a more refined and timeless look to support their growing needs.
Hypothesis
Updating and standardizing the brand identity to a more clean, functional, and refined aesthetic would uplift and give more variation to their vision. By using these principles to rework the information architecture of the site and the addition of a CMS, the site would also become more user friendly and easier to maintain.
Outcome
Design Neoera a global image that defines its core values and ensures trust to grow their local and international client base.
Neoera
Update Identity + Website Design
PS
Neoera Architecture + Design, an architectural design studio, needed an update to the original branding and website as they were not reflecting the company's maturity. Neoera required a more refined and timeless look to support their growing needs.
Hypothesis
Updating and standardizing the brand identity to a more clean, functional, and refined aesthetic would uplift and give more variation to their vision. By using these principles to rework the information architecture of the site and the addition of a CMS, the site would also become more user friendly and easier to maintain.
Outcome
Design Neoera a global image that defines its core values and ensures trust to grow their local and international client base.
Brief
Previously, collaborating with Neoera Architecture and Design on branding for an architectural project, they reached out to me to assess their existing website to evaluate areas of improvement. It was evident Neoera had significantly outgrown their humble beginnings and were in need of a new website and branding reflecting their progression into a new category of studio type.
Principles
Digestable
Loosen up Neoera's brand and site to give the user time to breathe and focus on the relevant information
Stand apart from direct competitors
Update the typography and color pallet while alternately investigating unconventional but rigid layout patterns
Easy to be updated and maintained
Enhanced information hierarchy
Easy to be updated and maintained
Incorporate client flexibility through the use of a CMS
Design Process
Discover
Define
Ideate
Design
prototype
Test
Discover
Site Audit
First, I completed a site audit to find any and all areas that needed to be reworked. This helped in strategizing the steps that would be involved in finding a solution that would fit their needs and goals.
Annotated Notes
Annotated Notes
To kick-off the project, I conducted interviews with Neoera's team to educate myself with their goals, gather information around their design process, map the services they provide, and get to know their client base and other high-level topics. Through this process I also collected as many company resources as possible to get further insight into their world. With a deeper understanding of the client's business goals, values and culture, I was able to frame a thorough strategy that was catered to their intricate needs.
I prefer to keep this phase as text based as possible to iterate quickly to not spend valuable time orchestrating elaborate graphics that will need more effort.
"Neoera makes great design accessible to everyone. Neoera will be a profitable business providing functional, beautiful and unexpectedly delightful spaces. Everyone deserves experiencing beautiful environments. At Neoera we do so with exemplary service and attitude."
Drive more business and revenue: specifically in commercial, public work and residential
Drive great clients who care about valuable design
Design fees become conversational form - client
Funnel newsletters and press through web site, publishing all articles and including all press articles
Begin an off-shoot of the web site for product development: furniture/product design
Image for business to be fresh perspective, meaningful work, unique spaces
In all portfolio work, record process of each projects—diagrams, models, etc. and publish on web site with each project
Residential
Interior
TI (Corporate Office)
Commercial
Higher Education
Residential
Interior
TI (Corporate Office)
Commercial
Higher Education
+ Public
+ PD (Product Development: Furniture + Product)
Residential
Interior
TI (Corporate Office)
Commercial
Higher Education
Public
PD (Product Development: Furniture + Product)
The research into Neoera's direct competitors revealed that many architectural sites densely compact a maximum amount of information into each page. The information architecture in general was just as dense and the overall experience was found to be too complex to someone outside the field. This paradigm resulted in cognitive overload for the end user.
1
2
3
Analysis Table
After having all the participants gather a list of their top ten favorite websites, we started a discourse on overall functionality, why certain functions worked, and why other functions did not. I then facilitated team discussions on their selections that pulled them away from their respective biases and pushed them to begin seeing through the lenses of others. As the unseen moderator of the final product, I saw this as critical in repositioning the conversation to focus on the end user.
Define
Content Development
Developing Neoera's voice and tone was critical early on so that we had clarification as to what the overall feel would be. I conducted an exercise to gather and define the high-level voice guidelines. This helped us in making sure we were meaningful and concise with content development.
UX Workshop
Being able to collaborate in real-time on all the copy needed was essential. To do so we created a system using Dropbox Paper. These documents were our North Star in consolidating the copy to meet the overall voice and tone guidelines. These guidelines were then used by Neoeras' contract writer Caroline Joan Peixoto.
Active not passive
Avoid jargon and slang
Positive not negative
Clarity above all
Be genuine
Translate sticky terminology
explorative but not out-of-bounds
adaptable but not moldable
optimistic but not blinded-by-reality
empathetic but not ego-driven
determined but not forceful
path-makers but not typical
bold but not rigid
fresh but not stereotypical
prideful but not pretentious
User Personas
Information Architecture
Mapping the site was the step in creating the informational architecture hierarchy that would allow for seamless interactions from a user centric standpoint.
Ideate
UI Treatments, Type, + Color
.png)
Meno Display + Acumin Pro
).png)
FINAL: Meno Display + Neue Haus Grotesk
To get a good idea of what colors the client wanted I asked she give me some ideas from some sources that she was fond of.
.png)
Mono Color
.png)
Tri Color
.png)
Complementary Color
Design
Final UI
The final UI deliverables were kicked-off with an all hands platform meeting demonstrating the final UX/UI artifacts. Then promptly handed off with the product, development, and QA teams. After handoff each platform was responsible for answering questions and processing the design from development to release, while mediating with the other teams involved.
There were several different variants proposed prior to the final UI. Most of which were around:
The size of singular images on screen
Use of gradients
Landing Page
Home
About
Services
Contact
Prototype
Webflow Prototype
In order to make it less painless on myself I created the initial prototype in Webflow. I could easily stage the website as progress markers were met for my client to view live and critique. This was a considerable asset as I could make the animations that comprised the flow of the site directly into the prototype so the client could witness first hand.
