top of page
Deadlines:
Are we on time?
Bloomfilter is a unique mobile application with easy-to-view insights for real-time health scores. Dramatically improves communication, predictability, and efficiency across your software projects. This is a story of how I made a positive difference by designing a web browser using this application.
To comply with my confidentiality agreement I have gained approval to post these designs on my portfolio as this product bloomfilter is available in the app store.
PROJECT
Project Track
Client internal product that launched its brand after the desktop/mobile app designs secured $400,000 of investments at the 2022 Techstars Chicago. I focused on the application and the screens needed for the web design, so I took inventory of all the mobile screens plus navigation. I decided to divide each flow to capture and break down the data for each screen.
ROLE/TEAM
UX/UI Designer
TOOLS
CLIENT/DATE/DURATION
Figma
User Testing
Zoom
Skiplist, Inc. (Bloomfilter)
11/15/2021 - 01/20/2021
3 Months
MY ROLE
UX Designer
I was the UX designer on the Bloomfilter team and was responsible for creating a desktop experience similar to the existing iOS app design. I led the UX work, producing all major deliverables and presenting them to the client between Nov 2021 and January 2021. I worked alongside the business, product, and the engineering team for feedback.
DESIGN THINKING
Design Roadmap
Design roadmaps outline important phases such as research, creative approach, delivery, and implementation.
1
2
3
4
5
6
UNDERSRTAND
What is the problem? What are business requirements?
DEFINE
Who & What are we building for? What is the user pain points and user needs?
BUILD
How are we going to build it?
TEST
How do the users feel?
ITERATE
How can we improve from user and business feedback?
DEVELOP
Handoff to dev/engineers
THE PROBLEM
How might we create a web experience from an existing mobile app?
Our client approaced us with a simple objective -- to create a desktop/web application similar to iOS experience. First phase included only like to like designs similar to the mobile design and then phase two consisted of adding improvements/features to the UI.
Problems observed from user behaviors
Majority of our tools the users were using were the on web and it disturbed the workflow when they had to switch from web to mobile to check the status of their projects. They wanted a more seamless experience where they had access to all the project tracking tools in one web experience.
Understanding the Current experience
I studied the current design and the design system, font, and color aesthetics to build a similar experience for the web. This was not a time for re-design, and I had to consider the web experience needed to have the same look and feel as the mobile UI.
End Users
Project Managers, Product Owners,
User Needs
Need web access to collaborate with other project management tools. Users need to be able to access the application using an email invite which verifies their access and takes them directly to the password page.
Core Target Market
IT team, Professional working on agile projects. Digital product teams.
Pain Points
Only mobile iOS was available, PM worked mostly on desktop/browsers and needed access from their laptops to see all the projects they were working on. Using mobile app was good for on the go access but they needed a more easy access on desktop so that they can view alongside their project management tools.
THE GOALS
What does success look like
1. Access to a web portal so that users can access the mobile app via a desktop browser.
2. Establish a navigation usable for the web.
3. Secure funding to improve the app functionality and design to launch the app to businesses.
RESEARCH & ANALYSIS
What is our competition doing?
Competitive Auditing:
I came across various dashboard applications to understand how to design a web experience for this application.
​
Research
Regardless of how much time I have on any project, I always take time out to research the task at hand, using the requirements.
In the tech world today 68% of software projects fail. This is why the success of this application was more important for the stakeholders.
WIREFRAMES
Low-fidelity concepts
Wireframes
Since mobile design already existed, I worked on wireframing and prototyping for the web, to have a better visual sense of the layout.
STYLE GUIDE
iOS Brand Guidelines
Style Guide
Apple design resources helped design apps quickly and accurately using Figma, design kits, guides, and other resources.
VISUAL DESIGN
Final Designs
High Fidelity Designs
My solutions helped users sign in to the web and continue their day-to-day activities/tasks. They now have access to both web and mobile at their convenience.
We helped users (Project Managers) to share their data screens on the desktop to show their reports, and graphs of the projects they are managing. This solution provided easy integration into their workflows and accomplished basic tasks without switching devices.
Results
Did it secure funding?
Final designs allowed the business to flourish with another platform. Also, it serves the users who feel more comfortable using a website.
This complete mobile and web application secured funding for this seed startup with Chicago Tech Stars.
This Startup Pitched at Techstars Chicago’s 2022 Demo Day
KEY TAKEAWAYS
Challenges & Conclusion
There were challenges throughout the web design for this app. As I worked through the designs, I noticed that several areas in the app needed a design lift to improve the experience. It was obvious that a mobile screen could have been designed with UX in mind.
The research for this project was challenging because there was no comparable product in the market. I had to use products with a dashboard displaying data similar to our app.
As a UX lead, I gained experience through the transforming challenges that I faced in new design and features from a mobile app to a desktop platform with its complexity.
Other Feature Designs
A case study of all the designs was not possible. So below are images of other iterations/projects during my time with Bloomfilter.
bottom of page