blip /
Website Redesign
Introducing a sustainable smart battery that will pioneer a new era of energy storage.
00
Overview
The Problem
Energy storage can be an intimidating topic for people who don't know anything about it. Ample information exists on the web, but it's difficult to know where to start reading, let alone what to even search.
To solve this problem, I focused on education and building trust by improving both the structure and presentation of information to users.
I redesigned every website page but will focus on my improvements to the Product page below.
Role / Timeline
Lead UX/UI Designer / April 2021 - August 2021
Collaborators
CTO, CEO, GTM team, Product Manager, Engineers, Graphic Designer
Tools
Scope / Deliverables
• Restructured content and clarified messaging based on user research for all web pages
• Refined and updated UI Design
• Strengthened company branding
Success Metrics
Insights
Our interviewees barely knew about electricity and were not used to spending money on energy. To ensure that they understood exactly why our energy storage product, blipOne, should be a household staple (vs. a nice-to-have), it was imperative to target any hesitation or confusion at the source and educate users.
Customers don't typically proactively spend time researching energy alternatives; instead they wait for their utility providers to send them information. Knowing this, it was important to design the website to quickly capture and retain their attention with digestible, clear information.
Design Challenges
• The final hardware design is still being rendered so I had to be flexible with adapting my designs with the many moving parts.
• Balancing the desire to design engaging animations and interactions with our limited development resources.
Outcome
My designs for blip's site were well received by both the blip team and users alike, who felt that the site was easier to navigate, had a clearer brand identity and voice and solved the MVP's problems.
01
Understanding the User
Research Goals
• To learn about people's views towards their electricity usage
• To see how much knowledge customers had about energy
• To gain insights into their priorities regarding backup power, cost savings, and environmental impact
Research Methods
The team conducted 104 interviews with renters across the country with varying socio-economic backgrounds. I analyzed their executive summaries of the interviews to learn more about the user blip was targeting.
02
Ideate
User Persona
With all of the interviews and surveys conducted, I created a user persona, Katie, to help hone in on who the target customer was for our product and how we might best communicate our value proposition to her.
MVP Analysis
I critiqued the existing MVP website through Katie's perspective, identifying obstacles that prevented her from achieving her goals while brainstorming potential improvements and additions.
To start, I conducted a content audit to quickly identify what was useful and effective versus what could be eliminated. In doing so, I noticed that the hierarchy of information on the MVP was not aligned with what users expressed was most important to them. Users had asked questions during their interviews that were not being answered by the site.
Competitive Analysis
I also researched competitors in the energy storage space to learn about what content others featured and how successful they were at marketing their products. This was a helpful exercise that helped me gain inspiration for how we might present our value propositions.
03
Design
Wireframes
For the Product page, I focused firstly on the structure and content with respect to blipOne's value propositions and what users wanted to know about the device.
Knowing that users did not want to invest a lot of time researching on their own, I wanted to address blipOne's most important use cases (cost savings and backup power) at the top of the page with the following content in descending order of importance, as determined during user interviews.
While sketching, I asked myself, "What are the users going to do on the website? What are their goals?" which helped me narrow down my priorities:
Priorities:
1. Clarify content structure and messaging
2. Focus on the blipOne product itself and how it works
3. Distinctly explain each of the value propositions, in order of relevance to our customers
Feedback + Iterations
After wireframing, I collaborated with the CTO and CEO to review my sketches and existing and new content proposals.
Key Takeaways:
1. Although the use cases were briefly addressed towards the top of the page, the team wanted to provide more thorough explanations and dedicate more visual real estate to the use cases even earlier on.
2. Backup Power is a more universal use case than Cost Savings, so moving it above savings could draw more interest.
3. The "How it Works" section might be easier to understand if it included a simple list of steps as opposed to a diagram as I initially envisioned.
Mockups
I started designing the copy and layout of each section based on the feedback I received. I worked with the Graphic Designer to create illustrations that strengthened blip's branding across the website, while I focused on how to engage users with consumer-friendly graphics and messaging.
Firstly, I focused on designing the sections for our three biggest value propositions: Backup Power, Cost Savings, and Environmental Impact.
Next, I designed the other sections that were more focused on the blipOne product itself.
Final Product Page
04
Next Steps / Reflections
Usability Testing
I'm going to conduct five usability tests consisting of 3-5 tasks. I’ll learn from our users, iterate on my designs to eliminate any user pain points, and create a more enjoyable experience.
Developer Hand-Off
I’ve already passed off some finalized components to the developers, such as the redesigned navigation bar, sign up banner and footer, to be added in their upcoming sprints. I’ve exported my assets in multiple sizes and created a component library for them to reference, as well as walked them through my designs to answer any questions they might have.
Reflections / Opportunities
I conducted a case study retrospective for blip to analyze the strengths, weaknesses, and opportunities of my design process and skills. One major opportunity would have been to connect with the go-to-market team and the CEO sooner to align on their goals for messaging and learnings from their user interviews to implement their learnings and strategy while I designed the site. Also, aligning with the CEO on SEO strategy earlier in the design cycle would have been helpful as well in framing my perspective.
There are a couple of great educational opportunities for me as well. Having more time to learn about energy storage would have been useful in collecting more ideas and familiarizing myself more with the space before I started designing.
Testimonial
"Justine is a very talented UI/UX designer who really understands the balance between research and design, and gets stuff done. Justine and I worked together at blip, a smart battery startup, where I supervised her in an ever-changing environment.
Her biggest strengths are her ability to strategically think about a problem and solve it creatively, while keeping the nuances and details in mind. She is a true self-starter who works quickly and thoughtfully — while she was at blip, she overhauled our website, mapped out complex user flows and designed our onboarding and user dashboard products.
Justine is a wonderful person to work with and would be a great asset to any company!"
- Thibaut Feremans, CTO + Co-Founder at blip
Thanks for your time - Have a great day!