Amaiò Swim Website UX and Design

Design, User Experience, Web Design

One of the best parts of working with Amaiò Swim through Post+Beam was how receptive the client was and how much research they had done on their own already. They had a good idea of who their main competitors were, what worked and didn’t work about what those companies were doing, and some suggestions as to what may work better for them to help get us going.

Every project I work on tends to start with a lot of research and sketching, regardless of how much data has been provided. I need to do my due diligence. It also helps to make sense out of what’s there.

Research and Analysis

One of the first steps for any UX exercise is research and analyzing your findings. While I can’t share everything we found with you, I can give you a bit of a rundown of the process and some snapshots. The slides below represent a small cross-section of some of the findings through:

  • Heuristic analysis
  • Stakeholder interviews
  • Competitor reviews
  • Available analytics and data
  • The experience of two of our own employees

Thankfully at Post+Beam at the time we had at least two members who were very well versed with the fashion world, having worked on numerous swimwear and apparel brands. Their experience also became a great tool informing the project. It sure helps having a Subject Matter Expert on hand. Being one of the main designers for 5 years on the e-commerce team for one of Canada’s largest telecommunications companies also helps when helping clients with their online stores.

ux-slidemosaic

The usual tips

  • Always, always find out what the client’s goals are.
  • Prioritize those goals
  • Be realistic about what you and your team can do based on those asks (there’s almost always pie-in-the-sky “wish we could” requests, don’t worry about it)
  • Ask “why” maybe a hundred times or more until you’ve gotten to the core
  • Ask for any and all data
  • Comb that data with a fine-toothed comb for anything telling
    • What worked or didn’t work?
    • What correlations can you find?
  • Ask for feedback from the client as often as required so there’s no big “wow” reveal. Those are a good way to waste both your time and theirs.
  • Measure twice, cut once

0618_amaioapproach_sg_v02_page_05 0618_amaioapproach_sg_v02_page_06 0618_amaioapproach_sg_v02_page_07

So, you can see from what I can share that the client asks were more than reasonable. Additionally, we found that they could easily outdo numerous direct competitors just by having a mobile experience and putting a little effort into making sure their website was easy to navigate.

Wireframing and IA

At this point we started coming up with ideas to solve the various problems we were faced with. Again, I can’t share everything, but you can see a few snapshots from the wireframes below and compare them later to how things evolved in final design stages. It’s important to continue to iterate.

Just because something is signed off on in planning phases doesn’t mean that it shouldn’t be able to change later– IF you find a good reason for doing so.

0710_amaiowires_sg_v03_page_03 0710_amaiowires_sg_v03_page_04 0710_amaiowires_sg_v03_page_05
0710_amaiowires_sg_v03_page_14 0710_amaiowires_sg_v03_page_12 0710_amaiowires_sg_v03_page_09 0710_amaiowires_sg_v03_page_07

It’s difficult to understand a wireframe, especially when you haven’t been a part of the planning phase. Basically, what you can gather, is that already at this point the style was being directed to a more minimalistic approach, as is typical with high-fashion.

Certain problems we found during research we began to solve, and we encountered others based on technical restraints we already knew at this point due to budgetary constraints forcing us into short-listing certain content management systems over others.

After only a few feedback sessions with the client, research, analysis, information architecture, and wireframes were all approved by the stakeholders.

Visual Design

Once the technical pieces were sorted out and we knew what we were making and how, it was time to start adding style and flair. We knew we would encounter other issues as the project moved forward, but those were solved on the go in an iterative and agile fashion.

20160118-amaiohomepage-sg-v03

Large, beautiful images dominated the website. Minimal text was used throughout, allowing the swimsuit pieces to shine through themselves and be the stars of the show.

20160111-amaioproductpage-sg-v01

20160119-amaioproductpagemobile-sg-v01-comp2

20160108-amaioabout-sg-v01 20160118-amaioblogpost-sg-v03 20160107-amaioshopsection-filter-sg-v01 20160107-amaiocollectionpage-sg-v01

Elegant, mobile-friendly, clean, simple, to the point. And best of all? Light years more advanced and better than what the competition had. Easily upgradeable in function and design, we utilized modular design systems that could be expanded upon, a simple and straight forward grid, and bold splashes of dark brand colours.