BACKGROUND
Sav-E is a San Diego start-up focused on sustainability. Its main product is a Chrome Extension that allows users to compare between similar items and see which one is the least impactful on the planet to buy.
As this was a start-up company and and a new brand, Sav-E needed a website that will explain its product as well as promote a good business-to-consumer relationship.
As this was a start-up company and and a new brand, Sav-E needed a website that will explain its product as well as promote a good business-to-consumer relationship.
MY ROLE
I took part in creating the concept of the website including making wireframes and prototypes. I also assisted with the visual design and strengthening of the branding.
PROJECT OUTCOMES
- A bright and engaging experience for newcomers to learn more about Sav-E
TEAM
1 Visual Designer
Timeline
1 month
TOOLS
Figma, Zoom, Google Suite
Overview of pages and sections I've worked on
Research
Insights from the Business Model Canvas
To better understand Sav-E's business goals, I used the Business Model Canvas that the business team made. Due to time constraints, I prioritized their target audience or customer segments.
1) Young (18 - 35) and liberal
This was the main demographic that cared the most about sustainability.
2) Lack of time and motivation
Sav-E wanted tor each people who care about sustainability, but don’t have the time or inclination to search on their own.
3) Scared of big lifestyle changes
Those who want to feel that they are helping the environment without making big lifestyle changes
Persona
Visualizing the target audience
Since the company wasn't able to dedicate time to do user interviews in the beginning, I created a proto-persona to help imagine what the prospective stakeholder would need. This was based on the target audience from the Business Model Canvas.
Sav-E's target audience were those who care about sustainability and want to learn how they can help in an efficient way
Problem Space
After analyzing business requirements, target audience, and the competitive analysis, I framed the problem space to be:
How might we allow people to get interested in using Sav-E to help them participate in better sustainability habits?
Competitive Analysis
Looking into how other competitors market their brand
In order to make best use of my time and to focus on the deliverables, I did a competitive analysis on usability. I researched similar competitors and looked into what information was being displayed and how they were displayed in their navigation and home page.
Out of our competitors, Honey's website was the easiest to navigate and understand
Final Design
Home Page
The home page serves to introduce potential customers to how the Chrome Extension works, the impact and connections Sav-E has made, and how to get in touch with them.
FAQ Page
The FAQ page is for more detailed answers for questions that people may have about the company or product.
Introducing Sav-E
The Hero section features eye-catching colors and a short blurb about the product to draw in potential users. There is also a CTA button to download the Chrome Extension.
Onboarding
The steps on using the Chrome Extension follows the Hero section. This was to show how the product would be used if they were to download it.
I wanted the steps to stand out clearly to them to avoid confusion on how the app would work. This also replaced the video tutorial that the company wanted, but had no time to make.
I wanted the steps to stand out clearly to them to avoid confusion on how the app would work. This also replaced the video tutorial that the company wanted, but had no time to make.
Impact of Sav-E
In order to help motivate users to download Sav-E, I wanted an easy way to show how they could contribute to a more sustainable world by downloading Sav-E.
I also added the Earth's Status HP bar as a fun visual indicator that the Earth's health is improving with Sav-E's help.
I also added the Earth's Status HP bar as a fun visual indicator that the Earth's health is improving with Sav-E's help.
Partners
Sav-E wanted to showcase their partners to allow people to know they mean business.
I opted for a short selection of partners and a way for people to see more if they were interested. In order to make the visuals pop out more, I added the horizontal scrolling of the text on the top and bottom.
I opted for a short selection of partners and a way for people to see more if they were interested. In order to make the visuals pop out more, I added the horizontal scrolling of the text on the top and bottom.
Social Media
Rather than the social media being in the footer, Sav-E wanted to bring a lot of attention to their social media.
I created its own section on the Home Page, enlarged the logos, and added their names around it to add more visual interest.
I created its own section on the Home Page, enlarged the logos, and added their names around it to add more visual interest.
Subscribe to Newsletter
Sav-E also wanted to let people subscribe to their newsletter. Considering how they wanted a good B2C relationship, I choose to do a light and simple format in order to communicate that they are friendly.
It was also placed at the bottom as I followed website conventions so that it aligns with how users normally sign up for newsletters.
It was also placed at the bottom as I followed website conventions so that it aligns with how users normally sign up for newsletters.
FAQ Page
In order to show which section was being shown, I used a white color to make it pop out. The rest was in a dark green to indicate that it's not in use.
We also added trees at the bottom to reflect how Sav-E's brand is environmentally friendly.
We also added trees at the bottom to reflect how Sav-E's brand is environmentally friendly.
Next Steps
Spending more time understanding users and stakeholders
To help the future designs, I did multiple wireframes of the rest of the screens including About Us and Partners and Products. If you'd like to see more of my designs, please feel free to contact me!
Also, if I had more time, I would have conducted user interviews with prospective stakeholders to better understand what they would want to see. I'd also like to conduct usability testing on my final design to see how users navigate through it. I would also like to have created a design system before going into visual design.
Also, if I had more time, I would have conducted user interviews with prospective stakeholders to better understand what they would want to see. I'd also like to conduct usability testing on my final design to see how users navigate through it. I would also like to have created a design system before going into visual design.
Reflection
Learning to ideate quickly
I'm grateful to have gotten this opportunity. As this was a start-up with fast approaching deadlines, I'm comfortable with working in a fast-paced environment with ambiguous ideas. I've learned to work independently for the most part and can ideate for multiple designs.
View Other Projects
OnDemandKorea
Reducing user friction
for login
for login
OnDemandKorea
Modernizing UX/UI for streaming
Venmo
Streamlining group transaction
