Be Confident
Desktop website
UX/UI design
.png)
About
Design your own swimsuit
This is designed for girls who feel uncomfortable with the revealing swimsuits commonly sold today,
and for those who struggle to find swimwear in their size.
The problem
Today, when a woman seeks to purchase swimwear that is both beautiful and modest according to her preferences, she often faces significant challenges.
The fashionable swimwear among young women, ranging from childhood to adulthood, tends to be revealing, usually featuring small and exposed bottoms.
Furthermore, women who require larger sizes struggle to find flattering swimwear.
Through interviews with girls of various ages and sizes, I recognized the magnitude of this need.
A quote from one of the interviews underscores this issue: "It feels like swimwear companies have forgotten that there are also full-figured women, and quite a few at that.
Even when larger sizes are produced, the designs are suited for slim girls and are not flattering for fuller figures.
It's sad that the message being conveyed to young women today is that to be beautiful, one must be thin and wear revealing swimwear."
The solution
Enable anyone with similar needs to design their own swimsuit using an easy-to-use editor.
This editor allows the selection of a swimsuit type (bikini or one-piece) and offers a wide range of cuts that flatter both slim and fuller figures,
with recommended styles tailored to the user's body shape.
Additionally, users can adjust the size of the bottom to their personal preference, all while seeing in real-time how the swimsuit looks on their body
with the help of their body's simulation.
User Research
I conducted a Zoom interview with four women of different sizes, aged 22 to 24.
Main conclusions
All four women expressed significant disappointment with their swimsuit shopping experiences.
They feel that stores predominantly sell revealing swimsuits, leaving little to no real alternatives for those who are uncomfortable in such attire.
Additionally, some of the interviewees expressed a sentiment that retailers overlook the existence of full-figured women, often focusing solely on smaller sizes.
They pointed out that even when larger sizes are available, the designs and cuts are still primarily tailored for thinner women, failing to flatter those with fuller figures.
The existing alternatives today
The alternative of ordering a custom-fit swimsuit is not entirely satisfactory for several reasons:
It is quite costly, potentially amounting to several hundred shekels.
It's impossible to see in real time how the swimsuit will look on the body before it is sewn.
Access to a physical seamstress
is not always possible, leading to potential misunderstandings. For instance, when requesting a full-coverage swimsuit, the actual size and fit are subject to the seamstress's interpretation.
Market research
I conducted market research that included applications, mall stores and online stores.
Apps/websites I have explored (I have explored different types of editors and e-commerce websites)
Wix, canva, Wow, Lupa, Figma, Yayprint , Mockitup , T – Shirt Design Studio, Fashion Design Flat Sketch, TShirtdesign marker, Asos, Renuar, Twenty Four Seven, Urbanica, Yohannoff, Rami Levy, Shufersel.
Main conclusions
The more well-known editors provided a good user experience, featuring a design process that was generally simple, efficient, and possessed a high-quality interface design.
On the other hand, the lesser-known editors also offered a straightforward design process, but their app design appeared somewhat outdated.
E-commerce websites typically exhibit similar shopping cart behaviors, and their designs are usually quite uniform.
Online stores that I have researched
Bananhot, ZAFUL,SHEIN.
.png)
Main conclusions
Less than half of the swimsuits I explored had a full bottom, and usually there was not a wide range of sizes (XS-XL).
Stores in the mall I researched
Twentyfourseven, AERIE, Urbanica, Fix, Adika, Castro.
.png)
Main conclusions
The scarcity of swimsuits with a full bottom was very noticeable, but there was a wide range of sizes available, from XS to XL and even larger.
Usability tests, contextual task analysis: Segment selection Step
I conducted a usability test on three potential users.
Modification of Swimsuit Type
Everyone understood how to change the swimsuit type.
To rotate the swimsuit cut image
No one initially understood, instead, they rotated the simulation.
Eventually, one person succeeded in correctly interpreting my intention, but it took some time.
Select the 'Lin' cut
Everyone comprehended how to select the desired cut.
What sizes are available on the website?
Everyone understood that pressing on the item displays its measurements on the website.
Choosing a cut (clicking on the "select" button)
No one realized that the "Selection" button was meant for choosing a section.
Instead, everyone assumed that simply clicking on a section indicated their choice.
Eventually, one user did understand the purpose of the selection button, but it took some time.
Before
.png)
After
.png)
The changes I made
1. Position of the 360° icon: I've placed the 360° icon, which rotates the visualization, at the bottom near the zoom in and out icons.
This way, the 360° icon is located next to the object it affects, rotating the same section beneath it, and at the bottom part of the visualization for rotating the entire image.
2. Position of the “My Measurements” button: I realized that it's not relevant for the user to see her measurements while choosing a swimsuit style.
Therefore, I decided to place the “My Measurements” button on the right side of the editor.
This allows the user to view her measurements if she wishes, and provides the option to do so at any stage of her choosing.
3. Position of the “Preview” button: I understood that there's no need for it to remain on the left side of the editor.
It's more organized for the user to have similar functionalities located adjacent to each other.
For this reason, I positioned the “Preview” button on the right side of the editor, grouped with the “My Measurements” button.
4. Changing the swimsuit type: Although users understood how to change the swimsuit type, I decided that the toggle for selecting swimsuit types above the tabs
(where one chooses the swimsuit style) was less intuitive.
These are choices that look different from one another and are placed closely together.
Instead, I opted for a button to switch swimsuit types, which will appear to the user as part of the options on the right side of the editor.
This layout looks cleaner and is more user-friendly.
5. Position of the “Select” button: I positioned this button in the additional details section of the swimsuit style to make it easier for the user to understand the purpose of the button.
6. I have relocated the 'additional details' section.
Now, instead of it appearing alongside the visualization, when a user clicks on a segment, that particular segment rotates, revealing its additional details.
Bottom Size Selection Step
Adjusting the Size of the Lower Section
It became apparent that it was not sufficiently clear to users that they needed to click and hold the button while moving the mouse.
They required guidance on this, and even after receiving instructions, they still lacked confidence in performing the action.
Maintaining the Size of the Lower Part
They understood that they needed to press the "save" button.
However, it took one of them a little time to grasp this.
Before
.png)
After
The changes I made
1. I altered the method by which users adjust the size of the bottom part. Instead of requiring a long press on the mouse, I introduced a slider.
Its default setting is in the middle, allowing users to increase or decrease the size of the bottom part according to their personal preference.
2. I realized that a permanent explanatory video was unnecessary.
Instead, I placed a round button next to the name of the step on the right side.
This button indicates to the user that there is an explanatory video about the step.
If the user is uncertain about what to do, they can simply press the button to view the instructional video.
3. Save Button: To make it easier for users to understand the purpose of this button, I changed its appearance. I added an icon, renamed the button to “Save Size”,
highlighted it in blue, and positioned it near the slider for easier access.
4. I added preset sizes. These presets are designed to provide users with options that might suit them, eliminating the need to adjust the size manually.
If one of the preset sizes fits their needs, they can select it directly.
However, if they wish to make further adjustments, they can do so using the slider.
Design Flow
Design your swimsuit on a simulation of your body
By clicking on "My Measurements," the user can view their body measurements as per the simulation they have created.
1. The user selects the type of swimsuit she wishes to design, choosing between a bikini or a one-piece.
If she clicks on the 'X', it will redirect her to the homepage.
.png)
2. After choosing the type of swimsuit, the user reaches the editor where the cut selection step is open.
This is to guide her to design the swimsuit according to the sequence of design options in the editor, ensuring the most efficient way of designing.
During the cut selection stage, the user chooses the swimsuit cut she desires. If she opts to design a bikini, she will select two cuts: one for the top and one for the bottom.
When the user clicks on one of the cuts, she sees how it fits on her body using the simulation.
Additionally, more details about that particular cut appear, along with a selection button that she can press if she wants that specific cut.
The user does the same thing when choosing a cut for the bottom.
.png)
Using this button,
the user can change
the type of swimsuit
she has chosen.
3. Next is the size selection stage. At this stage, the user can control the size of the swimsuit's bottom part and adjust it according to her personal taste.
The user is shown three bottom sizes from which she can choose if she likes one of the options.
Additionally, there is a slider feature that allows the user to manually adjust the size of the bottom.
* The user can save the size she has created for future designs.
4. The next step involves selecting a color or pattern. The user decides if she wants the swimsuit to be a solid color or to feature a pattern.
If she chooses a pattern, she can change the colors within it.
5. In the final step, the user has the option to add a print to the swimsuit. She can choose where to place it and adjust its size according to her taste.
Flow of creating a simulation
Using a camera, the user creates a simulation of her body.
After creating this simulation,
this is the message received.
.png)
More screens
Swipe to see more screens
Illustrations and icons I created
Illustrations
Icons