UX UI Design

A selection of UX/UI projects for fashion & creative clients, from responsive site designs to eCommerce products and creative campaign and blogs.

During my career began in fashion design and graphics. The thing I found was that almost always, my colleagues struggled with computer skills, when for me it was intuitive. For this reason I was asked to teach others on adobe software, PLM systems and even 3D softwares. What I also found was that I enjoyed navigating others through websites and was always critical of websites that were not user friendly and hard to navigate. Four years ago was a turning point when I was asked by my employer to mock up the company website. This lead to me building not only that website but also several of our clients websites, this was all self taught via research of other websites and youtube tutorials.

Fast forward two years and that is when I became aware of UX and UI design-*it sounded perfect! no coding! (I now know a little HTML language however at the time I did not.) I have since then spent the last few years building my database, my knowledge and my portfolio in UI and UX design. 

PLEASE NOTE THIS IS CURRENT WORK: and links to the websites will be updated once the websites are connected to the domain

Proposal

A new latex fashion start up brand, the objective was to create something visual stimulating but not overly complicated. They wanted a website with a minimal design so that the clothes could make the statement. The brand is all handmade in the UK by one single designer, so there were 2 main obstacles with this website from your usual online retailer. One it is made of latex which some can be allergic to and the other that the garments have a two week dispatched date.

Portfolio

My job description:

Tasks and responsibilities

  • Plan and conduct user research and competitor analysis

  • Interpret data and qualitative feedback

  • Create user stories, personas, and storyboards

  • Determine information architecture and create sitemaps

  • Create prototypes and wireframes

  • Conduct usability testing

My job descriptions:

Skills & personal traits

  • Adaptability

  • Communication, collaboration and teamwork

  • Problem-solving

  • Design thinking, asthetic inegrity

  • A user-centric mindset

  • Attention to detail

  • Creative and analytical approach

  • Understanding of interaction design principles

  • Knowledge of industry tools such as Sketch, InVision, Adobe InDesign, Illustrator, Adobe Photoshop

  • Business know-how: Understanding of business metrics and the ability to translate company goals and objectives into digital experiences

 

In depth Case Research Into the brand.

When researching for ideas on the website, the client disclosed she was dyslexic and didn't like websites that contained too much information in text form and she found it confusing. This is something i found extremely personal as i myself am dyslexic and have found the same issues when on websites. this was vital as this is a Latex brand, Latex can be an allergic substance to some and didn't want this just to be hidden in the terms and conditions. For this brand a major interest was transparency and after a discussion with the designer and the marketing manager I introduced the slogan that would be featured on the home page and a pop up page, very simple, straight to the point.

THIS IS LATEX.


​This is a niche brand because of the fabric but all other aspects are that of a popular fashion brand. an easy to navigate system on the website was vital and again the attention to visuals. Another thing in our discussions that arose was size charts. As myself and the designer both have a university degree in fashion design we are very capable of following size charts to choose the correct sizing for ourselves however when looking at competitors this was not overly that simple for the average person. With this in mind I created line drawing of the garments to show the measurements of the garments with the elastic tolerance of the latex. this allows people to see if it will stretch over their hips or shoulders. this way there isn't any guessing about the fit which is vital due to for hygiene reasons non of the items will be returnable.


