Direct Energy Order Status Page
The Ask
When users placed an order with Direct Energy, there was no space for checking in on your order status. Users would complete their order, and receive an email telling them their order was being processed and or completed. The goal of this project was to design a space for them to be able to check back into their online portal and see what their order status was, and if there was any information needed, they could input it in this new space as well.
Tools Used
Adobe Creative Suite (Graphic Design)
Usertesting.com (User Research)
UXPin (Prototype Design)
Figma (Prototype Design)
Design Process
User Login Page V1
With an idea in mind the flow was created. We wanted users to input an order, receive a link in their email to this secure site which allowed users to login to their order status page. This is one of the first iterations of that login page.
User Login Page V2
Through team feedback and utilizing our design system we had in place, I had designed this version as the final design. It applied more color and iconography that was present throughout the Direct Energy journey. It was a more cohesive design which brought users a feeling of familiarity when returning to this page.
User Dashboard V1 Happy Path
With the user logged in, I designed a page that would display the information the user was looking for at a quick and easy glance. The timeline of when the order would be complete, the details that the order was placed under, and some other things for the user to explore near the bottom of the page in case they wanted to explore other Direct Energy offerings.
User Dashboard V2 Happy Path
For this iteration, I wanted to treat it as a new service, and in doing so, I explored some creative avenues for this page that were not necessarily in the task outline, but would work within the design system we had established for Direct Energy at the time. In this iteration, I designed out a more eye catching page, which offered users a better flow down the length of the page while still showcasing the information users came for.
User Dashboard V2 Error Path
With all iterations of this project, I designed both a happy path, and an error path. I wanted to be able to present the majority of cases to stakeholders and developers in order for them to properly asses what work would have to be done in order to design this page out. This is the error path for the second version of the user dashboard. Here, the user needs to input information in order to complete their order that is on hold. Once that information is inputted, then the order will process as normal.
User Testing
It was at this point where I took my numerous iterations to the users. I drafted up 10-15 survey questions and asked the testers to go through the website flow, notating and observing pain points, positives and negatives about each version, as well as any user desires that have not been met with our iterations. Utilizing this information I was able to design out a version that would satisfy users and provide the quality of life improvements they were looking for.
Final Version
Utilizing the user testing feedback, I was able to go back and reiterate the design until I was able to design something that satisfied the needs of the users. This design took elements from all of the iterations up to this point, as well as the numerous user surveys and interviews. Once it was presented to the same group of testers and stakeholders, all parties were happy with the end result, creating a new seamless experience for Direct Energy users that we could integrate into our product journey.