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.