EcoPet Haven App
Landing Page • Web App • Branding • Personas • Wireframes • Flowcharts • User Interface
2 Week design
Project Overview
The goal of the project was to design an ecological pet store to improve the lives of pet and owners a like. Aside from shopping the platform also has a social aspect and it allows the users to engage with other users to share your plans and experiences.
My Contributions
I was the only designer on the project so everything you see I created myself. I was involved in everything from defining the brand and personas, creating flows and wireframes, all the way to creating final UI designs as well as designing the logo.
Starting with the basics. Who, what and why.
EcoPet Haven provides you with environmentally-friendly pet products straight to your home. Your pet gets a personal ID with an option for professional vet advice.
Defining the flow
After that I proceeded with creating a flowchart showing how the platform would be organized. The client had some features in mind so I made sure to discuss them and include them in the plan.
Wireframing
After we defined the flow and thus what screens we needed I proceeded with creating the wireframes to explore the experience in more detail on a screen-by-screen level. The main focus was the trip planning flow which sits at the heart of the app.
Visual exploration
Next I moved to exploring the overall look of the app. I did this by creating 2 landing page mock-ups using the same layout but different styles. Taking this route instead of creating mood boards helped communicate different directions we can take more vividly as the client could clearly see the impact each direction would have.
Logo exploration
Final Logo
In the end option #1 was chosen so I proceeded with refining it. The main change was spacing - I used one circle as a measurement unit adjusted the spacing all around the logo. This step also included picking the colors and for the I proposed a few different options based on our target audience and the clients ended up picking the Light green you see below.
I started with strategy and defined the brand and it’s target audience. Since it was a new company I started by defining the brand attributes and created a brand statement. Regarding the users I was happy to find out that i had already been talking to the target audience and had a lot of insight so it was only a matter of consolidating the findings to form a user persona. Both of these documents guided our decisions during the rest of the project.
Final UI
After the logo was complete I proceeded with designing the final landing page and user interface for desktop, tablet and mobile.
Out of the 2 landing page concepts I presented, #1 was chosen as the way forward. It was time to develop it further through UI and logo exploration. For the logo I explored a bunch of different options and once again narrowed it down and presented 2 options, all 2 inspired by the landing page concept.
Learning Outcomes
From working on this project, I learned how crucial it is to go into the research phase with no biases and no solution in mind. The interviews and secondary research will likely provide insights that were not apparent before, and that is what the solution should be based on. It is easy to think of a solution beforehand, and only takeaway information from the research that confirms your initial beliefs, however, this will not solve the users true pain points.
I have also learned that it is critical to experiment early on, especially during the sketching process, because as you progress in the project, it becomes increasingly more difficult to make changes. Taking your time to experiment with different app designs early on, will save time down the road.