BACKGROUND
In this class project I had to take the visual strategy and identity of the brand llum, a company that manufactures portable solar generators that can charge personal devices. The brand had to be extended it into a responsive website that would highlight the product they produce and offer purchase options.
TASK
I was responsible for integrating the llum brand identity, generating content, and building a website that is responsive for mobile and desktop. The design needs to contribute to a meaningful experience that also accomplishes business needs.
SOLUTION
The final product should take the brand identity to establish a strong visual design for the website that reflects the company’s mission and modern urban style. Identifying business goals and requirements will be very helpful when writing goal-oriented content that makes the product attractive and draws on the user’s interest. Target user research is essential to understand the users and their needs and identify the requirements of the product.
UNDERSTANDING THE PRODUCT
llum is a portable solar panel that generates electricity when exposed to sunlight and stores the energy to later be used to charge electric personal devices. Key points to emphasize are portability and the device’s ability to charge other electronics. Even though the product works when exposed to sunlight, the most important part of it is its ability to convert and store the energy in a rechargeable battery.
llum Brand Identity
COMPETITOR RESEARCH
To understand how the brand can differentiate and stand out among the other choices that users have, I researched the competitors who sell similar products and have an established brand. How do they present themselves? How is their brand applied? What do their websites have in common
Biolite is a company that focuses on the outdoor lovers. They have products that can be used while camping. Biolite are a good example of brand consistency when applied on their product design. Their logo and organic/natural presentaion are successful in attracting their target audience.
Goal Zero manufacture portable solar generators and also focus on the people who spend their time outdoors. Their design is more tech oriented rather than organic and natural. They have successfully applied their logo and brand colors on their website and product design.
DEFINING THE TARGET AUDIENCE
Renewable energy is often utilized by people who care strongly about the environment, but rarely from the average person. llum’s target audience are the ordinary people who might take advantage of the sunlight that they are exposed to when drinking coffee, having a picnic, working out, working outdoors.
USER INTERVIEWS
Users from different age groups were asked a set of questions to identify what they care about when purchasing a technical product like a portable solar generator and what they expect to accomplish on the company’s website.
Observations
Want to read information regarding charge time and device compatibility.
Sensitivity to price
User reviews and feedback are important when buying a product.
Frustrated with distractions when trying to complete a task
Would use a portable solar generator for its convenience, not for ecological reasons.
Look for information that is user friendly and less technical.
Review of detailed characteristics and features of a product are important for a user to decide on a purchase
USE CASES
Eva takes her daughter to the playground in the nearest park. It’s sunny outside, the kids are playing. Eva sits on a bench and browses the web while watching her daughter playing but after a while her phone’s battery is all used up. Eva thinks llum’s product might be great for her, but she wonders how it would take for the device to charge from the sun. She goes on llum’s website and looks for detailed information.
Nina’s friend recommended her to buy a portable solar generator charger so that she has an easy way to charge her phone when they go to Burning Man. Nina is not willing to spend a lot of money for a new device. She goes on llum’s website to check the price of their solar charger.
WEBSITE REQUIREMENTS
A website would be the only way for this business, other than advertisement, to communicate its ideas to the users and convince them that this is the device they need. There should be information about the way the technology works and what makes it better than the competition. The website would also have to be the main, most direct way to purchase the device or get informed about which retailers have it in stock.
Users will be going on the website to learn more about the way the device functions and if its specifications (battery capacity, devices that can be charged, portability) and to determine whether it will be of use for them. When they get familiar with the product they will be looking for ways to purchase it and to look at prices.
WIREFRAMES
Before even starting on the visual part of the website, I used blank placeholders to arrange all of the information that I want to put as content.
VISUAL DESIGN VARIATIONS
Two sets of initial compositions with integrated brand identity. The mocked-up pages are the home page and information about how the product works.
FINAL COMPS
The final compositions included a few refinements. For example the homepage photo is different. It was a challenge to decide on a picture that would be on the homepage because that is the first thing users see and its purpose is to communicate what the product is about and increase their interest.
The "How it works" page provides users with tech data. The "shop" page shows the products, gives user reviews and allows you to make a purchase.
Desktop layout compositions
Since the website has to be responsive, I mocked up the layout of the website as it appears on a mobile device.
Mobile
OUTCOME
The final product was a coded responsive website that you can view here.
The user testing was performed before the website was finished showed great results. The tested individuals could easily interpret the brand and relate it to “battery, energy, adventures”. They could also successfully navigate through the website and find how the product works, how they can purchase it and how they would contact the company if they had any questions. The website appeared to be easy to navigate and the information was represented in a way that was intuitive for the user.
TAKEAWAYS
Designing a website was a new experience for me. As anything new, it offered new challenges and new problems to be solves. It was a challenge to write up the technical information about a product that does not exist , without even knowing if the specs I choose can be features of a real product. It helped me understand how important the written copy of a website is to represent and reflect the brand identity of the product.
Completing this project helped me gain a better understanding about the process of user-centered design. The visual part of the website was put off until the end and the rest of the time was spent on understand the people who are going to use it, and what they want to see and experience when they visit the website. Because if usersare discouraged to use the website, the visual design looses its purpose.
