Dukkon Energy App

Solar panels installed on roofs

Objetive:

Design a user-friendly mobile app that allows users to monitor and manage their home or business solar systems. The app should provide real-time data, actionable insights, and easy control over the solar energy system to optimize performance and efficiency.

Type: concept energy app.
Language: English.

App Design Brief: Solar System Monitoring:

Target audience

  • Homeowners with solar panel installations looking to manage their energy production and consumption.
  • Business owners and facility managers who need to monitor and optimize their commercial solar systems.
  • Environmentally conscious users interested in maximizing the efficiency of their renewable energy investments.

Key features

  1. User dashboard:
    • Overview of current energy production, consumption, and storage levels.
    • Real-time data visualization for easy understanding.
    • Quick access to key metrics like energy savings, carbon footprint reduction, and system performance.
  2. Energy monitoring:
    • Live updates on solar energy production and consumption.
    • Alerts for system performance issues or irregularities.
    • Historical data analysis to identify trends and patterns.
  3. Energy production:
    • Monitor energy production from solar panels.
    • Track performance and efficiency of energy production systems.
    • Real-time data on energy generation and usage balance.
  4. System control:
    • Remote control of solar inverters, battery storage, and other system components.
    • Customizable settings to tailor the system operation to user preferences.
    • Emergency management features for safe system shutdown and restart.
  5. Performance reports:
    • Detailed monthly and yearly performance reports.
    • Exportable data for further analysis and reporting.
    • Comparison of actual performance against expected metrics.
  6. User Notifications and Alerts:
    • Real-time alerts for high energy consumption or production updates.
    • Maintenance reminders and energy-saving tips.
    • Customizable notification settings.
    • Real-time alerts for critical system events.
  7. Maintenance and Support:
    • Scheduled maintenance reminders and alerts for required actions.
    • Access to troubleshooting guides and customer support.
    • Integration with service providers for seamless maintenance scheduling.
  8. Analytics and Reports:
    • Monthly and yearly reports on energy usage, savings, and production.
    • Exportable data for further analysis or reporting purposes.

Design and user experience

  • Clean, modern, and intuitive interface for easy navigation.
  • Mobile-responsive design for optimal use on all devices.
  • Clear and visually appealing data visualizations.

Security and privacy

  • Secure user authentication and data encryption.
  • Compliance with data privacy regulations and best practices.

By focusing on these key elements, the app will provide users with the tools and insights they need to efficiently monitor and manage their solar energy systems, leading to optimized performance and increased savings.

User personas

User persona formatUser persona format

Process and challenges

Where to start?

I got some ideas and inspiration for the design of this project from some real applications of renewable energy companies. I took the best and most important aspects of them and applied my personal style to my design.

Background image:

I chose a dark background image instead of a flat background to make it more attractive and apply more dynamism.

Light or dark?

Dark mode isn't just a passing trend; it's a significant feature in modern UI design for several reasons:

  1. Reduced Eye Strain: Dark mode can be easier on the eyes, especially in low-light environments. It reduces the glare from your screen, making prolonged use more comfortable.
  2. Battery Efficiency: On devices with OLED or AMOLED screens, dark mode can save battery life. These screens use less power to display dark colors since they can turn off pixels to produce true black.
  3. Accessibility: For some users with visual impairments, dark mode can provide better readability and contrast, making your application more inclusive.
  4. Aesthetics: Dark mode can give your application a sleek, modern look. It often appeals to users who prefer a more subdued and less intrusive interface.
  5. Focus: Dark backgrounds can help users focus more on the content by reducing distractions from bright backgrounds and enhancing the visibility of key elements.

Dark mode can be a valuable addition to UI design, enhancing user experience and accessibility.

Improving the user flow (sample):

Choosing to place the notification icon on the first screen rather than in the menu list can enhance the user experience for several reasons:

  1. Immediate Access: Notifications often contain time-sensitive information. Having the icon on the first screen ensures users can quickly see and access important updates without navigating through menus.
  2. User Engagement: A prominent notification icon can encourage users to interact with your app more frequently. When users see that they have new notifications right away, they are more likely to engage with the app.
  3. Better Visibility: Placing the notification icon on the first screen makes it more visible and reduces the risk of users missing important messages. This can be particularly useful in apps where notifications play a crucial role, such as messaging or social media apps.
  4. Improved User Flow: Streamlining the user flow by minimizing the number of taps needed to access notifications can create a smoother, more intuitive experience. This can be particularly important for users who rely on quick access to notifications.
  5. Enhanced User Satisfaction: Making important features easily accessible can lead to higher user satisfaction and better retention rates. Users appreciate when an app anticipates their needs and provides a seamless experience.

