diff --git a/about.html b/about.html index a1a99bc..3c70d31 100644 --- a/about.html +++ b/about.html @@ -1,169 +1,303 @@ + + + + + + + + + + + Francesca Paris | About me + - - - - - - - - - - Francesca Paris | About me - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
-
-
-
-

My Story

-

Hi, I'm a recent graduate of the UI design bootcamp at Career Foundry, with a background in the creation of 3D virtual environments for an architectural firm.

-
-
-
- - - image of Francesca - +
+
+
+
+

My Story

+

+ Hi, I'm a recent graduate of the UI design bootcamp at Career + Foundry, with a background in the creation of 3D virtual + environments for an architectural firm. +

+
+
+
+ + + image of Francesca + +
-
-
-
-

In my role as a 3D Artist, I was tasked with creating precise 3D models of residential properties. Thanks to this experience, I'm used to working in a dynamic environment, continuously learning new tools and working closely within a team and interacting with different stakeholders, such as developers and other artists.

-

As I have also studied Game Art and Games Design, I am used to creating a visual product keeping in mind how aesthetics can affect the user experience, using design principles to guide the user toward a certain goal.

-
-
-

After a few years of creating 3D models for both my personal projects and professionally, I came to the realization that I was more interested in the analytical and cognitive side of design and decided to study UI Design.

-

I am currently looking for new opportunities in London or remotely and I look forward to hearing from you!

+
+
+

+ In my role as a 3D Artist, I was tasked with creating precise 3D + models of residential properties. Thanks to this experience, I'm + used to working in a dynamic environment, continuously learning + new tools and working closely within a team and interacting with + different stakeholders, such as developers and other artists. +

+

+ As I have also studied + Game Art and Games Design, + I am used to creating a visual product keeping in mind how + aesthetics can affect the user experience, using design principles + to guide the user toward a certain goal. +

+
+
+

+ After a few years of creating 3D models for both my personal + projects and professionally, I came to the realization that I was + more interested in the analytical and cognitive side of design and + decided to study UI Design. +

+

+ I am currently looking for new opportunities in London or remotely + and I look forward to hearing from you! +

+
-
- Download my CV - + Download my CV -
-

Skills & Tools

-
-

Relevant Skills

-
    -
  • User research
    • -
  • Usability testing
    • -
  • Wireframing
    • -
  • Creation of a MVP
    • -
  • A / B testing
    • -
  • Creation of a style guide
    • -
  • UI elements, patterns and hierarchy
    • -
  • Design principles and heuristics
    • -
  • Responsive Design
    • -
  • Creation of high fidelity screens and app prototypes
    • -
  • Basic HTML and CSS knowledge
    • -
-
-
-

Tools I use

-
    -
  • Adobe XD
    • -
  • Photoshop
    • -
  • InVision Studio
    • -
  • FTP Software
    • -
  • Trello, Asana, Monday.com
    • -
  • TortoiseSVN for file versioning
    • -
+
+

Skills & Tools

+
+

Relevant Skills

+
    +
  • User research
    • +
  • Usability testing
    • +
  • Wireframing
    • +
  • Creation of a MVP
    • +
  • A / B testing
    • +
  • Creation of a style guide
    • +
  • UI elements, patterns and hierarchy
    • +
  • Design principles and heuristics
    • +
  • Responsive Design
    • +
  • Creation of high fidelity screens and app prototypes
    • +
  • Basic HTML and CSS knowledge
    • +
+
+
+

Tools I use

+
    +
  • Adobe XD
    • +
  • Photoshop
    • +
  • InVision Studio
    • +
  • FTP Software
    • +
  • Trello, Asana, Monday.com
    • +
  • TortoiseSVN for file versioning
    • +
+
-
+
-
- - - - - + + + + diff --git a/activities-view.html b/activities-view.html index c07b8ad..71ace30 100644 --- a/activities-view.html +++ b/activities-view.html @@ -1,195 +1,360 @@ + + + + + + + + + + + Francesca Paris | Activities View + - - - - - - - - - - Francesca Paris | Activities View - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
+
- - Introduction image + + Introduction image
-
-
-
-
- Activities View logo -
- -
-

