Redesigning my portfolio projects
After being graduated from the Ironhack UX/UI Design bootcamp, I decided to take my time to build my portfolio and to cultivate myself on UX/UI field in the meantime.
I looked here and there to see what’s going on in the Product Design world, where I can find inspiring articles and works, as well as looking to improve my UI skills.
But the more I dug in UX/UI articles and websites for inspiration (Refero, Page Collective, Mobbin, agency’s websites, etc), the more I started to feel that some of my designs could benefit from improvements.
I decided to take a closer look at the UI of 2 of my portfolio’s projects:
- A wellness app
(for more about the context and research part: read the full article about Healthy/me here) - An e-commerce website
(for more about the context and research part: read the full article about L’Atelier de Torréfaction here)
For these 2 projects, I will walk you through the process and show you before and after screens.
But first of all, I would like to say that my goal was trully not to compete with UI/Visual/Graphic Designer…but, I read somewhere that “even if you have strong UX research and process, if your UI is shitty, you’ll not attract any recruiters”.
With this redesign process I really wanted to feel more confident in my design skills and my portfolio, and feel more ready to start my job hunt ;)
Redesigning my wellness app: Healthy/me
For more context, research part and findings, click here.
01. The process
To tackle this challenge, I dived into the research to re-immerse myself into the wellness app project.
To sum up: in a group of 2, our challenge was to create a wellness application for a fictitious non-profit organization dedicated to promoting health and wellness, The Daily Health Conference. This fictitious client asked designers to rethink how people can adopt and commit to a health-improving routine.
I took a closer look at the high fidelity prototype and there was no doubt: it didn’t feel like an application. It looked more like the mobile version of a website…
So I started to deconstruct my vision and to download a looot of apps while looking for inspirations online.
But it was not as easy as I thought it will be. Even to create micro-interactions, I realized that, at first, I was always created some for desktop, as if my user was going to use a mouse.
02. The visual identity
I decided to keep most of the visual identity we created during our first design process because we had some testings with this specific atmosphere. So I wanted to stay coherent with that.
- Color palette
But, I decided to work with a new color palette, based on the yellow we already chose. I switched the orange color for a softer one and add a touch of green.
I wanted to keep the fresh, healthy and dynamic look of the app, but get rid of the orange we worked with on the first version, which I find too aggressive for the eye. - Typography
I decided to replace the original font Inter, for 2 different ones: Syne (for titles on images) and DM Sans for the rest of the text. 2 sans-serif modern typos; Syne here to add a graphic touch on visuals.
Below you can see the new style guide (if you want to compare, you can find the old one in this article):
03. Some before and after screens
A closer look on the V2:
During this redesign, I focused on making the product looks like an actual application. Long story short: it took me a lot of time, even if I used apps every day…
For example, I get rid of the header images that were on every screens, but which made the whole thing look too much like a website.
The most important improvements were done on the dashboard. The challenge was to make it more appealing, visual and quickly understandable. So I worked with the new color palette and add new micro-interactions.
04. The new design
Here is the full prototype of this V2 in video:
Redesigning my e-commerce website: L’Atelier de Torréfaction
For more context, research part and findings, click here.
01. The process
I will be quicker than the description of the project above, mostly because I followed the same process: the “dived-back-into-the-research-part-to re-immerse-myself-into-the-project-and-refresh-my-memory”.
My goal with this redesign was to give the website a more professional and up-to-date look, putting some new UI skills I gained during and after the bootcamp, especially regarding micro interactions.
I also worked on a Style Guide as this was not mandatory for this project during week 2 at Ironhack.
02. The visual identity
- Color palette
To stay coherent with the vibe of the boutique (minimalist, industrial, clean, modern), I decided to keep the gray color but add some shades.
I add a touch of brown to remind the color of the coffee bags and give a handcrafty touch to remind that we are on an independent artisan’s shop.
It was also a color users expected to see on this kind of site, as they talked about it during our Users Interviews and Tests. - Imagery
I decided to add some visuals (shop, coffee, equipment) to have more content so we enhance the site visually and make it more professional and align with the market.
03. Some before and after screens
- Homepage:
- Products page:
- Product details:
- Shopping cart:
During this redesign, I focused on transcribe the minismalist and industrial atmosphere of the parisian shop by giving a clean look and working with shades of gray. The brown color is here by touch, to highlight content and warm the overall design.
It was also important to me to add content (writing and visual) on the homepage because the 1st version feels a bit empty so not professional enough.
Another important improvement was my work with components and micro-interactions: I wanted to give the new design a more modern and minimalist look, for example with thin lines when hovering a CTA, an image or a quantity/type of coffee. I wanted simple but elegant micro-interactions, like the feeling I had when I walked into the shop.
04. The new design
Here is the full prototype of this V2, in video:
To conclude, I will say that these redesigns took me a lot of time because it was also a good way to learn new skills, practice and spend time looking for inspirations, understanding how to work with colors, how to create more complex micro-interactions, get lost along the way sometimes ;)…
It was really interesting to discover new designers and explore communities like Behance or Dribble.
As I said first: my goal was not to be a UI or Graphic designer, but really to have the feeling that my UI was more aligned with my UX on my portfolio, and feel more confident to start a serious job hunt ;)
Thanks for reading!
You can find my work on my portfolio and if you want to say “hello”, let’s connect on Linkedin :)
