Z

y

m

i

o

Research & Product Design

Zymio is a search engine founded on the principle that online shopping today should be powered by the best in AI and technology. The tool aims to provide all of the latest modest fashion trends and most innovative technology used in the fashion industry. Users are able to search for brands or specific clothing items. If the user doesn't have a particular piece of clothing or brand in mind they can simply browse around for new trends and categories. Everything is filtered only to show modest fashion and culture. The product offers the user a styler tool that allows the user to mix and match their outfits as well as to find the modest version of a non-modest outfit.

My role ...

As the design director, I was responsible for conducting research and designing the Brand Experience by creating various concepts and testing them out. I collaborated with another UX designer and engineers to build and work on the overall look and feel of the brand.

Tools ...

Figma, Photoshop, Illustrator

CLICK PAGES
TO SEE MORE

Iterations & Reflection

Ui is currently under testing. I created a few samples of combinations of how the site will look. So far the most positive reactions have been towards pink/purple and green combo. Currently working on high fidelity prototype  along with backend and AI developers.

Color 1B.png
Color 3B.png
Color 2B.png

What I learned

I'm proud of what I achieved so far. This would be the third design made for this site. Throughout those 3 design changes, I had a variety of people that worked with me. With this, I've come to realize that having a high-quality team that you are able to work with at an accelerated pace and with each individual being able to understand the way each person works, you can get a lot more done than what you could have originally planned. This is not the easiest to obtain. I'd say a great team makes up about 90% of the project. The other 10% is the actual work.

Serving as the creative lead on this project, I learned that being focused and creating a sense of community within the team can generate great results. Making it easier to manage those relationships and turn vision into action.

The site so far has had great interest and reviews. The modest fashion community is very excited and open to this project which feels quite welcoming. I've learned the importance of testing and creating focus groups. Specifically for this project, no one in our team has a modest style. None of us is a direct customer of this product. Therefore, it is crucial to conduct research and obtain feedback constantly from the direct consumer. 

There's still some work to be done. I'm excited to continue on this project and see the final result come to life. I feel such a privilege to be working with such talented people and my only hope, for now, is to continue my career working alongside people who continue to teach me new skills but most importantly people who continue to inspire me. 

 

Final Design

Coming soon_edited.png

UI & Branding

desktop.png
apps.png

Previous Design

The previous UI design Zymio had was in a much darker tone. The color palette was selected based on color psychology. Since the product aims at people with an interest in modest fashion we decided to make black the primary color black to show elegance and discipline. We choose to add tones of yellow to show excitement, positivity, and happiness. Along with a monkey animation to represent the brand name as "Zymio" which sounds like a "monkey" in Spanish. We wanted the monkey to add a playful and friendly feel to the brand identity. 

As a search engine, its function is to find modest fashion quickly, effectively, and with no confusion. Both the mobile and desktop wireframes were designed with a minimalistic aesthetic in mind. It included the search option, a modest styler, and a virtual closet.

Logo & Animation

zymio logo version_edited.png
Original Logo_edited.png

The most important letters in the logo are the first and last. I designed several versions with the thought of eventually adding the monkey animation to it. I wanted to keep it simple and timeless to be able to incorporate it in the future into an updated design. 

In Spanish "Simio" is pronounced the same as "Zymio". It means monkey and it symbolizes intelligence, grace, community, and charm. All terms that represent the brand identity. Since I wanted this character to stick out, I decided to design it with bright yellow color and an affable face. The monkey would be playful and friendly. Its personality would show with the interactions it had with the logo. After the focus group, the monkey was taken out of the brand identity. As it was considered to make the search engine look too busy. 

Color Palettes

The previous color palette needed to be analyzed and changed. For this reason, I created three color blind safe palettes that could potentially be the theme for the new brand identity. Without having the monkey in mind, I now tried to look more into color psychology. Once I identified three solid colors that could work based on my research, I added complementary colors. Created 3 mood boards that I tested with a focus group of women of a variety of ages and backgrounds who are interested in modest fashion.

Pink symbolizes youth, friendliness, and kindness. According to data gathered by Adobe XD Ideas most people that identify as a woman do not consider pink as one of their favorite colors. For this reason, I decided to use a strong amount of violet in this mood board to complement it. Violet is more associated with luxury, spiritualism, and quality. It is also a color that is very popular among people of all genders. 

