Limor Shoval
SpaceIQ Mobile App helps to find and book available meeting rooms and hotel desk
As UX/UI design re-designed the SpaceIQ mobile App. Revising positioning and real estate hierarchy to address flow and frequently used functions.
Overview
The SiQ mobile platform is a B2C application focusing on Employee Experience that allows employees to easily find people and book desks and meeting rooms
Discover the User
-
The SpaceIQ mobile app users are the company’s employees.
-
The App helps users to find and book available, nearby meeting rooms and hotel desks.
Developing a Solution
-
I updated the UI design and improved the UX flow
-
This process included
- Re-designing screens
- Adding titles and instructions
- Re-designing components
- Simplifying the visual flow
Define the Challenge
-
The mobile app builds on a platform that doesn’t allow for interactive maps.
-
As a designer, I needed to create a solution that will be easy-to-use, and intuitive.
Delivery and Feedback
-
The updated designs were well received by the product and engineering teams as it was easy to implement the improvements.
-
In addition, the customer success team was very satisfied with the new design flow and our quick response to customer's needs.
Mobile App UI Design Improvments
Key achievements
-
Re-designed the SpaceIQ mobile App
-
Updates to key design elements such as color and shapes.
-
Revising positioning and real estate hierarchy to address flow and frequently used functions.
Home Page Implementation
Search bar
Proved to be frequently-used action.
Modifying the designed to be more visible for the user. Revised position and changed shape to align with design guidelines.
Booking
Designed to improve button visibility and
revised the real estate hierarchy.
​
Attention to Branding
Prioritizing at higher hierarchy.
Search Empty State Implementation
Search bar
Shape was updated to align with design guidelines.
​
Empty state graphics
Updates includes the use of orange,
the secondary color of the pallet,
representing SpaceIQ branding.
The text was added to guide the user.
A higher position in order to prevent being hidden by the keyboard when typing.
​
Home Page - Results Implementation
Search bar
Shape update to align with design guidelines
and positioning in the body instead of the header to improve accessibility.
​
Booking buttons
Revised position and changed design to be aligned with the design guidelines.
Improves accessibility.
Hoteling Desk Reservations UX Improvements
Key achievements
-
Create a new UX flow for desk reservations on the mobile app in order to make it more intuitive for the user.
-
Re-design cards that increase usability and help the user to do the right actions such as scrolling down or swiping to the left.
Select Floor
Screen Implementation
Instructions
Added instructions as a title to the building list.
Card
Changed card size , in order to enable accessible scroll down for the user, added ‘select desk’ button to make sure that the user understands the next action
​
Pin Sign
Pin sign changed to a dot to avoid confusion with interactive maps.
Select Desk Screen Implementation
Floor Map
-
Floor maps image should be zoomed out in order to see all available seats.
-
Maps show only available hotel desks and common areas, in order to reduce unnecessary ‘noise’.
​
Pin Sign
Pin sign changed to a dot, selected card associate with the blue dot.
​
Card
Reduced card size In order to make swipe accessible.The user now sees that there are more cards - options.
Home Page - Results Implementation
Card
-
Added ‘view map’ button which redirects the user to see the desk located on the map.
-
Added assets and notes info to the card.
​
"View Map" Button
Added “ view map” button to orient selection in the floor map.
New booking confirmation UI design
Booking Conformation
Revised the confirmation notification with simplified yet more effective design.
Prototype
