MEKAEL WESLE Y-ROSA
VISUALIZER | USER EXPERIENCE
1
TABLE OF CONTENTS
0 1 G R A P H IC DE S IGN 0 2 W EB D ESIGN
pg. 04
pg. 12
0 3 S C IEN C E OF S PORT
pg. 18
0 4 BO OTH HANS E N WE B S IT E 0 5 H IG G IN S AR CH WE B S IT E 0 6 P H OTO G R APHY
2
pg. 34
pg. 22
pg. 28
3
GRAPHIC DESIGN
01 4
HEFF – A west coast DJ’s logo that is meant to reflect the edginess of his music
TRAC – Logo was developed for the Trauma Resiliency Advocacy Collaborative a University of Chicago advocacy group. The look is reminiscent of a 90’s fitness club
T R AC
NUFENCE – A fencing company located in Frisco, TX looking for a look that is reflective of a cow brand
KISSIWARRIOR – This logo is for an African man who wanted his own personal brand to reflect aspects of his native tribe which is known for their skills with spears
HAPMOODO – This karate gym was looking for a complete rebranding of their company. The logo reflects the HapMooDo principle of constant movement
5
A D O U B L E S L IC E O F C AL IF O R N I A S U N S E T
$5.00
DSC_8925, 2016.10.11, 5:06 PM, ISO-100, f/5.8, 1,1000 sec.
A Five Dollar Photo is a concept website in which visitors can “dine-in” at a late night photo stand. You are able to purchase an edited photo + the original photo + the photoshop file so you yourself are able to recreate the edited look on any image you desire.
A DOUBLE SLIC E OF C ALIF ORNIA SUNSET
$5.00
DSC_8925, 2016.10.11, 5:06 PM, ISO-100, f/5.8, 1,1000 sec.
S U P E R M O O N S U ND AE
$5.00
DSC_8925, 2016.10.11, 5:06 PM, ISO-100, f/5.8, 1,1000 sec.
SUPER MOON SUNDAE
6
DSC_8925, 2016.10.11, 5:06 PM, ISO-100, f/5.8, 1,1000 sec.
$5.00
7
8
9
SPIRE BRANDING “An imaginary smoke spiral coming from a campfire near the Chicago River lit by Native Americans indigenous to the area” - Santiago Calatrava
+
10
=
11
WEB DESIGN
02 12
METAMORPHIC X
13
GLADYSRM
14
H E A LT H T E C H N O LO G Y F O R U M
15
DANIEL M. LIEDL
16
WAGNER SPORTS AC ADEMY
17
SCIENCE OF SPORT
PROJECT GOAL
The Science of Sport is an non profit orgization based out of Arizona. They develop curriculum and programming that promotes Science, Technology, Engineering and Mathematics (STEM) through sports. The project involved redesigning their website as well as creating marketing collateral for them.
18
03
19
20
21
BOOTH HANSEN WEBSITE
PROJECT GOAL
Booth Hansen is a full-service architecture firm focusing on commercial, cultural, educational, and residential projects. Their current website was unresponsive, static, and poorly structured. They aspired to improve their public facing image of their overall business through a new and improved website.
22
04
MARKET RESEARCH
60
+ FIRMS REVIEWED
One of the main goals for the Booth Hansen website redesign was that it look “up-to-date”. It was necessary to do market research and analysis on similar firm’s websites in order to help inform the design of the new website. As an output of the synthesis of all the research a list of best practices as well as defining a common layout structure amongst the architecturally focused websites helped lay down the groundwork.
23
WIREFRAME SKETCHES
After doing market research it was important to start sketching potential solutions to address the issues and concerns that Booth Hansen presented. Through these sketches I was able to visualize solutions by defining the framework. I began to provide a concrete and compelling vision of what the website was to be. As responsive design was a major concern for Booth Hansen it was important to look at the website in a variety of scales, formats and all the potential modes that users would be viewing the website through.
24
SITE MAP
L AYO U T I T E R AT I O N S
After much discussion with users it was apparent that the current layout had too many layers. To alleviate this issue a much more streamlined site map was proposed that included more filterable content.
40% REDUCTION IN # OF PAGES
Once the content for each page was paired down the framework was constantly changed through the iteration process in order to ensure that each page was thoughtfully planned out for the various scenarios.
25
FINAL PRODUCT
The final product resulted in not only an aesthetically pleasing responsive design that effectively reduced the number of pages, but that also works across multiple platforms, and responds to all of the goals Booth Hansen aspired to.
26
38
+
%
USERS SPEND 38.61% MORE TIME ON THE WEBSITE
8K
+
INCREASE OF OVER 8,000 NEW VISITORS
50
+
%
MORE VISITORS ARE ACTIVELY ENGAGED WITH THE WEBSITE
27
HIGGINS ARCH WEBSITE IN-PROGRESS
PROJECT GOAL
Higgins Architecture is a full service architecture firm with a sharp focus on residential projects in Arizona. Their current website is unresponsive, outdated, poorly layed out, and difficult to navigate. They are desiring a complete redesign of their website to better serve the visitors.
28
05
STAKEHOLDER INTERVIE W 01 | Can You Describe Your Business?
06 | What Do You Want Visitors To Get Out Of The Website?
• Custom residential design firm • Varied in style • Distinctive custom homes that fit your style, budget, and neighborhood
• • • • • • • • • •
02 | What Makes Your Company Unique? • • • • • • •
Incorporating desire and need into custom designed homes Small size + high quality Caters to individual’s budget We don’t over do it We proceed carefully We treat your money like it’s our own Design discretion
03 | Other Top Firms In Your Industry? • • • • •
Candeleraria and Associates Carson and Poetzi Kent Architects Will Bruder Clint Miller
• • • • •
David Dick Architects Drewett Works Phoenix Architects Dale Gardon Design Blochberger Design
04 | Special Features • Responsive site • Social media ties
Impressive in format Good information Impressive photos of projects Client testimonials User friendly Not gimmicky Timeless Build trust Collaboration Tested and proven
• Passionate about what we do • What it means to build your own home space • We can guide them through the process • Team assembly - team work • Context budget style • Homes that fit your budget, your style, your neighborhood
07 | What Are All The Current Issues Your Website Has? • • • • •
Outdated Unresponsive Non-updatability Poor layout Difficult to navigate
• • • • •
Doesn’t define who we are Not phone friendly Not easy to update Not linked to social media No current projects on it
08 | Websites You Like • • • • •
BIG Diller Scofidio Booth Hansen 180 db Rob Paulus
05 | User Groups • • • • • •
People Renovating a Home Affluent People Age Group 30 - 60 Architects Staff Prospective Employees
To start off the project I conducted phone interviews with each one of the stakeholders. These phone interviews were framed around eight questions. These questions were used to understand the business, frame the problem, and create goals for a successful website. After holding the interviews I created a list of all the common themes that bubbled up to the surface during the interviews. The question and subsequent answers were used as a point of reference later on in the design process.
29
A N A LY Z I N G E X I S T I N G F R A M E W O R K
Current Page Location Not Obvious From Different Text Style Home
Projects
Individual Project
Before + After
STRUCTURE
Renderings Sketches
Logo
Slider Image Images
Press Menu About Us
Mission Services Styles Project Type
People
Project Listing
Project Images
Project Description
Project Image Menu
Contact Too many things to do on this page. Columns and information within them are not clearly defined
To better understand the underlying problems with the UX of the website it was important to analyze the existing framework. This was done in three steps.
SITE MAP - By creating a site map I was able to identify inefficiencies in the sequencing of pages PAGE ANALYSIS - As a user myself I went though the site and analyzed the some of the pain points that were identified in the stakeholders interviews before STRUCTURE ANALYSIS - Looking at the layout of each page it was apparent that some elements were given too little space which affected the overall readability of the layout
30
MARKET RESEARCH
To properly ensure that the website was on pace with other similar companies in the area it was imperative to conduct market research on similar companies in the area. Through that research three main themes appeared that were missing from the current website. Those were a blog, a process/philosophy page, as well as a customer review page.
20
+
LOCAL FIRMS REVIEWED
31
FRAMEWORK DEFINITION Home • Best projects on a continuous scroll with lush photography
Home
Projects
Projects • Featured Work • Grid format with filterable content based on house styles (Spanish colonial, Mexican colonial, ranch homes, contemporary, rural Mediterranean, mountain/vacation) • 50-60 word description of each house style
News + Awards • A listing of all the latest news on current, former, upcoming project, industry events, as well as magazines you have been featured in • Listing of all the awards you have received
News + Awards
Styles
Styles • A description of each type of house you do with the design process you go through on each one
About Us
Practice
Contact
Approach
About Us • Practice - A brief overview of your firm and what you do as well as how long you’ve been in practice • Approach - What is your firms approach to a project and how does that vary from different styles of housing • People - The wonderful people that work at your firm maybe something silly about them
Contact • • • • • • •
People
Contact information Business, media, and media inquiries email Map of office location Questionnaire form Mailing list Social Media Links Jobs + Internship information
Reviews
After the stakeholder interviews and the market research I was able to define the framework and the underlying concepts that would be the base of the new website. This included a listing of all the ideas behind each of the pages on the website as well as a restructured site map.
32
50% REDUCTION IN WEBSITE LEVELS
HI-FIDELITY MOCK-UPS Our Mission | Services | People
Our Mission | Services | People
Name: Mike Higgins
Mike Higgins
Position: Managing Principal/Architect
Position: Managing Principal/Architect
Experience: 24 years, 40 if you count the forts I built as a kid.
Experience: 24 years, 40 if you count the forts I built as a kid. Mike Higgins Managing Principal/Architect
Three Word Bio: Perfectionist, Daredevil, Balanced.
Home Projects Press About Contact
By Day: Refines home designs and then refines them again, and again….
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
By Day: Refines home designs and then refines them again, and again….
Home Projects Press
By Night: Dedicated Father and Husband, Little League Coach, Softball Player, Sleeper.
About Contact
Architecture words to live by: You have to listen very close to what your clients are telling you they want and then edit their desires.
Three Word Bio: Perfectionist, Daredevil, Balanced.
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Why this business: I like helping people and making things. Creating the framework for our client’s lives is very rewarding.
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Mike Higgins Managing Principal/Architect
Home
By Night: Dedicated Father and Husband, Little League Coach, Softball Player, Sleeper.
Projects
Architecture words to live by: You have to listen very close to what your clients are telling you they want and then edit their desires.
Contact
Press About
Our Mission | Services | People
Why this business: I like helping people and making things. Creating the framework for our client’s lives is very rewarding.
Position: Managing Principal/Architect Experience: 24 years, 40 if you count the forts I built as a kid.
Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Phone: 480.990.8897
Phone: 480.990.8897
Phone: 480.990.8897
Three Word Bio: Perfectionist, Daredevil, Balanced. By Day: Refines home designs and then refines them again, and
North Central Farm House Phoenix, Arizona
North Central Farm House Ullestium venime lanti dolorem incia volupidelia dolende si dolor aut reicili quatem quatio voloria cus mi, ut erum rehene doluptatus am veruptae veri si volorehent voloria dolendunt veni que pero eatam event lis ut modi vit rest eatur sint, sinia nempori andicia seque ea proreria verepernatis et at qui nulland ellibus sollupt atemperum, alis dolorita es consed molorem duntusanditi auta quis as sectent, ides vollia sit qui re voloriasped essi con culpa nis aute vent hilique cum hilibea que por rem ipsam apist, ut doluptatia adi rest, quat di unt vollorro vero quo tem quam fugiae enime voloreprate perest ex et est repuda quos as nobisquunt volupture mo totatur am eos rentibus, optaqui culpa dolesti derovidenet eosa des dolo experunt harchit
Ullestium venime lanti dolorem incia volupidelia dolende si dolor aut reicili quatem quatio voloria cus mi, ut erum rehene doluptatus am veruptae veri si volorehent voloria dolendunt veni que pero eatam event lis ut modi vit rest eatur sint, sinia nempori andicia seque ea proreria verepernatis et at qui nulland ellibus sollupt atemperum, alis dolorita es consed molorem duntusanditi auta quis as sectent, ides vollia sit qui re voloriasped essi con culpa nis aute vent hilique cum hilibea que por rem ipsam apist, ut doluptatia adi rest, quat di unt vollorro vero quo tem quam fugiae enime voloreprate perest ex et est repuda quos as nobisquunt volupture mo totatur am eos rentibus, optaqui culpa dolesti derovidenet eosa des dolo experunt harchit Details Type: Single Family Residence Home
Home Projects Press About Contact
Projects
Date: 2014
Press
Press
Status: Built
About
Type: Single Family Residence Style: Spanish Colonial Date: 2014 Status: Built Size: 8,500 sqft Location: Phoenix, Arizona Awards: 2016 Phoenix Home of The Year
Home
Style: Spanish Colonial
Projects
Project Information
About
Size: 8,500 sqft
Contact
Contact
Location: Phoenix, Arizona
Final Photos [4/7]
Awards: 2016 Phoenix Home of The Year
Before & Afters [0/3] Renderings [0/4] Sketches [0/2] North Central Farm House
Project Imagery
Final Photos [4/7]
Before & Afters [0/3]
Renderings [0/4]
Sketches [0/2]
Final Photos [4/7] Renderings [0/4] Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Before & Afters [0/3] Sketches [0/2]
Phone: 480.990.8897
Higgins Architects 3666 North Miller Road Scottsdale, Arizona 85251 Suite 101
Phone: 480.990.8897
Next Project
Phone: 480.990.8897
Next Project
Type: Single Family Residence Style: Spanish Colonial Date: 2014 Status: Built Size: 8,500 sqft Location: Phoenix, Arizona Awards: 2016 Phoenix Home of The Year
Ullestium venime lanti dolorem incia volupidelia dolende si dolor aut reicili quatem quatio voloria cus mi, ut erum rehene doluptatus am veruptae veri si volorehent voloria dolendunt veni que pero eatam event lis ut modi vit rest eatur sint, sinia nempori andicia seque ea proreria verepernatis et at qui nulland ellibus sollupt atemperum, alis dolorita es consed molorem duntusanditi auta quis as sectent, ides vollia sit qui re voloriasped essi con culpa nis aute vent hilique cum hilibea que por rem ipsam apist, ut doluptatia adi rest, quat di unt vollorro vero quo tem quam fugiae enime voloreprate perest ex et est repuda quos as nobisquunt volupture mo totatur am eos rentibus, optaqui culpa dolesti derovidenet eosa des dolo experunt harchit
Next Project
For each one of the pages outlined in the framework definition stage I created three visual options that achieved said goals. These were presented to key stakeholders in order to narrow down the possible options. Once a visual option was chosen a second round of mock-ups were produced to continue refining the design language.
33
PHOTOGRAPHY
06 34
35
36
37
630.453.9096 | mekaelwr@gmail.com | mekaelwesleyrosa.com