We as a team , the designer the marketing manager and I, had discussions over who was the customer and the price point. This I find of great importance when designing a website as first impressions mean everything, and although people would say they want their company website to look as expensive as possible this is not actually the case. I have found from Studies with surveys I have created in the past that people who are looking for a cheaper product will immediately click away from a link if they think it looks out of there price range. (the most common reason for this I found was that people didnt want to find something they liked and then realised thy cant afford it they would rather just not know about the products. My solution for the home page to have a few key items with the price, this then images people immediately as they don't have to load a second page for the products to find this information.

1. PROPSAL

2. REASERCH COMPETITORS

3. USER PERSONAS

4. WORKFLOW

5. LOW FIDELITY WIREFRAME

6. NAVIGATION FLOW

7. COLOUR AND STYLE BOTTONS

8. HIGH FIDELITY WIREFRAME

9 .FINISHED PRODUCT

Work flow

WORK FLOW .jpg

Low fidelity wireframes

When designing the low fidelity wire-fame for this project, I needed to keep in mind the simplicity the client wanted. This was an online store of only 12 products and I knew we needed a light-box welcome screen to ensure the customer knows the products are latex for allergy reasons.

LOW FIDELITY WIREFRAME.jpg

Navigation flow

When designing the navigation flow, I researched other websites of similar functionality but wanted to make it more simple for navigation. When looking at other websites I found that there were a lot of sub tabs to get though to the destination or to jump ahead steps that are unnecessary. as its a smaller brand i we would like emails to be able to subscribe for promotional reasons we all decided that to have to create one to proceed is pushy and we would prefer a more honest and relaxed approach with a guest login.

User Persona

USER PERSONA 3
USER PERSONA 2
USER PERSONA 1

Who is the CUSTOMER

and how do they think what do they want?

We knew from the beginning that the customer was a visual customer as the platform that similar products sell is now increasingly being sold through Instagram. With this product however it was fashionable but also had the niche of being a non unique material.

The designer had already had in mind a handful of people who she believed would be the ideal customer due to their online presence. It was my job to take this information and make discover their insight on shopping online, their likes and dislikes.

I began by finding out more about them, Customer profiles as I often created when working in fashion before creating the product and this is the same for the website. The customer profiles were more about the customers style (see above). It was from their I created an online survey and sent out to a carefully selected 20 people, who fit these ideals as specified by the designer. I didn't want to create a large survey as I didn't want to dilute the research, knowing from past experience people who prefer deal mass market fashion, they would not have the same aesthetics and needs from a website as those looking for an individual and unique product. 

These surveys were carried out over individuals direct messages sending them a link to three template websites I have edited for this purpose, and asking for the feedback on usability, aesthetics. This was a conversational style research which i believe allows me to get more detailed information that that of a yes and no answer survey which I believe is better when in the beginning of creating your online product.

Branding & Colour

I was also the graphic designer for the logo above.

High fidelity wireframes

This is a very visual brand. We wanted to keep the text to a minimum or on pages where people who wanted to read more could. It was very important to keep the design looking clean and coherent.

One main concern we had was that the brands products are made from Latex which can be an allergy, so this is vital that the customer is made aware of this before purchasing. I created this on Adobe Illustrator as I was able to add additional media to make it resemble to final product more closely.

high fedility wireframe.jpg

Mock up

PHOTO WIREFRAME.jpg

The mock up was created on WIX thats was due to once built I would pass over the website to other members of the team to be able to deal with selling and shipping with ease as WIX has some very good tools that will allow this to be done even with ease. I was able to add the media sent from the team who were extreemly please with the result.

Customer Feedback from all aspects of the product.

We has a soft opening, we only send the link to the website to family and friends after which we sent this survey below. This way if there were any issues they would be able to resolved in person and not harm the reputation or name of the brand.

 

Overall we wanted to create something that had simple and elegant design and we achieved that. We wanted the brand to be transparent and applicable especially with the UX copywriting and we achieved that. We wanted to change the way people shop specific sizes and custom order fits, and we achieved that. But most importantly we wanted a clear and coherent website that advised those wanting to purchase a product that it was latex and non refundable and I am happy to say we achieved that too.

Finished product

Meet The Team

67795033_10157275555782464_6125312706347

Katy Brinkley

Co-founder and head of design at SAP.

52902908_10156753680465056_2600554198957

Emma Winslade

Co-founder and head of Marketing at SAP.

Screen Shot 2020-07-25 at 14.24.57.png

Zara Brown

Head of Digital Design at SAP.

Keyboard and Mouse

Interested?

 

download and fill out the band

questionaire and lets build this together