Elizabeth Creary
Senior UX UI Designer
Dreeven App
A web and mobile app that revolutionizes the construction industry by digitizing their daily workflow.
Client
Dreeven Technologies Inc.
Industry
Construction
Role
UI UX Designer, Developer, Scrum master, Coordinator
Date
March 2019 - August 2021
Dreeven Technologies is a French Quebec company with a mission is to build a one-stop-shop web based application and an integrated native phone application that supports all players in the construction industry.
My Journey
I joined Dreeven Technologies back in March 2019 as a developer and coordinator. I worked mainly as a FE developer and actualized designs in Vue.js, SCSS, & Javascript. I also worked as a webmaster for the word press website during my time at Dreeven Technologies.
Within three months after joining, I established the UI UX department. I orchestrate an entire design department that revolutionized user experience and raised the platform to new standards. With meticulous attention to detail, I created people-centric solutions. I wrote bilingual user guides for the platform and tested the application.
In addition to my designer responsibilities my organizational skills were put to use with scrum master related tasks. My duties were officially recognized upon completing my certification through Scrum Alliance in 2020. I wore many hats at Dreeven. So I gained first hand experience and opportunities to collaborate with experts across domaines such as management, marketing, software development, and construction.
When I left, the platform was trusted by 37,000+ users and back by leading construction companies all across Quebec!
Case Study: Dreeven
My tasks involved redesigning and improving a client application, enhancing user experience, and modernizing the overall branding and digital presence. My role was as the lead designer, responsible for driving the design strategy, collaborating with stakeholders and developers, and ensuring seamless implementation.
The challenge
The client’s construction management application faced significant challenges in transitioning superintendents, foremen, and project managers from paper-based workflows to a digital platform. These users were deeply accustomed to managing tasks through physical documents, creating resistance to change. The app needed to support complex, multi-phase construction workflows—ranging from budgeting and scheduling to safety checks—while ensuring accuracy in real-time, often under challenging site conditions. Additionally, the lack of clear feedback mechanisms and inconsistent branding hindered user adoption, and the app's usability had to be optimized for on-site environments with limited internet connectivity. Overcoming these barriers required balancing user needs, industry complexities, and a seamless digital experience.
Client Workshops & User Research
I led in-person client workshops to understand their goals, pain points, and vision for the application. I also conducted an on-site analysis to observe user interactions with the app. This insight helped inform the design process, prioritize key improvements, and software adoption.
Information Architecture & User Flows
I created a new information architecture and user flows to simplify navigation and make the application more intuitive. This was grounded in design thinking, ensuring that every design decision was based on solving real user problems.
Wireframes & Mockups
I developed wireframes and high-fidelity mockups using Figma, a tool chosen for its collaborative and cost-effective nature. I also established a design system within Figma that focused on consistency across the app and future scalability.
Positive User Reinforcement
One of the major challenges to adoption was the lack of user feedback. I introduced positive reinforcement within the app, such as success messages, helpful prompts, and actionable feedback, moving away from the previous system that only featured error messages. This helped foster a more engaging and supportive user experience.
Stakeholder Collaboration & Approval
Throughout the process, I worked closely with stakeholders to ensure alignment. I presented the designs for approval and, once finalized, translated them into actionable Jira tickets for the development team to execute.
Cross-Functional Collaboration
I collaborated daily with a team of developers (ranging from 2 to 6 members) to ensure seamless integration of design elements. I recorded French specifications in Jira, provided test cases for user testing, and worked directly with developers to troubleshoot and refine the implementation.
Coding & Implementation
At times, I contributed directly to the development process by coding designs in Vue.js, SCSS, and JavaScript. This hands-on involvement ensured that the final product aligned with the vision and design specifications.
Branding & Documentation
I created a cohesive brand identity across all platforms, including a company branding style guide, which helped maintain consistency across both digital and offline touchpoints. I also maintained bilingual user guide documentation, integrated directly within the platform to support users in both French and English.
Website Redesign & SEO
I redesigned the client’s website in WordPress and optimized it for SEO. This resulted in improved search rankings and better user engagement. The website’s design was aligned with the overall brand and application redesign.
My Approach
I applied design thinking principles throughout the project, starting with deep user research to understand the needs and pain points of construction professionals. By iterating on solutions through prototyping and continuous feedback, I ensured the final design was intuitive, efficient, and aligned with real-world workflows, ultimately fostering better user adoption and satisfaction.
Previous Design
The old design of the application suffered from several key issues that hindered its usability and overall effectiveness. One of the most noticeable flaws was the use of red as the primary color, which often conveyed a sense of urgency or alarm, negatively impacting the user experience.
Additionally, the iconography was inconsistent and unclear, with many icons failing to intuitively represent their functions. This added to the confusion, making it difficult for users to quickly understand the purpose of different features.
The design also lacked proper spacing, leading to a cluttered interface that felt overwhelming and hard to navigate. Together, these design shortcomings created friction for users, contributing to frustration and hindering the app's adoption.
REDESIGN
I revamped the design with a fresh, modern color palette that swapped out the harsh red for softer, more welcoming tones. I also built a consistent design system to keep everything intuitive, from icons to layout, making it easier for users to navigate. To keep things positive, I added real-time feedback like success messages and helpful prompts, which turned the app into a more supportive, user-friendly tool.
Game-Changing Innovation
Product Name
The new design made everything feel smoother and less overwhelming.
Product Name
Now users get the info they need without hitting roadblocks. And are faster at completing their tasks.
Product Name
The unified look gives the app a professional edge without feeling stiff or corporate.
Technologies Used
Design Tool
Figma, Canva, Adobe XD
Development
VS Code, Vue.js, SCSS, HTML5, JavaScript, Ruby
CMS & SEO
WordPress, Google Analytics, Zoho, Mailchimp
Project Management
Jira, Confluence, Docusaurus
Improved User Experience
The application’s user flows were simplified, and feedback mechanisms improved, leading to higher user satisfaction and better adoption rates.
Design System & Efficiency
The implementation of a design system in Figma allowed for consistency and rapid prototyping across future updates.
Enhanced Branding & Presence
This is the space to introduce the Services section. Briefly describe the types of services offered and highlight any special benefits or features.
Collaborative Development
Close collaboration between design and development teams led to a smooth implementation of the new features and improvements.
SEO Performance
Post-launch analytics showed significant improvements in SEO rankings, increasing the website’s visibility and traffic.
Solution & Outcome
Wrap Up
This project was a comprehensive redesign that involved user-centered design principles, close cross-functional collaboration, and a focus on continuous improvement. By introducing a design system, improving user feedback, and enhancing branding, I helped the client achieve both a better user experience and a stronger digital presence.
Client Workshops & User Research
I led in-person client workshops to understand their goals, pain points, and vision for the application. I also conducted an on-site analysis to observe user interactions with the app. This insight helped inform the design process, prioritize key improvements, and software adoption.
Client Workshops & User Research
I created a new information architecture and user flows to simplify navigation and make the application more intuitive. This was grounded in design thinking, ensuring that every design decision was based on solving real user problems.
Wireframes & Mockups
I developed wireframes and high-fidelity mockups using Figma, a tool chosen for its collaborative and cost-effective nature. I also established a design system within Figma that focused on consistency across the app and future scalability.
Positive User Reinforcement
One of the major challenges to adoption was the lack of user feedback. I introduced positive reinforcement within the app, such as success messages, helpful prompts, and actionable feedback, moving away from the previous system that only featured error messages. This helped foster a more engaging and supportive user experience.
Stakeholder Collaboration & Approval
Throughout the process, I worked closely with stakeholders to ensure alignment. I presented the designs for approval and, once finalized, translated them into actionable Jira tickets for the development team to execute.
Cross-Functional Collaboration
I collaborated daily with a team of developers (ranging from 2 to 6 members) to ensure seamless integration of design elements. I recorded French specifications in Jira, provided test cases for user testing, and worked directly with developers to troubleshoot and refine the implementation.
Coding & Implementation
At times, I contributed directly to the development process by coding designs in Vue.js, SCSS, and JavaScript. This hands-on involvement ensured that the final product aligned with the vision and design specifications.
Branding & Documentation
I created a cohesive brand identity across all platforms, including a company branding style guide, which helped maintain consistency across both digital and offline touchpoints. I also maintained bilingual user guide documentation, integrated directly within the platform to support users in both French and English.
Website Redesign & SEO
I redesigned the client’s website in WordPress and optimized it for SEO. This resulted in improved search rankings and better user engagement. The website’s design was aligned with the overall brand and application redesign.
REDESIGN