Group 5.png

Green symbolizes balance, growth, and success. According to data gathered by Adobe XD Ideas it's a color that is equally liked among people. It is a color that makes you feel calm. A color that's also associated with modesty. 

Group 6.png

Orange symbolizes playfulness, creativity, and Independence. According to data gathered by Adobe XD Ideas is not among the most popular colors but it's a great color for ecommerce as it can be easily identified and seen. I had to be careful with this color and the tone of it as it's a color used by a very known ecommerce site called "Amazon".

Group 7.png

Focus Group

Summary 

Interviews were divided into 4 categories that touch on Ui design, usability, accuracy, and innovation. Most of the users that participated in the survey were women between the age of 22-35 and located in London, Israel, and New York. Some had a clear idea of the product/service Zymio offers, others had some idea, and a few had no idea what it was about until they tried to use it. All these women share the same interest in modest clothing but are interpreted differently. From 2 peer groups dominated by the Indian (blind) group.

Motivators

The trending arrow is handy and looks appealing.

Modest Styler is the best/favorite feature so far.

The available brand section is handy.

Diversity is well shown on the website.

The name is unique and makes users curious to learn what it is.

Sharing the closet with other friends/social media is appreciated.

Zymio’s USP - the focus on modest fashion, the styler, the fact that an image-related search exists, trending, for the informed American group even sharing on socials is a big win, other than clothes even the models seem to be more inclusive ‘real like’.

Pains

How can modesty be better cued through the entire website? Use colors, and imagery that depicts this better. Poor display of information for each item description.

Modest styler: could use examples of favorite styles made or similar styles that the user is looking for.

Brands available: needs a drop-down section to show available brands by name. Should also have filtering available.

Search bar: display is not great. Icons should be rethought and adding a direct button to modest styler should be considered. No need for “for” or “AND”. Should just be “Search Items or Brands”.

No reviews are displayed on the site for each item.

The price range is not affectively displayed once filtered and it only allows it to go to $200.

Consistency through how data is presented, images, models quality of the products, and their description need to be streamlined and made consistent. Without this, the website looks WIP/ less than/ peer to peer like eBay.

The ‘buy now’ confuses the audience as to what the website does as they can’t directly buy.

For new/ unknown brands they want more information and exploration - an introduction to that new world.

What search throws up needs to be based solely on their search and not general - some non-modest options appear and also some general unrelated options too.

A competition sets mentioned have largely been fashion apps (as the benchmark) - Zara, Mango, H&M- Model vs garment feature, like American eagle have that whole 360-degree view thing or videos of people wearing it and moving about, Rifle paper co Everlane People Tree H&M, ASOS, Vestiare Co. in the UK - need to take inspiration, especially in the way in which data is presented / fashion inspiration.

Largely consumers want curated content for self (despite loving the trending) it needs to trend based on my choice/ preferences - new dimensions to look at clothes trends - not just stick with 90s fashion or current pop fashion, have specifics like - puffed sleeves, embellished collar or like Powerful look, Cutesy/Romantic, Athletic, Bohemian, Fantasy

Fabric and sizing/ coverage become important issues that could be supported through the engine - fabric not realizing how it would feel, how much it would stretch, with sizing it is how it would fall as none have the typical body type - or may have fluctuating body sizes - some issues even with standardized sizing not being consistent even with the same brand, the same pattern, the length fluctuates.




 

Personas

Based on my secondary research and focus group, I created 3 main user personas to reference through my design process. Each represents a different age group and background, however, they all live in the US. 

Amna is in her mid-twenties and practices Islam. She lives in Houston with her new husband and is currently focused on growing her career and attending multiple family events. Rachel is in her mid-thirties and is investing more in her wardrobe for the new events she's starting to attend as a marketing director. Indra is an accomplished senior businesswoman who needs to always look her best but doesn't have much time to pick an outfit.

They all want to dress modestly for any event and they are looking for variety in style, season, material, and occasion. 

Rachel.png
Amna.png
Indra.png

Architecture & Wireframe 

Sitemap

