LITESPACE: WEBAPPlication PRODUCT
Redesigning Dashboard
for MVP
ROLE
Product Designer
WORK
Interaction Design
TEAM
Product Lead, PM, 2 Full Stack Engineers
TOOLS
Figma, Invision, Clickup
Quick work intro
While working at Litespace as part of their product design team focusing on the UI, where I worked on designing product features for our MVP. I also designed and developed pages, and fixed bugs for our website through Webflow.I had an amazing experience working on various projects with different teams. Working with our design lead, I learned the best practices of designing from ground up, organizing work on Figma & Clickup, preparing my design for the developers, and working on multiple tasks with a deadline.

*Producing designs through the chaos called research and iteration.

View here: Litespace
Context
Overview
Working on the MVP was one of the most rewarding experience, as I was able to collaborate with many individuals in different teams, and take different roles in a SaaS startup. I worked closely with the team to define, develop, and deliver interactive designs for various assignments. The task was to redesign the product dashboard to allow users to perform quick actions and decrease user clicks.
My Role
As a product designer, I was responsible for creating the UI for our product's features and website. I primarily worked with the design lead to create mockups and prototypes for product features. I also worked closely with the marketing team to produce content, design pages, and fix bugs on the website through Webflow. This helped me experience working in many tasks at the same time which improved my ability to meet deadlines while creating quality work.
Problem
Litespace is a SaaS HR tech startup that provides modern workplace management tools for remote and hybrid companies. Hybrid working needs a lot of planning and can be complex. Litespace hopes to break those barriers and hope to bring teams together to maximize efficiency and engagement.
The challenge: How can we decrease user clicks through our dashboard?
The dashboard must show comprehensive overview of data from different relevant sources so that users do not have to click to another screen to get those information and for so decreasing user clicks.
Design Process
Research
The previous dashboard only had user’s status and team status for today, and help and support. After speaking to the stakeholders: product lead with the owners, lead with me. We determined that there are more items to add to decrease user clicks. To determine what items we can include, I started to research other dashboards from other companies.
Brainstorm
I created a moodboard to brainstorm and ideate how each section of the dashboard will look like. Using dribble and our competitive companies websites as inspiration. After meeting with the design team, we finalized a list of items to add along with some component inspirations.

Our main design priorities for our web product are be consistent, universal, and simple. We wanted to avoid adding columns than needed, keeping it a flat design (no shadow or 3d), a simple design that recycles our previous components to make it easier for the developers, and for it to be welcoming and accessible for our users.
Design
Going through UI libraries and the component inspirations we have decided to use, I started to create multiple components and layouts through Figma. After multiple review meetings with the design team, the design is finalized and is organized for hand off and engineer team feedback.
Result
We have received many feedback from various stakeholders and have decided to simplify the dashboard further due to time constraints of finishing it before the launch date. Since I was in the process of finishing another assignment of a higher priority, the design lead took over and made the changes for hand off to production.

The dashboard has the common components that the users will be needing throughout the day.

View here: Webapp Prototype
View here: Mobile Prototype
Modify members on your schedule calendar. Search, choose, and keep track of their weekly schedule
Action feature to guide you to get started with our web app
Quickly update your status for the day and get notified when not inputed for that day
Browse through the latest upcoming events and see who, what and when it is
Receive actions recommended by the litespace based on your account's algorithm
Takeaways
Practice Makes Perfect!
Throguhout my time at litespace, I learned toonsistently elevate the quality of my designs by soliciting feedback from peers and stakeholders through design reviews and presentations. It was a tremendous growth experience to present my designs at numerous reviews, practice guiding open conversations and sharing my point of view, and learn from my mentors when to pushback on stakeholder feedback. I learned how essential maintaining good communication is with my team, especially when asking clarifying questions to remove blockers and balance pressing deadlines.
Extras
Aside from designing features for our web app
UI design for their website
Redesigned most of the website's pages such as products, solutions, blogs, and case study. Afterwards created the pages through Webflow, published these pages, and maintained the blog page & case study page through CMS.
Updated product's user flow & planned the notifications
Updated litespace's user flow and added the new features since MVP release 1. Also planned out the notifications that users will get in-app, email, and slack. Collaborated closely with the design team to create recommendations based on the notifications and user flow created.
Webflow - CMS & bug fixes
Worked closely with the marketing team to publish blogs & create pages through Webflow CMS and fixed any reported bugs found on the website.
This is the end of the case study –
Thank you for reading!