What's next?

Every UI design can be improved and we should look for unnecessary elements or add and modify parts that allow our users to have a better experience. I'm always open to suggestions and constructive comments.

Mockups

Main pages

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen

Onboarding

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen

System test

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen

Other pages

Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen
Mobile screen

Styles:

Backgroung image:

Mobile screen

Fonts:

Inter 14, 16, 18, 20 px

Font colors:

#E0E1E3

#E0E1E3

Graphics & icons colors:

#1592EE

#EBDA28

#E51313

#49B02D

Katvril Kitchens

Modern kitchen

Objetive:

Create a professional and engaging website for a local kitchen manufacturer in Mexico. The website should showcase their range of kitchen products, highlight their craftsmanship, and attract potential customers and partners.

Type: fictional company concept. Desktop version.
Language: Spanish

Website brief for a kitchen manufacturer:

Overview

The website will serve as the digital storefront for a high-end kitchen manufacturer, showcasing their range of products, craftsmanship, and commitment to quality. The goal is to attract potential customers, provide detailed product information, and facilitate easy communication and engagement.

Target audience

  • Homeowners looking for premium, custom kitchen solutions.
  • Interior designers and architects seeking high-quality kitchen products for their projects.
  • Contractors and builders in search of reliable kitchen manufacturers for large-scale projects.

Key features

  1. Homepage
    • Eye-catching hero image or video showcasing stunning kitchen designs.
    • Brief introduction to the company’s philosophy and unique selling points.
  2. Product showcase
    • Filter and search functionality to help users find specific products or styles.
    • Customer reviews to build trust and credibility.
  3. Inspiration gallery
    • A curated collection of completed kitchen projects with images.
    • Ideas and inspiration for different kitchen styles and features.
  4. Custom kitchen solutions
    • Information on bespoke kitchen design services.
    • Process overview, from consultation to installation.
  5. About us
    • Company history, mission, and values.
    • Sustainability practices and certifications.
  6. Blog
    • Articles on kitchen design trends, tips, and maintenance.
    • How-to guides and videos for kitchen care and renovation.
    • Updates on new products and company news.
  7. Contact us
    • Contact form for inquiries and consultations.
    • Location map and showroom details.
    • Customer support information.
  8. E-commerce integration (optional)
    • Online store for purchasing kitchen accessories and small components.
    • Secure payment options and user account management.

Design and user experience

  • Modern, clean, and intuitive design that reflects the brand’s premium quality.
  • Mobile-responsive layout ensuring a seamless experience on all devices.
  • Easy navigation with clear calls-to-action.

By focusing on these key elements, the website will effectively attract and engage the target audience, showcasing the manufacturer’s expertise and high-quality offerings.

User personas

User persona formatUser persona format

Mid-fidelity wireframes:

Project wireframes

Comments:

1

The first two sections give us an overview of the company, as well as its philosophy and values.

2

This is supported by a description of the manufacturing processes.

3

Some of the models manufactured are shown with a general description of them.

4

Positive customer testimonials with a picture of your project are a must.

5

Awards and certifications that increase the manufacturer's prestige.

6

A catalog of models for the customer to make a more specific search.

7

More detailed information on the manufacturing process.

8

This landing page design has 2 CTA buttons that direct us to a form where the user requests a quote.

9

A list of locations with maps, means of contact and opening hours.

10

It should not be forgotten that there are other types of users such as suppliers, contractors, interior designers, architechs and job seekers.

Mockups:

Home page

Contact form

Locations page

Contact info

Colors palette:

Primary color

#FAE590

Secondary colors

#F9F9F9

#F0F0F0 80%

Accent color

#000 50%

Fonts:

Ubuntu bold

Ubuntu medium

Ubuntu regular

PT serif regular

PT serif bold

Font colors:

#2851E1

#47556B

#313131

Want to see real prototypes?

Webflow is more than just a website builder,  is a popular cloud-based website builder that allows designers and developers to create custom, responsive websites.

Visit my Webflow Design Site:
Live prototypes
Up arrow