The sitemap provides an overview of how Zymio works. This shows the site navigation as well as all the screens that should be included on the site. On the left side, I highlighted a column in red of filters that should be added to the site for the user to be able to find the item they're looking for more efficiently. 

Information Architecture.png

Mobile Wireframe

Using the sitemap, I developed a mobile wireframe before the desktop. My choice to start on the mobile wireframe is due to the data I found showing that conversion rates are almost twice as high on desktop devices than on mobile, which suggests that users prefer to browse on their mobile devices and make purchases on their computers or laptops. Therefore, I prioritized the mobile wireframe before working on the desktop as most users spend most of their browsing time on mobile devices. 

Group 2608562.png

Desktop Wireframe

Once the mobile wireframe was completed, I then proceed to develop the desktop wireframe. Translating the mobile wireframe smoothly into the desktop. Everything remains with a minimal aesthetic in order for the user to not get confused. There are a couple of changes from the mobile to the desktop wireframe. For example, the modest styler changes slightly in layout due to the space of the screen. On the desktop wireframe, there is no option to change the grid view as your scroll since the user is able to see all items fully on the screen.

Group 2608560 (1).png

UI Kit

I created a UI Kit as I began to design. This allowed me to stay organized and be able to alter my designs accordingly. I went through my wireframes and made a list of components I needed to make to be used in the future. The Kit is available for anyone in the team to use and change color, size, text, and icons as they need to. 

UI KIT.png

The Start:

Research & Strategy

I conducted a focus group to identify pain points from the previous design we created. Part of this analysis was to find out more about customers' expectations from the modest fashion and culture community. Based on their responses and my secondary research, a complete redesign and a new structure was developed for the website. 

Why Modest Fashion?

The modest fashion industry is worth $283 billion worldwide. The global Islamic clothing market alone is expected to reach $361 billion by 2023.

Religion isn’t the only reason women decide to cover up more when they dress. For some, it’s a personal preference that allows them to feel empowered and independent.

While the majority of customers are based in the Middle East, huge demand is growing in the U.S. and U.K.

The logistics in dubai make it challenging for delivering clothing products.

Western women in the U.S. make up 36 percent of customers shopping on The Modist.

Total target population in the US that dress modestly ~75M*

The modest clothing market is currently underserved, with upwards of 70% dissatisfied with their shopping experience

Modern modesty is based on the world’s idea of modesty.

Algorithm accuracy is lacking in the modest fashion search for consumers.

Indentifying the Brand

Zymio is

Zymio is NOT

Me in avatar.png

the connection between modest brands, consumers, and culture

the separation of cultures and/ discrimination towards others

Me in avatar.png
Me in avatar.png
Me in avatar.png
Me in avatar.png
Me in avatar.png
Me in avatar.png
Me in avatar.png

unbiased toward religion

focused on one religion/belief

Me in avatar.png

modern fashion and technology

outdated from technology

Me in avatar.png

inclusive towards all backgrounds

suppressive towards individuals

Me in avatar.png

transperant

vague

Me in avatar.png

responsible for ethical & sustainable practices

a representative of unethical practices

Me in avatar.png

inspiring for new generation

stays within the same standards

Me in avatar.png

Competitor Analysis 

Screenshot 2022-04-18 194146 1.png
Current Position
The Modist was a marketplace for luxury modest fashion
Strengths
The Modist has strong financial backing from industry veterans like Farfetch and Net-a-porter
Weaknesses
Business model has a high initial investment, exclusively services luxury customers
Screenshot 2022-04-18 194347 1 (1).png
Current Position
Lyst is a fashion search engine
Strengths
Backed by LVMH, featuring LVMH clothing
Not focused on the modest market, and features only LVMH
Weaknesses
Screenshot 2022-04-18 194035 1 (1).png
Current Position
Modanisa is a marketplace for modest clothing based out of Turkey
Strengths
Modanisa was launched in 2011 and has an established consumer base
Limited inventory, liability to deliver
Weaknesses
Screenshot 2022-04-18 194228 1.png
Current Position
Google shopping was relaunched in 2019 and helps consumers search for clothing
Strengths
Established player in the market and has advanced technology
Currently not focused on the modest market
Weaknesses
There is no other search engine for modest fashion currently in the market. There are similar products that are or can be used by our target consumers, but fail to address their needs.