.png)
Helps professionals and property owners gather, design and communicate
.png)
6 weeks
UX/UI Designer
ā¢ 4 UX Designers
ā¢ 1 Project Manager
ā¢ User stories
ā¢ Wireframes
ā¢ Prototype
ā¢ Dev handoff
ā¢ Figma
ā¢ Slack
ā¢ Miro
ā¢ Jira
Drams Tech is a B2C mobile app that aims to automate and simplify the pre-construction process. It connects property owners with the right AEC consultant, making it easier to connect, communicate and complete projects together.
In order to better assist their users, Drams Tech wanted to introduce a consultant's perspective for their mobile app that closely resembled the previously introduced homeowner's portal.
Our team provided Drams Tech with a consultant's portal that included a dashboard which allows for easy access to important features and simplifies the process for consultants. Additionally, we enhanced user-friendliness by updating the 3D feature's functionality.
.png)
We began the project by reviewing the current product and familiarizing ourselves with project brief, which included a detailed scope, the client intake form, and project files from Phase 1 (the homeowner's view).
Next, we had a meeting with the client and the internal team where we discussed the project scope and business insights. During this meeting, we also discussed ways to seamlessly align the consultant's portal with the property owners' portal.
After defining what features would be apart of the MVP based on the information gathered from the multiple clarifying meetings with the client and a bit of research, we created a list of user stories that would capture what a consultant needed to accomplish while using the app. We sorted the stories by priority and prioritized the following based on what we felt were must haves:
I took the lead on creating flows for registered and unregistered users who want to view available projects. As I was mapping out the flow, I knew that simplicity was key to making sure consultants could use the app without feeling like they were drowning in information. I also collaborated with 4 other designers on the account, profile and 3D scanning features.
Seeing as we were creating a portal for an existing product, I had to ensure the designs were consistent with Phase 1's guidelines. Using similar elements and sizing, helped to do so. I relied on my team's feedback and research to help with consistency and the design's usability.
I used the flows to help determine what screens were needed and then began sketching out some ideas. I then took to figma to begin designing wireframes. I worked on different ways that I wanted to layout and organize the available projects. Ā In order to ease navigation and make room for more relevant content, I condensed the tiles into a
.png)
As the designs began to take shape, I started focusing on the visuals for the app. Using the previous style guide, I assisted in adding fresh colors, text styles, imagery, and components. I kept the additions to a minimum and maximized the elements already being used.
.png)
When working on the different iterations of the dashboard design, I realized that consultants need to have easy access to the projects they're working on. So I made a call to put the recent projects section right at the top of the page for maximum visibility. I had to prioritize other important features accordingly because I was working with limited-screen real estate.
The client chose option 3 because it was the most similar to the homeowner's side of the portal while offering unique elements that complemented the app.
When designing the profile screens, we aimed to create a structured and organized layout with clear headings and labels. As there were sub-flows involved, we opted for a minimalist design approach to maintain simplicity and clarity.
The scanning tool was innovate but not easy to use. So we focused on improving the usability while retaining its innovative features by allowing them to undo an action, adding confirmation prompts and providing clear instructions to help them navigate.
It was critical that we make it easy for users to see important project details right away, so I added an overview of project details. By doing this, I hoped to provide a user experience that kept users engaged and informed.
.png)
After the final designs were approved, I created a prototype to give the client and dev team an idea of what the new flow would look like. I then prepared the designs to be sent off to the client. This included annotating comps to clearly explain my designs. I believe this step was very crucial because it allowed for a seamless transition. You can view the prototype here.
We successfully created a user-friendly and updated product that addressed the issues faced by Drams by incorporating and modifying necessary features preferred by consultants.
We take immense pride in our work and are finding ways to measure its impact.
Client Feedback:
āā
"Thank you so much for your work. This is amazing! I love what the team was able to create in such a short time."
- Al Dram, CEO of DRAMS Tech
1. Throughout this project, I learned the importance of resourcefulness. As the domain was unfamiliar to me, and with limited time and restricted access to users, I had to think of different methods to use. Instead of conducting interviews or surveys, I was able to leverage forums and app reviews as alternative sources for research and design inspiration.
.png){kind=small}
.png)
.png){kind=icon}