Project Overview

-

Activities View is a to-do list app that allows users to quickly plan their day. - The app wants to help users have a balanced life and therefore displays the category each item belongs to, from education to entertainment.

-

My role: UI / UX Designer

+
+
+
+
+ Activities View logo +
+ +
+

Project Overview

+

+ Activities View is a to-do list app that allows users to quickly + plan their day. The app wants to help users have a balanced life + and therefore displays the category each item belongs to, from + education to entertainment. +

+

My role: UI / UX Designer

+
-
- -
-
-

Project Brief, Competitor Analysis and Ideation

+ +
+
+

Project Brief, Competitor Analysis and Ideation

+
+
+
+

+ This project challenge was to create a to-do list app.
+ I have first analysed the other to-do apps on the market. There + were all kind of apps however I could not find a product for + people on the go that would allow them to quickly interact with + the app.
+ I have therefore decided to create a concept app aimed towards + university students and people with a similar lifestyle. +

+
+
+

+ The app would give to the users an overview of their day, with + to-dos or "activities" belonging to different categories. In + this way it would be possible to check if the day has a balanced + lifestyle or not and quickly change it as necessary. +

+
+
+
-
-

This project challenge was to create a to-do list app.
- I have first analysed the other to-do apps on the market. There were all kind of apps however I could not find a product for people on the go that would allow them to quickly interact with the app.
- I have therefore decided to create a concept app aimed towards university students and people with a similar lifestyle.

+
+

Wireframes

+ + + + + Wireframes + +

+ After receiving feedback on the project from my Career Foundry + mentor, I have made some changes to the UI. +

+ + + + + Wireframes +
-
-

The app would give to the users an overview of their day, with to-dos or "activities" belonging to different categories. In this way it would be possible to check if the day has a balanced lifestyle or not and quickly change it as - necessary.

+
+
+
+ + + Style guide +
- -
-
-

Wireframes

- - - - - Wireframes - -

After receiving feedback on the project from my Career Foundry mentor, I have made some changes to the UI.

- - - - - Wireframes - -
+
+

High fidelity screens

+ + + High fidelity screens +
-
+
- - - Style guide - -
-
-
-
-

High fidelity screens

- - - High fidelity screens - -
-
-
-
- - Final image - +
+ + Final image + +
-
+
-
- - - - - + + + + diff --git a/contact-me.html b/contact-me.html index 8df3303..1b318b2 100644 --- a/contact-me.html +++ b/contact-me.html @@ -1,175 +1,359 @@ + + + + + + + + + + + Francesca Paris | Contact me + - - - - - - - - - - Francesca Paris | Contact me - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
-
-
-
-

Get in touch

-
-
+
+
+
-

Did you like my projects and want to contact me? Feel free to reach me through these channels:

+

Get in touch

-
-
-
- - - - - - - - - - - -

francescaparis90@gmail.com

+
+
+

+ Did you like my projects and want to contact me? Feel free to + reach me through these channels: +

+
-
-
-
- - - - - - +
+
+ + + + + + + + + -

LinkedIn

- +

francescaparis90@gmail.com

+
-
-
-
-

Let's connect

+
+
+ + + + + + + + +

LinkedIn

+ +
-
-
-
- - - - - - - - - -

Behance

- +
+
+

Let's connect

+
-
-
-
- - - - - -

Dribbble

- +
+
+ + + + + + + + + +

Behance

+ +
+
+
+
+ + + + + +

Dribbble

+ +
-
-
+
- - - - - +
+
+

Copyright Francesca Paris 2021

+
+
+ + + + diff --git a/icon-sets.html b/icon-sets.html index 13d4c78..dc0db1a 100644 --- a/icon-sets.html +++ b/icon-sets.html @@ -1,60 +1,109 @@ + + + + + + + + + + + Francesca Paris | Icons Sets + - - - - - - - - - - Francesca Paris | Icons Sets - - - -
-
-
-
-
- -
-
-
- -
+ -
+
-
-

