Seasons Sparkling
Design of the artist collaboration web page for Seasons Sparkling, a plant-based sparkling water company.
CONTEXT
Seasons Sparkling is a sparkling water company that believes that exceptional contemporary arts and healthy ingredients belong in people’s daily lives to be seen, taste, and experienced. Although Seasons' website is essentially functioning as an e-commerce website, it is essential for the website to be accordant with the company's core value: providing a platform for the emerging artist while providing healthy drinks. For this reason, a collaboration page which showcases the cooperation between artists and Seasons is important. My responsibility was to work with the CEO and a team of web-developer and data analysis to improve the design of the collaboration page and make it to be both intuitive to use and delivering the company's core idea.
ROLE
UX/UI Designer
TOOL
Adobe Illustrator
DURATION
2 Weeks (2018)
Why need redesign?
"Seasons Sparkling is a brand for artists in all kinds," the founder said. The collaboration page should be the perfect place to credit the artist, photographers, videographers and content writers who had collaborated with Seasons Sparkling.
In the original collaboration page, selective artworks from each artist were being displayed without a specific order. Artist's name would only show when a user hovers his mouse over. When clicking on the name, the user would be directed to the page which contained more detailed information of the artist and story behind the collaboration.
Although this page was visually pleasing, it would cause two problems:
1. It was unclear who were the artists by laying out only their works without any text information.
2. It would be hard to present article content generators' contributions since this layout was dominated by graphics.
Original design
When mouse hover, artist name shown
When clicking onto a name, jump to new page
User Research
In order to improve the collaboration page, I need to understand what problems users would encounter first. Because it's a website that we haven't launched yet, we don't have users' data to rely on. I invited 5 people, who were in different ages and was working in different professional areas, to participate in a usability testing activity.
During the testing process, I had the collaboration page open for them and provided them several small tasks to complete. I also recorded the time that it took for each person to accomplish the task. Task like "find out more information about Maz McCorkle" and "find the artist who we used on our lemon elderflower flavor packaging design" was assigned. After participants finished the task, I performed an interview with them and asked questions like "how do you feel about Seasons Sparkling after browsing through this page" "what do you think is the function of page" "what confusions do you have" and etc.
Findings
Through documenting the amount of time users spent on each task, I found that users average spent about 10-20 seconds to locate the artist being asked. During the task, two of the participants didn't even notice the "collaboration" hamburger icon and never clicked on it.
Most participants had these 2 confusions:
1. When landing on the Collaboration page from a direct link without previous experiences with Seasons Sparkling website or products, users had no idea what this brand was selling without clicking into "About" page.
2. Users were confused by the purpose of the collaboration page even after knowing what Seasons Sparkling was selling.
The page layout was very limiting: it couldn't have more than 15 artists in the folded name list otherwise the page would get infinitely long.
Solution
In the new collaboration page mockup, I've added a top banner with a paragraph that explains Seasons Sparkling's mission so that it is clear to people who are entering the collaboration page for the first time. Underneath the top banner is a filter bar, which, instead of grouping by artist names, categorizes content by its type. Having the category function will reduce users' difficulties in finding a collaboration project. An activated category will be shown in a darker color. The type of category will also be shown on top of the artist's name so that:
1. It will easier for the web developer to build the filtering function.
2. The first time page visitors will have a clearer idea of how we categorize things. Moreover, I chose to lay out all the categories so the problem that people forget about the existence of filter function can be solved.
Under the name of an artist, users will find a short description of the artist and how he or she cooperated with Seasons. When clicking on the artist's name, users will be direct to the artist's page like before.
