Tyler Goelz
Front-End/UX @GiftStarter - Co-Founder @WriteOn - Former @WayUp (formerly Campus Job) - Bearded @OrganicBeardSup - Full-time traveler focused on work-life happiness.
A Responsive,
User-Friendly UI
(Click or slide down)
Responsive Web Design
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience — easy reading and navigation with a minimum of resizing, panning, and scrolling — across a wide range of devices (from mobile phones to desktop computer monitors)
(Click or slide down)
The Goal
Simflofy will be build using the mobile first methodology, unobtrusive JavaScript, and progressive enhancement.
Using these recommended practices, we will create a basic web app, and enhance it for smart phones and PCs - rather than try graceful degradation to make a complex, image-heavy site work on the most basic mobile phones.
Simflofy will be as effective as possible and interact with the user great on any device
(Click or slide right)
"Mobile First" Design
Mobile
Tablet
Desktop
(Click or slide right)
Mobile Devices
Since nearly 60% of the American adult population own a smart phone, it's about time apps are built with them in mind.
(Click or slide down)
Simflofy's Mobile Approach:
We will be one of the first of our kind. We will be an enterprise level app that works on any device.
Instead of limiting which device a user can use to access Simflofy, we will make sure that their life is made easier on the device they use the most.
Below you will find wireframes of Simflofy accessed on a mobile device.
(Click or slide down)
List View
Modeled after the top brands in the world, Simflofy's list view will be intuitive and easy to use.
A user will have quick, direct access to all their documents. Each item will have the document type, name and an action button.
Note: The action button can provide an unlimited number of tasks to be performed for each file.
(Click or slide down)
Grid View
Users will have the option to view their documents in a grid.
A grid view provides the user with a more visually pleasing interface and allows them to identify documents quickly.
Note: When a user clicks the search icon, an input will appear overlaying the view options.
(Click or slide down)
Flyout Menu
Since mobile devices have limited space, Simflofy will utilize a flyout menu.
In this menu, a user can create/upload a document, filter their current results, and access the system settings.
Note: Filtering options will be fully customizable from admin. Menu will also be scrollable to show all options.
(Click or slide down)
Document Info
Clicking on an item from the list/grid view will bring the user to that document's information.
A user will have full editing capabilities of the configurable information on this screen.
Note: The document's information can change per document type, or as specified by an admin.
(Click or slide right)
Tablets
Following smartphones, 42% of American adults own a tablet and an increasing number of tablets are surfacing in a business setting.
(Click or slide down)
Simflofy's Tablet Approach:
Following the leading enterprise and small business applications, we will hold a tablet version of our site to the highest degree of importance.
Users will have the freedom of mobility and more accessibility than what might be available on a mobile phone.
Below you will find wireframes of Simflofy accessed on a tablet.
(Click or slide down)
List View
A bigger screen allows for more information.
Along with the details and actions viewable on a mobile device, the user will also see a short description, tags, and document type.
Note: The menu will be hidden and a small icon-only menu will show for quick creation/uploading/settings.
(Click or slide down)
Grid View
Beautiful displays of large images, titles, details, and an action button are great to quickly find an image or document differences and revisions.
(Click or slide down)
Flyout Menu
Although the tablet offers an icon-only side-nav at all times, a user can open the flyout menu for full filtering capabilities.
Note: When the menu is visible, the search and filter options will be hidden.
(Click or slide down)
Document Info
Large, very clear document information will be provided for each document.
(Click or slide right)
Desktop
Desktop applications will always hold a place in the hearts of companies and their employees. Although there is a huge increase in mobile and tablet use, the desktop isn't going anywhere.
(Click or slide down)
Simflofy's Desktop Approach:
Our desktop app will be focused and effective. Our mobile first approach allows us to focus on the most important features and trim the rest.
Users will enjoy a robust, highly intuitive system with all available features, including those on mobile and tablet versions.
Below you will find wireframes of Simflofy accessed from a desktop.
(Click or slide down)
List View
The large search bar spanning the top of the screen will bring focus to the ability to filter and find exactly what is needed quickly.
(Click or slide down)
Grid View
In Grid View, action buttons will appear when a user scrolls over an item.
(Click or slide down)
Document Info
A slide out pane will dynamically load document info streamlining the user's experience. Rather than reloading to another page, everything is accessible from one place. 
(Click or slide down)
Wireframes, great! Now what?
Whelp, I'm gunna tell you.
(Click or slide down)
Rapid Prototyping.
Instead of moving into the next traditional step of static Mockups, we dive directly into interactive, usable prototypes.
Utilizing today's best tools, we will achieve the same iteration capabilities as going from wireframe-to-mockup-to-prototype but lightyears faster by combining the mockup and prototype phases.
(Click or slide right)
Thank You, from Ya Bois!
We thank you for your time and the opportunity to help create a product that will help people across the world. There is more to flush out and gain traction on, as well as process and required resources, and look forward to a timely and fun ramp up.
If you have any questions, feel free to email Joel or Tyler.
Tyler Goelz
Joel Serino
@thinq4yourself | t4y | Email
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License, until contract and/or employment agreement is executed, whereas the intellectual property and any potential copyright will be transferred to the co-signed Simflofy IP Agreement.
A Responsive, User-Friendly UI
By Tyler Goelz