Icon sets

- decorative icons next to the title -
+
+

Icon sets

+ decorative icons next to the title +
- decorative transition image + decorative transition image
@@ -66,13 +115,26 @@

Cartoony

- Cartoony icons with brown colours + Cartoony icons with brown colours
- - - Brown gradients used for the icons + + + Brown gradients used for the icons
@@ -80,20 +142,36 @@

Cartoony

- decorative transition image + decorative transition image
- Cartoony icons with brown colours + Cartoony icons with brown colours
- - - Brown gradients used for the icons + + + Brown gradients used for the icons
@@ -101,20 +179,36 @@

Cartoony

- decorative transition image + decorative transition image
- Cartoony icons with brown colours + Cartoony icons with brown colours
- - - Brown gradients used for the icons + + + Brown gradients used for the icons
@@ -122,7 +216,10 @@

Cartoony

- decorative transition image + decorative transition image
@@ -136,73 +233,137 @@

Basic

- - decorative transition image + + decorative transition image
-
+
- - - - + + + + diff --git a/img/favicon-16x16.png b/img/favicon-16x16.png new file mode 100644 index 0000000..e0772dd Binary files /dev/null and b/img/favicon-16x16.png differ diff --git a/img/favicon-32x32.png b/img/favicon-32x32.png new file mode 100644 index 0000000..f70afd6 Binary files /dev/null and b/img/favicon-32x32.png differ diff --git a/index.html b/index.html index 06cd812..40d56ee 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,7 @@ href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@100;200;500&family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet" /> + Francesca Paris | UI Designer diff --git a/money-organizer.html b/money-organizer.html index fc3a18a..c9ebb53 100644 --- a/money-organizer.html +++ b/money-organizer.html @@ -1,453 +1,821 @@ + + + + + + + + + + + Francesca Paris | Money Organizer + - - - - - - - - - - Francesca Paris | Money Organizer - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
-
- -
-
- - - - - Introduction image - -
-
- -
-
-
-
-
-

Money Organizer is a money saving app.

-
    -
  • it gives to the users an overview of their finances
    • -
  • it allows users to create a saving goal and show its progress
    • -
  • it raises awareness on how the money is spent and what actions could help the users save more money
    • -
  • it motivates the user through positive feedback, ratings and competition* (advanced mode only), transforming a stressful experience such as managing your finances into a fun challenge.
    • -
-
-
-

* The app algorithms allow users to compete with each other without sharing how much money is spent or saved. The app will only provide to other users progress percentages and the number of the saving - actions taken.

-
-
-
- - - Introduction image - -
-
- -
-
+
+
+ +
-

Design Process

+ + + + + Introduction image +
-
- -
-
- The Project Brief -

Create a money saving tool

-
-

Users should be guided through the saving process while also having an overview of how their money is spent.

+ +
+
+
+
+

Money Organizer is a money saving app.

+
    +
  • it gives to the users an overview of their finances
    • +
  • + it allows users to create a saving goal and show its progress +
    • +
  • + it raises awareness on how the money is spent and what actions + could help the users save more money +
    • +
  • + it motivates the user through positive feedback, ratings and + competition* (advanced mode only), transforming a stressful + experience such as managing your finances into a fun + challenge. +
    • +
+
+
+

+ * The app algorithms allow users to compete with each other + without sharing how much money is spent or saved. The app will + only provide to other users progress percentages and the number + of the saving actions taken. +

+
-
-
- -
-
-

Research

-
- Analysing the current market -
    -
  • Wide usage of the pie chart for showing a spending overview by category
    • -
  • An interesting feature is showing the current subscriptions and allow the user to quickly unsubscribe
    • -
  • Some apps find better deals for bills and similar
    • -
+
+ + + Introduction image +
-
- User Research -

