SUNY SUNY

Redefining Sun Safety with Style and Innovation

Suny Suny is a company committed to revolutionizing sun experience. Recognizing the often-overlooked vulnerability of arms and hands, especially while driving, they believe in making sun safety fashionable. The primary goal of this project was to design a responsive website to accompany the launch of Suny Suny. 

Problem 

The project aimed to address the challenge of establishing a compelling online presence for Suny Suny. Suny Suny needed a responsive website that not only effectively communicated the brand's mission and product offerings but also seamlessly integrated style and functionality to engage and captivate the target audience.

Solution

I designed a responsive website for Suny Suny, strategically showcasing their innovative sun protection products. This process involved three iterative rounds of wireframing, prototyping, and user testing. The result is a ready-to-build prototype of a responsive website for the Suny Suny brand, providing an engaging and intuitive platform for users to explore and embrace their safe and stylish sun products.

Project Scope

Design a responsive website

Role

UX Designer (Research, Visual Design, Interaction Design, User Testing)

Timeline

3 weeks / 2023

Platform

Figma, Lookback

Design Process

Discover

Market Research
Competitive Analysis
User Research

Define

Empathy Mapping

Ideate

Mood Board
Brand Style Tile

Design

Low Fi Wireframes
High Fi Wireframes
Usability Testing
Final Screens Interactive Prototype

Recollect

Challenges
What I Learnt

Discover

Market Research

Protecting against the dangers of UV radiation, the global sun care market, including sun protection gloves, has experienced a remarkable surge, driven by escalating concerns about skin cancer and premature aging.

The market was valued at $14.8 billion in 2020 and is projected to reach $25.6 billion by 2027. Factors contributing to market growth include increased sun protection practices and the development of advanced products like gloves. Research shows growing consumer interest in sun protection clothing, with 67% expressing interest. Consumers seek lightweight, UPF (Ultraviolet Protection Factor) rated gloves for effective sun protection, while a trend towards fashion-forward designs appeals to a younger demographic.

Competitive Analysis

The competitive analysis exposes key weaknesses in the sun protection market, including a limited focus on gloves, restricted color options, and design flaws leading to user dissatisfaction. These shortcomings present opportunities for Suny Suny to enhance product variety, improve design, and elevate overall customer satisfaction. Additionally, the market's tendency toward a plain and uninspiring website design creates an opening for Suny Suny to distinguish itself with a vibrant, appealing website, attracting a more diverse and fashion-forward clientele. Addressing these collective weaknesses positions Suny Suny for success in product offerings, design aesthetics, market positioning, and customer satisfaction within the sun protection industry.

User Research

First I interviewed the owner of Suny Suny…

  • Business goal: offering sun protection in a stylish and appealing manner for the younger generation while ensuring profitability

  • Screens needed: home, shop all, individual product, company background, and FAQs page

  • Target audience: individuals 20- 50 years old

Then I interviewed 3 participants…

  • Interview questions: 7 open-ended questions

  • Participant ages: 24 - 45 years old

  • Duration: 10 - 20 minutes

  • Participants' responses emphasized the need for product photos, easy returns, and diverse models, finding a balance between skin safety and style

Define

Empathy Mapping

To analyze the data gathered from user interviews, I made an empathy map to find common themes, discover insights, and understand user needs.

Ideate

Mood Board

Next, I created a mood board that captures the lively spirit of Suny Suny's brand. The mood board is filled with images that are playful, and colorful, which influenced the design of this project.

Brand Style Tile

I created a style tile to define the visual direction, bringing together brand elements like the logo, colors, and typography, which guided the UI design process.

Design

Low Fi Wireframes

I began by sketching low-fidelity wireframes to capture my ideas before transitioning to digital design.

High Fi Wireframes

I refined my ideas into high-fidelity wireframes, adding detail to the design for both mobile and desktop. The product images were left blank because I didn't have pictures from the client at that time.

Usability Testing

Usability Test Plan

  • 3 participants were interviewed remotely using Lookback

  • Research goals

    • Learn how a user navigates through the platform

    • Identify any areas for improvement

    • Check if users can go through the task flows without any assistance

  • Task flows

    • View a product’s details

    • Navigate to FAQs

    • Navigate to the about page

  • Success metric

    • Error-free rate: 90%

    • Time on task: within 5 minutes

Usability Testing Summary

All users found the tasks easy to complete. However, notable insights emerged during the testing process. Users encountered difficulty locating product reviews, expecting to find them by scrolling down rather than through a pop-up as initially planned. In response, adjustments were made to ensure a more intuitive location for reviews. Additionally, participants were initially searching in the footer for a direct link to the returns process. To address this, a separate page for returns and exchanges was introduced for a more straightforward user journey. Another notable observation was the confusion surrounding the email sign-up process. Users perceived the email input area as a button that would lead to additional information, prompting a redesign. The updated design now features a submit button positioned below the email input box, enhancing clarity and user understanding.

Revisions

The feedback obtained from usability testing guided me in making necessary revisions to the design, ensuring a more user-friendly experience. In the absence of client-provided images, I utilized an AI image generator to create product visuals for the design.

Interactive Prototype

Recollect

Challenges

Tackling my second design project in the UX/UI field was tough. Managing details and capturing the brand's style were challenging, but I handled them well. I want to continue to improve at this with each project. It was also difficult to balance adding new ideas to an e-commerce site while maintaining user familiarity.  Moving forward, my focus is on actively listening during usability tests and interviews, to identify any frustrations or difficulties users may encounter and refining my design accordingly.

What I Learnt

Effective research lays the foundation for generating valid ideas efficiently. I learned to use new tools and expand my skill set. I realized it's important to work within limits instead of trying to do too much because chaos follows when there are no clear boundaries. It's also crucial to know that pushing too hard can lead to bad decisions. Taking breaks and approaching tasks with a fresh perspective is a better idea.

Next
Next

Community Compass