COMING SOON!
atlas concorde prototype
TABLE OF CONTENTS
Defining
& Planning
-
Design Brief
-
Competitive Research
-
Market Insights
-
Proto Persona
-
Value Proposition
-
Experience Map
Inspiration
& Design
-
Moodboard
-
Style Guide
-
Sketching
-
Informational Hierarchy, Site maps, Wireframes
-
-
Elements
-
Filter, hovers, sidebars, navigational headers, menus, footers & iconography
-
Diagramming & Prototyping Iterations
-
Wireframe sketches
-
Wireflow
-
Paper prototypes & takeaways
-
Lo-fidelity & takeaways
-
Med-fidelity & takeaways
-
Hi-fidelity & takeaways
Refining & Testing
-
Final Prototype
-
Usability Testing
-
Takeaways
-
Invision
Objective: Create an application that helps interior designers to select the correct tile and brainstorm design options for architectural projects. Below are the key elements that helped me define the structure of the project.
DESIGN BRIEF
User Story
Interior designer who needs to select tile that matches customer requests
Goals
Help designers find tile based on customers stylisitic desires and the practicality of application
Post Launch Tests
Attractability & Willingness to convert: How many designers download the app & how many of them used all three parts of the app
Users
Debated between homeowner and
interior designer
Scope
Narrowed down elements (Tile Match, Moodbard, Tile Calculator, Room Rendering & Rep contact) to just focus on Tile Match and Moodboard
Risks
1. Limitations of the app being from one
tile manufacturer
2. Setting it apart from preexisting apps
Constraints
Time to Launch, Technical, Resources
Assumptions
Focus more on the layout & navigation
of the app rather than the programming
elements
Tools Used
Invision
Sketch
Google Doc
Illustrator
COMPETITOR ANALYSIS
I synthesized the analysis of my competitors into a system that helped me define a design direction (UI patterns, styling & navigation)
I analyzed 6 competitors, focusing my analysis on product features within the architectural design industry. Looked to competitors like Sherwin Williams, Houzz, Chameleon
EXPERIENCE MAPPING
"The Creative"
PROTO-PERSONA
Value Proposition & Jobs to be done
Experience Map & Service Blueprint Sketch
CUSTOMER JOURNEY
STYLE GUIDE & INSPIRATION
MOODBOARD & STYLE GUIDE
The Moodboard helped to focus on what was important as takeaways to the customer and helped figure out how to create the filters and steps in the application as well as help define the design direction
Colors
Complementary to images for the color and secondary color use
Inspiration
Interior Design magazines & color picker from tiles images
Finishes
Focuses on showing the texture of the tile if it smooth or grip finish
Look
Focus on zooming in on pattern to show wood grain
Thickness
Show the thickness of the the tiles in 6mm, 8.5 mm 9mm, 10mm, 20mm
Applications
Show interior and exterior and commercial and residential use
Part of this was to define color use, typography, shading, spacing, and buttons to create consistency and informational hierarchy in the user interface
Minimalistic design less line uses and more subtle shadows, using a sidebar as well as a header to help for mobile use.
STYLE GUIDE
COLORS
Secondary
Color
Accent
Color
Primary
Color
Whites
Grays
SPACING MODULES
BUTTONS
STATUS BAR
TABS
SIDEBAR
Metric Keylines
Vertical Keyline for icons at 16dp from the left and right edges.
Content associated with icon or avatar 72dp
from the left edge
FILTER
Basic Filter
Detailed Filter
Very detailed Filter
ICONS
Social Icons
App Specific Icons
Navigation Icons
Image Upload
Hover
Product
Description Hover
Wood Color Hover
HOVER
CARDS
PROGRESS BAR
LAYOUT
LOGO
DESIGN ELEMENTS & ITERATIONS
STYLE GUIDE ITERATIONS
HOVERS AND FILTER ITERATIONS
Overall Hover
Thought of doing hover with selection on bottom so drops up with more details on tabs
Segmented Filter Options
Told to remove tabs on the bottom so moved those and decided to use text instead of icons because icons weren't universal enoguh for all users
Expanded hover with icons
Told to put icons of each filter and then show the specific features of each. However, once made the icons people said not recognizable and to use text instead
Expanded filter options
Told to include all the different filter functions for tile selection, however, was too busy so went to use the filter option layout and arrows to dropdown more information underneath
Final Filter
BUTTON & ICON EXPLORATION
Basic Filter
Detailed Filter
Very detailed Filter
Removed large bold icons and multi-shaded filters to allow for more design clarity. Used arrows to create accordian style
Wood Hover Iteration 1
Originally used a wood look hover but it was hard to make out the text overlayed on the wood finishes and it was not consistent in sizing and spacing
Wood Hover Final
Final Wood hover using the same card look as with rest of application allowed for design consistency
Sidebar
Lo-Fidelity
Attempted to create icons that were recognizable but was told to stick with only icons and symbols that people only knew
Sidebar
Med-Fidelity
Minimized icons and focused on only the elements of the app not the filters as well in the sidebar
Landing Page Sidebar
Thought of using description of elements of app here but then moved description onto landing page
Product Page Sidebar
After given selected tile thought to have buttons where they can find out more on the product itself and more information on who to contact and next steps.
After feedback told not to add specific features on sidebars and icons based on the page they are in
Final Sidebar
Decided to use only recognizable icons and remove filter on the sidebar and add filter instead. Also combined more product and technical specifications as well as social media icons and icons to lead back to the features of the app.
SIDEBAR
MENU & STATUS BAR ITERATIONS
Experimented with multiple buttons and layouts for the menu bar options. Was told reduce the amount shading and filling all the icons.
Final Status Bar
Removed all the buttons as filter options on the menu bar and just added in a filter option instead. This created a more minimal menu bar and was more easy to see the navigation at a quick glance.
BUTTON ITERATIONS
App Features Buttons
Add on Feature Buttons
Removed the shading and bolding and
just included icons in the final prototype
ICONS
Designed buttons that would explain features of the application as well as the filter of the application
App Specific Filter Icons
App Features Iterations
Moodboard
Iterations for
moodboard
Final Moodboard
Image Upload
Iterations for
Image Upload
Final Image Upload
Room Rendering
Iterations for
Room Rendering
Final Room Rendering
LOGO ITERATIONS
Made sure the logo included our brand color
SKETCHES
Filter Hiearchy
WIREFRAMING
PAPER PROTOTYPE
LO-FIDELITY
MED-FIDELITY
HI-FIDELITY
FINAL-FIDELITY