What do users want?

-
    -
  • An intuitive way to see how they spend their money
    • -
  • Be motivated to save money
    • -
+
+ +
+
+
+

Design Process

+
-
- -
-
-
+ +
+
+ The Project Brief +

Create a money saving tool

- Brainstorming phase -

Positive feedback and Gamification

-

I decided to focus on how I could motivate the users to save money, using gamification.
- I believed the core need behind a saving money tool was to build awareness, discipline, ownership of the process of saving and give a sense of satisfaction through it. Positive feedback and a sense of - progress - seemed essential in order to replace a possibly negative feeling towards the process of saving money with a positive one.

-

During the brainstorming process, I have set down some important rules the app should follow:

-
    -
  • The app should follow the mentality of the glass half full, emphasizing how much the user has already saved instead of punishing for the money that have been spent.
    • -
  • The app will allow competition between users, in order to motivate the user.
    • -
-

Having competition without sharing financial information

-

Competitions can motivate users, however creating one in a financing app was pretty challenging. People usually do not share to others their financial details. Therefore sharing quantities of money spent and money saved was not - viable. - After considering a point system and other similar possible methods, I then have settled down for an easier system with goal progress percentages.

+

+ Users should be guided through the saving process while also + having an overview of how their money is spent. +

-
- -
-
-
-

User flow diagram

- - - User flow diagram - + +
+
+

Research

+
+ Analysing the current market +
    +
  • + Wide usage of the pie chart for showing a spending overview by + category +
    • +
  • + An interesting feature is showing the current subscriptions + and allow the user to quickly unsubscribe +
    • +
  • Some apps find better deals for bills and similar
    • +
+
+
+ User Research +

What do users want?

+
    +
  • An intuitive way to see how they spend their money
    • +
  • Be motivated to save money
    • +
+
-
-
- +
-
-
-
-

App unique features

-
-
-
- -
+
+
+
+ Brainstorming phase +

Positive feedback and Gamification

+

+ I decided to focus on how I could motivate the users to save + money, using gamification.
+ I believed the core need behind a saving money tool was to + build awareness, discipline, ownership of the process + of saving and give a sense of satisfaction through it. + Positive feedback and a sense of progress seemed essential in + order to replace a possibly negative feeling towards the + process of saving money with a positive one. +

+

+ During the brainstorming process, I have set down some + important rules the app should follow: +

  • -

    Ranking system

    + The app should follow the mentality of the glass half full, + emphasizing how much the user has already saved instead of + punishing for the money that have been spent. +
    • +
  • + The app will allow competition between users, in order to + motivate the user.
-
- - - Ranking system - -
-
-

The ranking system uses data from all the users the app has ever had. - Perhaps the user friends used the app in the past and the data is memorized. The app knows how much they have saved (in percentage) through time. It does not matter the amount of money needed by the goal as only the progress - percentage - is used for the ranking.

-

- As an example, the user might have a goal of £600 in 100 days, and the user has saved money for 10 days. That means:

- - - Ranking system - -

The user so far has saved £120, so 20% of the total amount (£600 ).

- - - Ranking system - -

So in the Ranking page, the user will see his / her friends goal progress and action progress when they were saving for their goal and they were at the same time percentage.

-
+

+ Having competition without sharing financial information +

+

+ Competitions can motivate users, however creating one in a + financing app was pretty challenging. People usually do not + share to others their financial details. Therefore sharing + quantities of money spent and money saved was not viable. + After considering a point system and other similar possible + methods, I then have settled down for an easier system with + goal progress percentages. +

- +
+
+
+ +
+
+
+

User flow diagram

+ + + User flow diagram + +
+
+
+
+ +
+
+

App unique features

+
+
+
+ +
  • -

    Goal status

    +

    Ranking system

-
-
-
-
-
+
- - Goal status + + Ranking system
-
-
-

Every week gets a star rating:

-
-
- 0 stars -

0 stars: no savings or if the user hasn't saved any money and also used some of the previous savings

