Disclaimer: Designs presented in this portfolio are re-imagined concepts for a new UI/UX design for DIYZ, not the actual app, which can be found here: https://www.diyz.com/
About the app
Once downloaded, DIYZ is an app that provides home-improvement advice & DIY projects to the hands of its users.
Once downloaded, DIYZ is an app that provides home-improvement advice & DIY projects to the hands of its users.
My Role as UX Designer
- Assist the project's design direction as well as communicate and collaborate with
app developers, marketing teams, business owners, and project managers.
- Utilize Scientific Method & Data Acquisition to form valid hypotheses on how to better
improve the product.
- Wireframe, Prototype, Utilize basic knowledge of Bootstrap, Material Design, HTML,
& other commonly used languages to turn ideas into reality.
- Assist the project's design direction as well as communicate and collaborate with
app developers, marketing teams, business owners, and project managers.
- Utilize Scientific Method & Data Acquisition to form valid hypotheses on how to better
improve the product.
- Wireframe, Prototype, Utilize basic knowledge of Bootstrap, Material Design, HTML,
& other commonly used languages to turn ideas into reality.
Identifying the Market:
As of 2012, the U.S. has a total of roughly 87,000,000 home-owners. Of which, this number represents about 65% of the United State's housing market in its entirety.
For the past 50 years this number has remained steady.
As of 2012, the U.S. has a total of roughly 87,000,000 home-owners. Of which, this number represents about 65% of the United State's housing market in its entirety.
For the past 50 years this number has remained steady.
The goal is to provide a service that better helps over 87 million people customize, maintain, and repair their homes with professional advice and project suggestions in the palm of their hand.
The Challenges:
How would one develop a product that not only helps the user in this way,
but that also employs a work force of hardware & maintenance professionals while generating revenue for the business?
Ideation and critical thinking on how to solve this challenge took the form of potential user-flows below. This included 2 flows for both the end user and the professional advisors working to help them.
How would one develop a product that not only helps the user in this way,
but that also employs a work force of hardware & maintenance professionals while generating revenue for the business?
Ideation and critical thinking on how to solve this challenge took the form of potential user-flows below. This included 2 flows for both the end user and the professional advisors working to help them.
The second map below illustrates how the app would enable the professional advisers to interact with it as well as the users calling to video chat with them.
Mapping out the UI:
In order to simulate what type of UX could present such functionalities, first, a high-level UI map had to be drawn to communicate the UI flow a user would experience in the app.
That posed the questions:
- "What does the user want to see in their experience?"
- "What features do they care about most?"
- "What features are essential to the app's success and why?"
Answers had to be acquired from the users of the app.
In order to simulate what type of UX could present such functionalities, first, a high-level UI map had to be drawn to communicate the UI flow a user would experience in the app.
That posed the questions:
- "What does the user want to see in their experience?"
- "What features do they care about most?"
- "What features are essential to the app's success and why?"
Answers had to be acquired from the users of the app.
User Testing:
Data collected from users drove the design direction for the UI map architecture, and UX wireframes. Additional questions were asked in a series of surveys distributed to users both publicly and privately. Answers were received in the form of written responses, multiple-choice feed back, and qualitative ratings on various design comps they were presented with.
Data collected from users drove the design direction for the UI map architecture, and UX wireframes. Additional questions were asked in a series of surveys distributed to users both publicly and privately. Answers were received in the form of written responses, multiple-choice feed back, and qualitative ratings on various design comps they were presented with.
Above: A UI created that emphasizes the user's input taken into design development.
Users requested quicker and more intuitive ways to reach their most frequented services indicated in the largest hexagon boxes.This provides the services they frequent as well as the business's avenues for conversions front and center to the user.
Users requested quicker and more intuitive ways to reach their most frequented services indicated in the largest hexagon boxes.This provides the services they frequent as well as the business's avenues for conversions front and center to the user.
Low Fidelity Design Choices:
Taking the new UI flow into consideration, concepts of the new UX and how it could present the requested functionalities were represented with paper & pencil.
Low fidelity wireframes were drawn, starting the process of what a tangible could look like.
Low fidelity wireframes were drawn, starting the process of what a tangible could look like.
High Fidelity Design Renders:
Quick access to Core Features
Quick access to Core Features
Taking user feedback into consideration, treatments of the design that featured quick access to not only most requested services, but revenue driving services of the app were pushed to high-fidelity mock-ups.
Multi-level functionalities in-app
Navigation was enhanced, focusing on new ways to increase quick access to high-level features of the app.
Inspiration from Google's Material Design was used when creating paper-cutout style iconography and buttons to communicate to the user the availability of additional features per level of the app.
Inspiration from Google's Material Design was used when creating paper-cutout style iconography and buttons to communicate to the user the availability of additional features per level of the app.
Real-estate Optimization
Above: Because the app offers a lot of content for its users to browse, taking advantage of how to maximize screen real estate is very important to best present information. By shrinking the call-to-action animation-clip located beneath the search bar when the user scrolls down, the project content display increases in size by 165 pixels. When the user scrolls back to the top of the screen the call-to-action clip reverts to its prior size again.
The Take-aways:
- The success of this design was determined by receiving user feedback & involvement
early on into the process. Data acquisition and analytics allowed decisive actions to be
made in an attempt to solve challenges.
Final iterations of this design welcomed positive responses.
- The success of this design was determined by receiving user feedback & involvement
early on into the process. Data acquisition and analytics allowed decisive actions to be
made in an attempt to solve challenges.
Final iterations of this design welcomed positive responses.
- Application of semiotic principles behind design as well as a non-over-encumbered
aesthetic and placement of functions made app navigation easy and intuitive.
- Working with an understanding of what can be done on native app environments for both
Android & iOS minimized the need to revisit the drawing board excessively via
functionalities that couldn't work: A "Form follows Function" approach.
aesthetic and placement of functions made app navigation easy and intuitive.
- Working with an understanding of what can be done on native app environments for both
Android & iOS minimized the need to revisit the drawing board excessively via
functionalities that couldn't work: A "Form follows Function" approach.
Conclusion:
This is a conceptual retake on a redesign to a successful app.
You can find DIYZ on your local App & Google Play Stores, or learn more below:
https://www.diyz.com/
Thank you
This is a conceptual retake on a redesign to a successful app.
You can find DIYZ on your local App & Google Play Stores, or learn more below:
https://www.diyz.com/
Thank you
