OVERVIEW
Redesigned the app's functionalities to resolve user pain points and enhance user flows
Original Design
Navigation Complexity: Too few buttons, too many functions - users were lost.
Limited Functionality: Missing tools that competitors offer, holding back productivity.
Cluttered Design: Awkward layout and empty spaces made the app feel unintuitive and hard to use.
Intuitive Navigation: Streamlined menu design that makes finding features quick and effortless.
Enhanced Functionality: Added essential productivity tools to give users more power and flexibility.
Modern, Clean Design: Refined visual layout that's both visually appealing and user-friendly, with expanded options for seamless interaction.
Redesign
Orangescrum Baseleaf Redesign
A web app that helps teams work together better. Manage tasks, track progress, and keep everyone on the same page - all in one place.
Team:
Ruhin Gharai
Tina Nguyen
Rachel Rodolfa
Beatrice Ramos
Simran Gunsi
Tools:
Figma
FigJam
Canva
Adobe Photoshop
My Role :
Associate Product Manager
Product designer
Type of Product :
B2B SaaS project management
Timeline :
June 2024 - Nov 2024
Insights
Process
Reflection
The navigation buttons were confusing and lacked intuitiveness, making it difficult for users to navigate the app effectively.
We redesigned the navigation bar to make it more intuitive and user-friendly, organizing features logically for easier access.
The navigation buttons were confusing and unintuitive, requiring excessive exploration to locate features and slowing down workflow.
Since Orangescrum is a web app, we ensured that users could navigate to any page with a single click, eliminating the need to jump between tabs.
Problem 1
Solution 1
Feature 1 : Users can easily access any page with a single click.
Redesign
Redesign
It was hard to access essential features quickly for everyday use, limiting efficiency for small businesses and startups.
We redesigned the dashboard and home screen to simplify access to key features, improving usability and efficiency.
The app lacked essential features like team management, to-do lists, reminders, quick access to messages, and a project timeline, which are crucial for daily operations.
We improved this by redesigning the dashboard and home screen to make these essentials more accessible and visually appealing.
Problem 2
Solution 2
Feature 2: Essential tools are easily accessible.
User persona: Identifying user goals, pain points, and home screen sections that were relevant
Understanding user pain points and frustrations
DEFINE
We analyzed the data provided by the client, which included user feedback, pain points, and insights from beta users and potential customers. This information helped us better understand their needs and refine the user experience to address their specific challenges and expectations.
Table 1 : User Insights and Solutions Overview
Identifying opportunities for improvement from competitors' strategies
After identifying key insights from user feedback, I analyzed Orangescrum’s current design, comparing it to the larger version meant for enterprise networks and other competitors. This evaluation highlighted areas for improvement, helping me identify effective design strategies from competitors that could enhance Orangescrum’s user experience.
IDEATE
Competitors highlighted the need for a customizable dashboard that allows users to tailor their workspace.
Easy access to tasks, to-do lists, and timelines helps users stay organized and manage their work effectively.
Seamless navigation between projects and user details, all while maintaining a clean, well-spaced design to avoid clutter.
Competitor Insights: We incorporated design ideas from competitors to improve usability and functionality.
Ideating solutions to solve pain points and generating process flow
For Orangescrum, I used client-provided data from small business owners and startups to identify pain points like project tracking and team collaboration. I then designed solutions and a user flow to streamline tasks and improve communication, enhancing the experience for project management.
USER FLOW
Optimizing User Journey
Adopting design principles and competitors' good design decisions
First sketched a draft to outline the app's layout and information architecture. Then, using insights from the competitive analysis, I created low-fidelity to mid-fidelity wireframes to refine the design and incorporate effective design patterns.
PROTOTYPE
Sketch:
The initial sketch was the layout foundation but lacked clarity, making it difficult for users to navigate despite its simplicity.
First Design:
The initial layout was completed but lacked visual appeal and clarity, making it harder for users to navigate despite the goal of simplicity.
Final Design:
The prototype is complete, with all features fully functional and visually refined for an intuitive user experience.
Lofi:
The low-fidelity design focused on refining the layout, ensuring easy navigation between projects and providing clear access to the timeline and tasks.
Competitor Insights: We incorporated design ideas from competitors to improve usability and functionality.
Uncovering potential issues and user feedback
After numerous iterations and rounds of testing, we continuously refined our designs based on client feedback. This iterative process allowed us to address key pain points, simplify workflows, and ensure the final product met the needs of both the client and their target users effectively.
Potential Issue
Solution
Initial Design:
Was difficult to navigate for something they were trying to make simple but made difficult for user to understand
Iteration 1:
Changed color , added easier escape buttons and more functions but was missing logo or Homescreen button
Iteration 2:
Client wanted logo in the navigation bar but was repetitive with another search bar and to many nav buttons
Iteration 3:
Client got the logo for homepage , better spacing and easy to go all nav buttons and profile button as well .
Navigation Bar : Iterative improvement after user testing and client feedback
TEST
Prioritizing User Needs
Data-Driven Design
Balancing Aesthetics and Functionality
Focusing on key insights and narrowing down user types helped streamline my design decisions, ensuring the final product addressed the most important user needs.
While the product was ultimately shelved due to a change in the company’s project management strategy, the process was an invaluable learning experience, and here are my key takeaways :
Moving forward, I plan to implement A/B testing to measure the impact of design changes, helping validate decisions based on real user data and statistical improvements.
This project taught me how to combine aesthetics with user-friendly functionality, ensuring the design was both visually appealing and easy to navigate.
TAKEAWAYS
The app's design had excessive empty space and poorly sized elements, making it visually unappealing and difficult to navigate.
We streamlined the design, optimizing space and resizing elements to create a cleaner, more intuitive layout.
We filled the empty space by adding necessary elements and resized buttons to make them more accessible and easier to use, improving both functionality and the overall design.
Problem 3
Solution 3
Feature 3: Optimized Layout and Design
Design System
My teammate and I designed a simple, modern system for Orangescrum, with a professional logo, soft colors, and easy-to-read fonts. We used rounded, high-contrast buttons to make interactions clear and smooth.
Explore More of My Work