-
-
- 1 star -

low amount of money saved

-
-
- 2 stars -

medium amount of money saved

-
-
-
-
- 3 stars -

Weekly target achieved.

+
+

+ The ranking system uses data from all the users the app + has ever had. Perhaps the user friends used the app in the + past and the data is memorized. The app knows how much + they have saved (in percentage) through time. It does not + matter the amount of money needed by the goal as only the + progress percentage is used for the ranking. +

+

+ As an example, the user might have a goal of £600 in 100 + days, and the user has saved money for 10 days. That + means: +

+ + + Ranking system + +

+ The user so far has saved £120, so 20% of the total amount + (£600 ). +

+ + + Ranking system + +

+ So in the Ranking page, the user will see his / her + friends goal progress and action progress when they were + saving for their goal and they were at the same time + percentage. +

+
+
+ +
+
+
    +
  • +

    Goal status

    +
    • +
+
+
+
+
+
+ + + Goal status + +
+
+
+

Every week gets a star rating:

+
+
+ 0 stars +

+ 0 stars: no savings or if the user hasn't saved + any money and also used some of the previous + savings +

+
+
+ 1 star +

low amount of money saved

+
+
+ 2 stars +

medium amount of money saved

+
-
- S stars -

S rating: the user has saved more than the weekly target amount.

+
+
+ 3 stars +

Weekly target achieved.

+
+
+ S stars +

+ S rating: the user has saved more than the weekly + target amount. +

+
-
- -
-
-
    -
  • -

    Committing process

    -
    • -
+ +
+
+
    +
  • +

    Committing process

    +
    • +
+
-
-
-
-

If the user hasn't saved enough money in the past, it is possible to commit some money to get back on track.(1)

-

Those money will get subtracted to the Extra money category.(2)

-

At the end of the week, the user needs to not have the Extra money value below 0. That way, the weekly rating will be of 3 stars because it means the user has reached the weekly goal and also saved the committed amount of money. The total progress bar will also be back on track.

+
+
+

+ If the user hasn't saved enough money in the past, it is + possible to commit some money to get back on track.(1) +

+

+ Those money will get subtracted to the Extra money + category.(2) +

+

+ At the end of the week, the user needs to not have the + Extra money value below 0. That way, the weekly rating + will be of 3 stars because it means the user has reached + the weekly goal and also saved the committed amount of + money. The total progress bar will also be back on track. +

+
+
+ + Committing process + +
-
- - Committing process - + +
+
+
    +
  • +

    Special actions

    +
    • +
+
-
- -
-
-
    -
  • -

    Special actions

    -
    • -
+
+
+ + + + + Ranking system + +
-
-
-
- - - - - Ranking system - + +
+
+
    +
  • +

    Saving suggestions

    +
    • +
+ + + + + Ranking system + +
- -
-
-
    -
  • -

    Saving suggestions

    -
    • -
- - - - - Ranking system - -
+
+
+
+ +
+
+
+
+

Testing and results

+

+ I conducted some usability tests on 3 people using my app + prototype.
+ The results showed the system of my app was pretty complicated + and not suitable to all users. Therefore, I have decided to + have a Simple mode of the app and an Advanced mode. +

+ + + Ranking system + +

+ I have also added several onboarding screens for the advanced + mode: +

+ + + + Ranking system +
-
- -
-

Testing and results

-

I conducted some usability tests on 3 people using my app prototype.
- The results showed the system of my app was pretty complicated and not suitable to all users. Therefore, I have decided to have a Simple mode of the app and an Advanced mode.

+
+

High fidelity mobile screens

+
- - Ranking system + + Ranking system -

I have also added several onboarding screens for the advanced mode:

+
+
+
+
+
+
+ +

Desktop screens

- - - Ranking system + + + + Ranking system
-
-
-
-
-
-
-

High fidelity mobile screens

+
+ +
+
+

Takeaway

+

