Schema Website & Dashboard
Summary: I created the responsive design system used in the marketing pages & file management dashboard for “Schema”, a collaborative VR model builder for Architects developed by Scenarion (Subsidiary of Archiact VR.)
Responsibilities & Design Deliverables: Wireframes, Hi-Fidelity Screens, Visual Design
Duration: 2 Months, Shipped 2017
Company: Scenarion (Archiact VR)
Overview
Schema is a collaborative VR tool for Architects. My responsibility was to design the website for the product, which would provide general information, plans and serve as a place to login to the file management dashboard. I needed to create a cohesive, responsive design for these pages.
Setting design principles
Together with the product team, we identified some key principles that we wanted to focus our brand and designs around. This was the image that we wanted to portray of ourselves and the product.
Be transparent
”Keep our users updated on our progress. Show them who we are.”
Be customer-focused
”Create content and features that our users want and encourage an open forum.”
Be approachable
”Create a balance of professionalism, while not being too serious and impersonal.”
Sketches & Wireframes
The website had a fairly straight forward IA, with just a few pages to support general information, plans, sign up form and logging in. I created wireframes for both mobile and desktop views.
Visual design: responsive components
Moving on from the wireframes, I started working on the visual design in Adobe XD and Photoshop. I wanted to create components for the site that could be reused for different purposes. Again, I created both mobile and desktop versions. I included the specs in each when I handed off to devs.
Some examples of mobile components
Some examples of desktop components
Sample Screens
Interaction & motion design
To better communicate my vision with the developers, I animated different transitions that I wanted to use on the website.
Iterating on the visual design
Throughout the process, Schema received a facelift on the brand, becoming more professional and sleek. I started to move away from using as many stock photos and instead, captured pictures around the office of our team. I also created more custom iconography in illustrator.
Final Screens
Dashboard
More details coming soon.
