ROLES
-
UX Design
-
Visual Design
-
Brand & Identity
DELIVERABLES
-
Mind mapping
-
Competitive Analysis
-
User Stories
-
User Flows
-
Cards and cards sorting
-
Paper Prototype
-
Interactive Prototype
-
Wireframes
-
User Testing
-
Style Guide
-
Photography search
-
Photography treatment
-
Developed website
-
Website testing on web and mobile
TOOLS
-
Sketch
-
Pen and paper
-
Cards sorting
-
Adobe Photoshop
-
Adobe Illustrator
-
Adobe InDesign
-
Wix
WEB VERSION
Homepage
MOBILE VERSION
LOGO
Clean, slick looking and modern logo was designed. San-serif font was chosen for modern look and excellent legibility.
SUMMARY
SwimBabe is luxury athletic swimsuit brand. They need to create responsive e-commerce website. They are targeting professional athletes, semi-professional athletes, and people who appreciate durable, slick, stylish swimwear.
MIND MAPPING
During mind mapping on the white board I was able to build overall direction on how visuals will look like.
Visuals need to look clean, modern, have elements of luxury (gold, tan colors). We want to have blue color that usually means confidence and trust. To represent speed and fast I decided to use waves or sea photography.
MOOD BOARD
COMPETITIVE ANALYSIS
For market research I chose Athleta (https://athleta.gap.com/) and Patagonia ( www.patagonia.com) due to their popularity.
ATHLETA
STRENGTHS
-
Trustable website.
-
Variety of brands and options available.
-
Many reviews on different product.
WEAKNESSES
-
They don't focus on swimwear and have many other products, yet when you want to see one piece swimsuits they don't have enough variety, colors and patterns seems to be boring and simple.
-
Too many different products, style, confuse user.
-
They don't have ambassadors and people stories about product they are selling. this could be important for users looking for luxury and high quality pieces.
OPPORTUNITIES
-
They could focus on specific target audience or specific product and build inventory for that specific audience rather than sell for all.
-
Visual design can be improved, we can see that on my screen a part of the picture is missing due to message above the header.
-
They can contract influencers or ambassadors to feature their products.
THREATS
-
Because they sell so many different inventory, they have many products but not enough of each specific kind. They could miss clients who are looking for specific features or products such as women athletes who only looking for one piece high end swimsuits.
-
Because they sell differently priced swimwear, they loose customers focused on high end luxurious items.
-
Professional athletes may not be interested in searching through so many options and might prefer simpler user workflow when thy get to what they want in two clicks.
PATAGONIA
STRENGTHS
-
Modern, interactive website. Engaging videos on home page.
-
Straight to the point user flow. I was able to get to swimsuits with 2 clicks.
-
Customer reviews available for most items.
-
Good variety of pictures for selected product.
-
Great description of specs.
WEAKNESSES
-
Only 8 one-Piece swimsuit is not enough to choose from.
-
In sport section you can't choose "swim" although other sports are available. To navigate to "swim" you have to move to "shop".
-
They have video and films featured on the website, but I didn't find influencers stories which seems to be important in today marketing.
OPPORTUNITIES
-
They could add "swim" to sport section and focus on athletic swimwear.
-
They could contract influencers to feature their items and show their stories.
-
They could add more athletic one-piece swimsuits variety
THREATS
-
Athletes who can't find "swim" under sport can leave website and navigate to other brands.
-
Because they have so many different sport inventory, they might be missing clients focused on specific kind, like luxury swimwear.
USER FLOW, CARDS SORTING
WIREFRAMES
With the user flows done, I moved on to the wireframes. Finally I was able to sketch how the page was going to look like. With the wireframes I was now really able to picture how the features, links, buttons were going to look like and how they were going to be positioned in the page.
SAMPLE OF XD SCREENS
ANIMATED PTOTOTYPE
Prototype was created using Adobe XD, you can see a couple of screens below. Also animated prototype was created for testing user flow.
SAMPLE OF XD CONNECTIONS
SAMPLE PROTOTYPE SCREENS
.jpg)