+ Through this project I wanted to use my knowledge from my + university degree in Games Design to introduce gamification in + a FinTech app. After the testing phase, it was pretty obvious + most people were used to much simpler gamification + experiences. Because of this, I have learnt how sometimes it + is good to have different app modes or include some more + in-depth features as tertiary buttons in order to create a + more flexible experience. Understanding better the usability + rules of gamification is very important as it s becoming more + and more popular. +

+
+
+ +
+

Future iterations

+

+ A big future iteration would be allowing users to add more than + one saving goal. The spending overview bars do not currently + show anything about recurring payments (rent or mortgage, + subscriptions etc). It could be nice to add a feature showing in + black the recurring spending. +

+
+
+ +
+
+ + + Ranking system +
- - - Ranking system -
-
-
+
+ +
- - + - - - + + + + diff --git a/my-style.html b/my-style.html index 7d421b9..27d356d 100644 --- a/my-style.html +++ b/my-style.html @@ -1,336 +1,603 @@ + + + + + + + + + + + Francesca Paris | My Style + - - - - - - - - - - Francesca Paris | My Style - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
-
- -
-
- - - - - Introduction image - +
+
+ +
+
+ + + + + Introduction image + +
-
-
-
-
-
- Objective -

This student project allowed me to learn about the Material Design guidelines and also the Human Interface guidelines, implementing them in a new concept app.

-
-
- My role -

UI and UX Designer

-
-
- Platforms -

iOS
- Android

+
+
+
+
+ Objective +

+ This student project allowed me to learn about the Material + Design guidelines and also the Human Interface guidelines, + implementing them in a new concept app. +

+
+
+ My role +

UI and UX Designer

+
+
+ Platforms +

+ iOS
+ Android +

+
-
-
-
- -
-
-
-

Process

-
-
-
-
- Discovering the context -

Searching for a custom shopping experience

+
+
+ +
+
+
+

Process

+
-
-
-
-

Firstly I analysed the current market. I looked at competitors apps, checking what features they had in common but also what made each app different. I've analysed the flow of the user experience and what - function felt more useful to - me as a user. I then checked what kind of new innovative functions are being implemented in the retail sector through digital devices. - I ran into some interesting findings, like the usage of beacons to notify the user of a new upcoming event when walking near a shop. However, there wasn't an app that would provide a good personalised - recommendation - section from the - first moment the user gets into the app.

+
+
+ Discovering the context +

Searching for a custom shopping experience

+
-
-

I also realised how clothing apps should not limited to online shopping, but could used to enhance the experience in shops too.
- As a UX designer, it seemed to me those apps were trying to push their products on the users, instead of understanding the user needs first. While I could understand how a number of shoppers might want to just follow the latest - fashion - trends, I also thought some might be more picky and therefore that could have been the audience for my app.

+
+
+

+ Firstly I analysed the current market. I looked at + competitors apps, checking what features they had in common + but also what made each app different. I've analysed the + flow of the user experience and what function felt more + useful to me as a user. I then checked what kind of new + innovative functions are being implemented in the retail + sector through digital devices. I ran into some interesting + findings, like the usage of beacons to notify the user of a + new upcoming event when walking near a shop. However, + there wasn't an app that would provide a good + personalised recommendation section from the first moment + the user gets into the app. +

+
+
+

+ I also realised how + clothing apps should not limited to online shopping, but + could used to enhance the experience in shops too.
+ As a UX designer, it seemed to me those apps were trying to + push their products on the users, instead of understanding + the user needs first. While I could understand how a number + of shoppers might want to just follow the latest fashion + trends, I also thought some might be more picky and + therefore that could have been the audience for my app. +

+
-
- - -
- Concepting -

Shopping enhancing: requesting a size through the app

-

I created some quick sketches of how the app could be, then I made the user stories and eventually the flow charts.

- - - - User flow - - -
- -
-
-
- Wireframes creation -

Concerns about gender identities and inclusion

-
+ +
+ Concepting +

Shopping enhancing: requesting a size through the app

+

