Limor Shoval
B2B enterprise web application as a SaaS platform for workplace management
As UX/UI design lead, I created Design Guidelines to ensure adherence across products and pages, to improves user experience as well as meet industry standards.
Define the Challenge
-
SpaceIQ creates data-driven workplace management tools.
-
Our users have different levels of familiarity and intuition with web applications.
-
The challenge is to create a design that allows a fast learning curve for our users.
Delivery and Feedback
The updated UI language and components were presented to key stakeholders and the customer success team. Everyone was excited by the new direction.
Overview
SpaceIQ is leading the digital transformation of the modern workplace with intuitive space management tools and insights that allow data-driven real estate decisions.
Discover the User
-
SpaceIQ’s users are real estate decision-makers and organisers, working at various levels in the company. Space planners, Move Co-ordinators, HR and Executives.
-
To perform work-related tasks users use:
-desktop
-laptop
Developing a Solution
-
I updated the UI language, simplified the overall user experience, and improved usability across the product
-
The key areas I worked on were:
- Design System
- Product Navigation
- Tables design
- Mobile Application design
SpaceIQ Split View Design
Key achievements
-
Introducing split-view allowing better utilization of real estate.
-
Improves workflow by presenting relevant information for frequently used functions.
-
Redesigned icons to enable quick learning and align with industry best practices.
-
Eliminate nesting and pop up menus where possible
-
Updates to key design elements such as color and shapes.
Vertical Menu
Vertical menu bar Icons
Redesigned icons to enable quick learning and alignment with industry best practices.
Search bar
Changed shape to align with design guidelines.
Filter
Proved to be a frequently used action. Modifying the design to be more visible for the user.
Expanded List
Expanded list
Improves workflow by presenting relevant information for frequently used functions.
Dropdown
Eliminate nesting and pop up menus where possible.
Button and
Action Tags
Button
User-friendly filter management.
​
Action Tags
It allows fast and accessible use of filters, filter management, and viewing of filtered results.
Page Layout
​Redefining main page view
​
-
Visual design update to improve user experience as well as industry standards
-
Improves workflow by presenting relevant information for frequently used functions
Current
Design Proposal
SpaceIQ Design System
SpaceIQ Design System
Modified design create a unified look with the same visual indicators while avoiding conflicting behavior.
When coming to create a new design system I took a few things into considerations:
-
Created a unified look, feel, and behavior to the same components across the app in order to create a clean and clear design and to reduce the user learning curve across different components.
-
Created a color palette that gives a fresh unique look, that jives with the new brand color language.
-
Designed components that have the same language, work together as a whole, and won't interfere with the workflow.
Color Pallete
​
Redefining the color palette to maintain a clean and moderate look and feel and to avoid overload and cluttering.
​
​​
​
-
Blue Color - Unifying the use of the blue color as standing for a call for action and attention-grabbing.
-
Greys Colors - The greys I chose are with a blueish tint in order to create a calm look. I also named the colors with the action they represent.
-
Brand Colors - Create a blue that creates a dialog with the brand blue color.
Left Side Navigation Design
New Design
Changing the design concept
​
-
Visual design update to improve user experience as well as industry standards
-
Changed categories representation from icons to text in order to improve workflow, increase the learning curve and create a clear and clean design
-
Shapes - Aligning with industry best practices by adopting rounded shapes.
-
Section indication - for better user experience
Current
Design Proposal
Key achievements
Redefining behaviors, functionality, and colors standards for sections drawers and 'child' sections :
​
-
Section Drawers - Added drawers in order to give the user freedom to control the long list.
The drawer's default state is open in order to increase usability and give the user the option to see all categories.
Designed behaviors that indicate when the drawer is open or collapses when a 'child' section is selected or not.
-
​Indication Behaviour - Changing color, background, icon direction, sideline.
-
Colors - New blue colors that match the new brand color
-
Recent (searches) is a new section. I created an 'on hover' and 'selected' behavior that works well with the other sections.
Functionality & Behavior
Section Drawers
Default state - open
Section Drawers - Collapse
When no 'child 'section selected- the arrow flips down.
'Child' Section - On hover state
Indication - grey background
​
'Child' Section - Select state
Indication - Light blue background, blue text, blue sideline
​
Section Drawers - Collapse
When 'child' section selected for indication, the arrow flips down and changes color to blue, text col. change to blue
​
Prototype
Tables Design
Key achivments
-
​Redefining tables behaviors, created one standard that would be easy to follow
-
​Visual design update to improve user experience as well as industry standards
-
Tables hierarchy - introducing expand and collapse view to simplify navigation and visual flow
-
Color - unifying the use of the blue color as standing for a call for action and attention-grabbing (E.x floors in the building)
​
Current
-
Multiple table designs and action indicators
-
Multiple functionality behavior
Design Proposal
-
One functionality behavior- expand and collapse view indication to simplify navigation.
-
A level hierarchy for better visual flow.
-
Introducing blue color as standing for a call for action and attention
Rows State and Behavior
On Hover
Indication behaviour:
Grey background
Item link- text blue+blue underline
​
Selected Drawer Expend
Indication behaviour: the arrow flips down and changes color to blue, 'child' item text col. change to blue. Expand blue line appears on the side
Section- Last Row
Indication behaviour: Last row border line
mark in dark grey
​
Checkbox Selected Row
Indication behaviour: mark with light blue background, and blue checked box
Components
Key takeaways
-
Re-designed cards, tags, buttons, search.
-
Updated and unifying seat tag design
-
Created one positioning and real estate hierarchy that would fit all search lists.
Cards & Tags
Card
Unified design by reposition items and creating items hierarchy.
​
​
Tag
Unified design, add information by color and text inorder to make the tag's info more usfull for the user, espacially when it appears in a list.
​
​
Current
Design Proposal
One Design , Diffarent Uses
Page Design Proposal
Search & Buttons
Button
Redesign botton to a rounded shape that meets industry new practice. Changed from filter icon to dropdown "call for action" icon inorder to increase usabiliry
​
Title
Changed the title size from 21px to 28px
​
Search
Changed shape to rounded and increased size field, inorder to meets industry new practice, and make it more noticible.
​
Current
Design Proposal
