ConTech | B2C
UX/UI Designer
6 Designers & 1 Product Manager
5 weeks
User-centered design
Figma, Figjam, Slack
Challenge
Drams Tech has an existing website but wants it to be available on mobile as well but only include essential features instead of cluttering all features on the website.
Solution
Results
Property owners are able to seamlessly able to communicate with professionals for their renovation needs.
Let's kick things off, shall we?
What's Drams Tech?
Construction Tech startup that works on different products simultaneously
A platform that connects property owners to users
Allows for renovation project collaboration
Main objective of this project
Design a mobile version of their existing website but only include essential features with user-friendly and minimalist design.
Discussion of features to create
The client requested for us to create a mobile version of their product but only display the essential information needed to create and view a project. Below are the user stories we came up with and was approved by our client.
As a property owner...
I want to be able to sign in or create an account.
I want to be able to submit a project request.
I want to be able to review the status of my project request.
I want to be able to review my past project request.
How would a property owner create, view, and edit project requests in the app?
Using the user stories that the client provided, our team created user flows that focused on the features that the client asked for. We wanted the navigation of the app to be user-friendly and only include essential steps depending on the feature.
Let's ideate and create a design for our idea.
Ideating and Sketching
I was assigned to check active projects' status user flow. Before creating the screens, I had to identify what information needs to be displayed. The user needs to be able to view project updates, status, project plans, and project documents. This helped visualize how the screens would look, which made the wireframing process easy.
Create a style guide for branding and consistency
We created the style guide based on Drams Tech branding so it is uniform to their desktop version.
Bringing the pieces together
While collaborating remotely on Figma, our team finalized 43 hi-fi screens. During the process, we addressed minor adjustments like spacing, margins, and alignment, ensuring consistency with our style guide. Real-time communication allowed us to assist each other promptly, enhancing efficiency.
Now it's time to hand it off for the developers
Developer handoff
We wanted the developers to understand and create this product as it is designed, so we made sure that all notes were detailed and design specifications were noted.
So, what do I think about this project?
This was a fun project and a good experience for me because the product we designed is for architects and projects related to home renovations/construction. Although there were some hurdles along the way, we were still able to push through and deliver the best product on time. Our team worked on this project day and night because some were available during the daytimes and some were available during the night.
Insights I learned:
How to communicate my ideas better
How to present solutions to the team
Iterate different versions of the same screen with a tight deadline
How to adjust my time so I can finish my task on time
