Wireframing
Prototype linking
Current app
1
For the initial start, I wanted to work on the header, trying to figure out the placement of the logo and what kind of style i’d like the top of the pages to be.
2
I then found myself disliking the gradient and went for a simple orange logo on a birch background, I also began to figure out the dimensions and placement of the cards, and the corner radius I found would look the most visually pleasing. This was then I also started to design the navigation bar and work out where I wanted the assistant icon to be situated.
3
I started to work more on the nav bar, creating an active visual style and worked on how I wanted the elements to be placed in the card at the top of the screen.
4
I didn’t like the way the dark background looked against the onscreen elements, but apart from that, I began to work more on the nav bar , trying to figure out how I wanted it to look in terms of layout and colours, I also made the decision to change the top part of the page from birch to the E.ON Orange and the background of the pages to birch, allowing me to use white as a secondary colour. To add to the visual style, I added a frosted glass effect to the cards.
5
In this stage, I tested the current prototype out on my phone and realised that everything was just too small, so I began resizing everything to make it comfortable on a mobile screen. I also added a new section to display a user set budget and what the current usage is, along with adding an estimation line.
6
This section I dedicated to the homepage content creation where I created cards displaying information. I also decided that I didn’t like the look of the navigation bar so I deleted it to start over.
7
I decided to start working on another page with the initial idea of creating a page solely to display current tariff info, this is where I also created the tariff card allowing it to feel dynamic.
8
I began having second thoughts on the dedicated tariff page and decided to just ass the tariff card to the home page when you scroll down. I also started redesigning the nav bar, with a more standard approach, seeing if it also looked better with or without text. To make the assistant stand out, I added a shadow and made it pop up from the nav bar.
9
I dedicated my attention to the design of the nav bar, where I removed the floating effect and instead rounded the edges and made it look like it was connected. tothe bottom of the screen, I also added the same glass effect used within the cards as the background of the nav bar. To create a clear way distinguishing between selected and not selected, I added the selected icon to be orange with an orange hue.
10
In this section, I began creating a stats page displaying the usage per month.
11
I then found it would be better to create the lines be dynamic bars based on the usage and added the days in on the left along with a clearer navigation section on the top to switch what month your looking at.
12
This was the first page where I integrated an active visual on how the assistant would work, displaying dynamic prompts based on the page content.
13
Moving my attention to the assiatant UI, I created a popup that would slide up when the assistant is pressed and give you the ability to quickly and easily chat to the assistant on the same page.
14
Here I showcase the new nav bar where I’ve perfected the spacing between each element and showed the fine details like the gradient behind the text.
15
I found that jumping straight to the monthly stats was a bit too basic, I wanted to add more information on where energy is used, and how much along with showcasing the user’s eco impact, I was struggling on what to add on this page so for now, I just added an energy type bar where I could possibly add the percentage of green energy used, and categories of what the page will show.
16
In this section, I began to add shadows to the cards, further creating the 3D effect i’m looking for.
17
Back to the usage page, I began working on content cards starting with electric vehicle charging info showing the user the amount of energy used this week compared to last.
18
Following up, I duplicated the card creating 3 cards each dedicated to specific areas where energy is used and also created! Thats right! I wanted to add a way where users can have. a look and see how their solar panels are working and how much energy they are getting out. of them, with the bar showing the maximum production rate and the coloured part showing what their currently working at.
19
Now to tackle the top part, I didn’t like the odd look of the section selectors above, they felt a bit useless and the impact section looked out of place, so I unified them, by adding them in what appears to be 1 card when its actually 2, just separated using the background, I also wanted to further improve usability by adding colour keys just below the subheading, reinforcing what each colour means, one thing that I have been doing for quite some time is adding shadows to most elements like bars and cards. The category cards in this page have now been turned in to just content on page, separated by a very slight differentiation in background colour.
20
I wanted to make AI more than just a second thought, so I created a page dedicated to just that, where tips and information can be displayed, I created the orb using shapes and diffused using a circle with a background blur effect.
21
I’ve created an account page displaying all options for settings, current tariff and more.
22
Making the assistant more than just a second thought part 2. I began by adding a dedicated card on the homepage with a mini orb and text explaining what it is and how it can help the user, I wasn’t too sure what else to do so I left it for a bit and moved back to finalising the AI page.
23
I took the suggested prompts idea from each page and added them in a simple list showcasing the latest 3 along with adding a text field where you can alternatively just ask something else, I also brought over the shadow effect and added the gradient to the background too.
24
Making the assistant more than just a second thought part 3. I decided to give the assistant a name, E.ORA, taken from E.On but Ora inspired by the orb, I perfected the appearance of the card and text displayed along with adding. get started bottom which would direct the user to the E.ORA page.
25
I also added an express version of the card on the account page removing the information text and providing the user with an easy way to use E.ORA.
26
For more detailed stats, I created a Home Statistics page where my intentions where where IoT devices like smart bulbs and plugs could be integrated to measure energy usage, and this page would showcase that.