+ I created some quick sketches of how the app could be, then I + made the user stories and eventually the flow charts. +

+ + + + User flow +
-
-
-

During the initial screens creation I ran in a few issues.
- The first one was gender related. During the registration process I could have asked to the users to enter their gender and let that set whether the following clothes images would have been for men or women. However, this approach - did - not feel very inclusive and people from the LGBTQ+ community could find it quite outdated. I was also wondering how could I make my app appealing to gender fluid people too. I did some research, but it seemed websites and apps have - the - clothes divided by men, women, and perhaps girls and boys. Therefore I decided I would have only one main section and include images of many different styles, from feminine ones, to boyish and neutral ones.

+ +
+
+
+ Wireframes creation +

Concerns about gender identities and inclusion

+
-
- - - Logo screen and the screen for choosing your own style - +
+
+

+ During the initial screens creation I ran in a few + issues.
+ The first one was gender related. During the registration + process I could have asked to the users to enter their + gender and let that set whether the following clothes images + would have been for men or women. However, this approach did + not feel very inclusive and people from the LGBTQ+ community + could find it quite outdated. I was also wondering how could + I make my app appealing to gender fluid people too. I did + some research, but it seemed websites and apps have the + clothes divided by men, women, and perhaps girls and boys. + Therefore I decided I would have only one main section and + include images of many different styles, from feminine ones, + to boyish and neutral ones. +

+
+
+ + + Logo screen and the screen for choosing your own style + +
-
-
-
- - - Android and iPhone wireframes - +
+
+ + + Android and iPhone wireframes + +
-
- -
-
-
-

Testing

-

Before moving to the high fidelity wireframes, I needed to test my wireframes. I created quickly two prototypes (one iOS and one Android) and had a few people testing it. This way I have found some pain points that needed fixing.

- - - - - Fixes applied to some screens after the first testing phase - + +
+
+
+

Testing

+

+ Before moving to the high fidelity wireframes, I needed to + test my wireframes. I created quickly two prototypes (one + iOS and one Android) and had a few people testing it. This + way I have found some pain points that needed fixing. +

+ + + + + Fixes applied to some screens after the first testing phase + +
-
- -
-
-
-

High fidelity

+ +
+
+
+

High fidelity

+
-
-
-
-

I created the high fidelity screens that I would have used for the prototype. While assigning the pictures to the Registration and customization process, I realised the screen could have been very confusing. If - I used a mix of images showing both men and women wearing different types of clothes in the same screen, users might mistakenly think there is a problem with the app. Therefore I added the classic sections: man, woman, girl and boy. I have however paid - attention to include gender neutral clothes in each one.

+
+
+

+ I created the high fidelity screens that I would have used + for the prototype. While assigning the pictures to the + Registration and customization process, I realised the + screen could have been very confusing. If I used a mix of + images showing both men and women wearing different types of + clothes in the same screen, users might mistakenly think + there is a problem with the app. Therefore I added the + classic sections: man, woman, girl and boy. I have however + paid attention to include gender neutral clothes in each + one. +

+
+
+ + + Some high fidelity screens of the app + +
-
+
+ + +
+
+

Prototyping & Gathering feedback

+

+ Afterwards I created a prototype and asked for feedback from + my classmates. This process was very valuable, as it allowed + me to find further weak points but also have a global view of + the good ones within the app. I was particularly concerned by + the process for scanning an item, because it required a good + number of taps and screens due to the permissions needed for + the function. Here there is some of the feedback I received. +

- - Some high fidelity screens of the app + + + Feedback gathered during the second testing phase
-
-
- - -
-
-

Prototyping & Gathering feedback

-

Afterwards I created a prototype and asked for feedback from my classmates. This process was very valuable, as it allowed me to find further weak points but also have a global view of the good ones within the - app. I was particularly concerned by the process for scanning an item, because it required a good number of taps and screens due to the permissions needed for the function. Here there is some of the feedback I received.

- - - - Feedback gathered during the second testing phase - -
- -
-
-

Screens corrections

-

The feedback gathered allowed me to fix different issues. These are the resulting screens for scanning items and the one for style customization.

+ +
+
+

Screens corrections

+

+ The feedback gathered allowed me to fix different issues. + These are the resulting screens for scanning items and the + one for style customization. +

+
+
+
+
+ + + + Fixes applied to the screens after testing + +
-
-
- - - - Fixes applied to the screens after testing - +
+
+
+

Final screens

+ + + Fixes applied to the screens after testing + +
-
-
-
-
-

Final screens

- - - Fixes applied to the screens after testing - +
+
+

Prototypes

+
+
+
+

+ Android +

+
+
+

+ iOS +

+
-
-
-

Prototypes

+
+

Takeaways

+
-
-
-

Android

+
+
+

Reflection on the project

+

+ The project went quite well. If I had the opportunity to work + on a similar project again, I think I would approach a few + things differently. I would interview a few people early on to + make sure my assumptions are correct and I would try to gather + feedback on my wireframes through a face-to-face interview or + a video call. While different people appreciated the features + I have implemented in my app, I think it would be better to + gather some data early on and have that guiding the project. +

-
-

iOS

+
+

Possible future implementations

+

+ In a second iteration, I would push further the app abilities + to enhance the user shopping experience. The app could provide + notifications when the user is nearby shopping and there is + some new item that follows the custom style established. + Perhaps this feature could be activated during a certain time + range, like weekends only, so it would not bother the user in + the morning while commuting. +

-
-
-

Takeaways

-
-
-
-
-

Reflection on the project

-

The project went quite well. If I had the opportunity to work on a similar project again, I think I would approach a few things differently. I would interview a few people early on to make sure my assumptions are correct and I would - try to gather feedback on my wireframes through a face-to-face interview or a video call. While different people appreciated the features I have implemented in my app, I think it would be better to gather some data early on and have - that guiding the project.

-
-
-

Possible future implementations

-

In a second iteration, I would push further the app abilities to enhance the user shopping experience. The app could provide notifications when the user is nearby shopping and there is some new item that follows the custom style - established. Perhaps this feature could be activated during a certain time range, like weekends only, so it would not bother the user in the morning while commuting.

-
-
-
- -
+
- - - - + + + + diff --git a/portfolio-redesign.html b/portfolio-redesign.html index 5ee05aa..7fb1123 100644 --- a/portfolio-redesign.html +++ b/portfolio-redesign.html @@ -1,170 +1,322 @@ + + + + + + + + + + + Francesca Paris | Portfolio Redesign + - - - - - - - - - - Francesca Paris | Portfolio Redesign - - - -
-
-
-
-
- + +
+
+
+
+
+ +
-
-
-
-
-
+
-
+
- - - - Introduction image with phone and laptop showing the website + + + + Introduction image with phone and laptop showing the website
-
- -
+
+ +

Project Overview

-

For this project I created a new visual style of a 3D portfolio. I kept the same overall structure but updated colours, fonts and added icons.

+

+ For this project I created a new visual style of a 3D portfolio. I + kept the same overall structure but updated colours, fonts and + added icons. +

My role: UI Designer

-
- -
+
+ +

Colours

- - - - Colours changes + + + + Colours changes

The new colours have a fresh, light and simple vibe.

-
+
- -
+ +

Typography

- - - - New typography styles + + + + New typography styles
-
+
- -
+ +

Final screens

- - - - Final screens + + + + Final screens
+
-
- -
+
- - - - + + + + diff --git a/quick-tasty2.html b/quick-tasty2.html index 48fde29..b3338f9 100644 --- a/quick-tasty2.html +++ b/quick-tasty2.html @@ -18,7 +18,7 @@ href="https://fonts.googleapis.com/css2?family=Encode+Sans+Semi+Condensed:wght@100;200;500&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Work+Sans:wght@500;600&display=swap" rel="stylesheet" /> - + Francesca Paris | Quick & Tasty