Here are some of my projects

You'll find samples of my work below. I have selected a few projects that highlight my experience in UX, user research and product strategy. If you have any questions please email me at hello@lanceplaine.com

 
 

Other projects

If you have more time, feel free to check out these projects. And as always if you have any questions please email me at hello@lanceplaine.com

Slack iPhone redesign concept

UX/UI design - Sketch

header@2x.png
 
 

πŸ“‹ 1. Description of the project

This article has been originally published on Medium.

Like most people in the tech industry, I have used Slack in my work on many occasions. But while I always thought that the UX was intuitive on desktop, I felt the iPhone version could be improved. I decided to analyze in detail what could be revised and to propose a redesign concept.

 

πŸ”¬ 2. UX analysis of the current Slack app

analysis_1@2x.png
analysis_2@2x.png
analysis_3@2x.png
analysis_4@2x.png
 

πŸ‘¨πŸ»β€πŸ’» Process and work

3.1 Low-fidelity mockups

Once I understood the issues I wanted to fix on the Slack UX, I started to do low-fidelity mockups.

 Some of my early drawings

Some of my early drawings

 

3.2 High-fidelity mockups with Sketch 49

Once the low-fidelity mockups were finished, I started working with Sketch. But before I even started sketching the redesign concept, I wanted to reproduce the current Slack iPhone UI. It allowed me to better understand the design of their iOS application and ensure that my proposal would respect Slack’s design.

 I did the original UI for both the β€œAubergine” theme and the β€œHoth” theme

I did the original UI for both the β€œAubergine” theme and the β€œHoth” theme

Once the original UI was reproduced in Sketch, I started my redesign concept. I made sure to use the prototyping feature of Sketch 49 as you can see below. You can also download the file and try it for yourself. I also uploaded the prototype on Sketch Cloud if you want to preview it directly from your browser.

prototyping@2x.png
 

3.3 Versioning with GitHub + Git LFS

I used GitHub (with Git LFS) in order to manage the different iterations of the project.

 GitHub allows me to easily see the changes for each commit I made

GitHub allows me to easily see the changes for each commit I made

 

πŸ’Ž 4. Outcome: Redesign concept

You’ll find the most important screens below along with some explanations:

 

▢️ 5. Preview the prototype

You can preview the prototype directly from your browser thanks to Sketch Cloud: sketch.cloud/s/5n99y

 

⬇️ 6. Download the file

You can download the Sketch file on sketchappsources.com.

It contains:

  • 15 artboards of the original Slack UI as of March 2018
  • 14 artboards of the redesign concept

Talentoday business website (2017)

UX/UI Design - WordPress - HTML/SCSS

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 Key goal

The purpose of of this project was to redo the "Talentoday business website", which is the part of the Talentoday website that contains the explanations about our BtoC and BtoB products.

The new website should:

  • Have a professional and clear business site for investors, consumers and businesses.Β 
  • Have a separate marketing managed site that does not rely on engineering team.

1.3 My role and responsibilities

I was responsible for the UX/UI design of the website along with coding the Front-End (HTML/SCSS).

1.4 Timeline

The project was launched mid September 2017 and the goal was to launch the main pages end of October. All the pages should be released by the end of the year.

This project was time sensitive because the web pages contained content that would be shown to investors prior to the Series B funding.

 

πŸ€” 2. Problem statement

The previous website did not fit the needs of potential customers and investors. There was a major confusion between BtoB and BtoC target markets.Β It used to be great but since the product evolved, it did not fit the vision of the company anymore.

There was also a lack of flexibility to make marketing changes because corporate site was embedded with production site. Which mean everytime the marketing team wanted to change one word they had to wait for the next push in production planned once a week.

To summarize it, instead of a strong asset our website was a liability.

 

πŸ‘₯ 3. Users and audience

3.1 BtoB

One of the particularity of Talentoday is to have both BtoB and BtoC customers. In projects like this it makes the work quite hard but also interesting.

We had 3 types of BtoB customers:

  • Recruiters
  • Managers
  • Career counselors

3.2 BtoC

A lot of users are coming to the Talentoday as BtoC users. There are 2 main categories of people: Candidates who have been invited to take the personality and other people such as students who just want to know more about their soft skills. In both case it is important that they can easily identify how to sign up and take the free assessment on the website.

3.3 Investors

One of the major reason why our CEO wanted to update the business website was to update the vision of the company. Indeed the vision of the company changed over time and it was important to have a website up-to-date before starting to raise our Series B.

3.4 Potential candidates

We often got spontaneous candidature letter from people visiting our business website. Also all the candidates that we interview take a look at our website.

The team cohesion is really important at Talentoday. We wanted the potential candidates to be aware of this so we added a lot of pictures of the Talentoday team on the "About our company", "Team" and "Careers" pages. We also took the commitment to list every single employee on our team page.

 

🎭 4. Roles and responsibilities

3 people where at the core of this project: Allie, Mark and me:

  • Allie was in charge of the marketing content.
  • Mark a contractor that we hired to work on the back-end and sysadmin set up.
  • I was doing the UX/UI design and coding the front-end.
 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.1 Project strategy

Proposed solution:

  • Split and migrate the site so that it is owned and managed by the US marketing team.
  • Improve clarity through the messaging and mapping of the site.

Implementation:

  • Split website from production site to its own using WordPress. Marketing will no longer rely on engineering team to make changes to site.
  • Hire contractor to migrate site that we will foster a long term relationship with.
  • Work on content clarity and messaging.

Strategy:

  • Use a step by step process to ensure that all things are working.
  • Focus on key high impact pages and progressively add others as the project goes on.
  • Always do an intensive benchmarking and reflexion before implementing changes.
  • Install analytics tools to measure changes and improvements.

We decided to implement an iterative process where all the non-essentiel pages will be done in phase 2 and 3 during development sprints:

project_strategy@2x.png
 

5.2 Sitemap

Before going into the details of each page we carefully analyzed the previous sitemap and made multiple propositions.

 

5.3 Early drafts

For every pages we always followed the same process:

  1. Analyze the current pages and list the issues.
  2. Benchmark best practices and competitors websites.
  3. List all ideas and improvements.
  4. Whiteboard low-fidelity mockups.
  5. Draw high-fidelity mockups with Sketch.
 White-boarding is really important to me. It helps me save time by being able to iterate on a low-fidelity version of the website.

White-boarding is really important to me. It helps me save time by being able to iterate on a low-fidelity version of the website.

 

5.4 Sketch mockups

Once the whiteboarding done and approved I started doing the high-fidelity mockups in Sketch.

We used collaboratives tools such as InVision a lot to interact between the marketing, UX/UI and developers:

 Example of InVision comment from my colleague Allie to send me marketing updates

Example of InVision comment from my colleague Allie to send me marketing updates

 
 I always export the assets during the design phase to have them ready to use during the development of the Front-end

I always export the assets during the design phase to have them ready to use during the development of the Front-end

 

5.5 Accessibility

Accessibility (a11y) is really important to me. During the whole project I made sure to implement as many accessibile feature as I could without compromising the timeline.

One of the a11y feature is to make sure that every image and link has a title.

 The specifications contains elements that are not visible in the mockups such as the SEO and a11y.

The specifications contains elements that are not visible in the mockups such as the SEO and a11y.

 

5.6 Continuous analysis

As stated in our project strategy, the plan was to deliver one page at a time and to continuously analyze the user behaviors in order to improve the experience. You'll find below and example of Hotjar heatmap for the homepage. This heatmap was recorded using the data of 10,0003 devices.

What we learned from this heatmap:

  • The "Change language" dropdown is used a lot: More than 10% of the clicks. β†’ Maybe it would be better if the input was located somewhere more accessible for the user.
  • Some people ends up clicking on the underlined titles such as "Use it to Recruit people" instead of clicking the "Learn more" button. β†’ Maybe theses titles should be clickables as well.
  • As expected the BtoB links are less used than the BtoC links because most of our traffic comes from consumers. But it doesn't mean that we should hide the BtoB links since most of our revenues comes from our enterprises solutions.
  • Almost everybody who clicks on the button "I agree [the cookie policy]" doesn't read the cookie policy. 613 people clicked/taped on the "I agree" button while 3 people clicked on the "cookie policy" link.
 

πŸ’Ž 6. Outcome

Thanks to a good teamwork between Allie, Mark and me we were able to release the new Business website on time.

 

πŸ“ 7. Appendix

You'll find below the screenshots of the desktop versions for the most important pages:

First 3 millions users on Talentoday, thanks to sharing the personality radar

Product design - Project management

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 Key goal

The key goal of this feature was to allow the Talentoday users to share their personality, motivations and Talent ID on social media such as Facebook, Twitter and LinkedIn.

1.3 My role and responsibilities

I was responsible for designing the product (Web interface and images to share) and managing the project.

1.4 Timeline

3 weeks to code the project for a delivery mid-March 2014. Β 

 

πŸ€” 2. Problem statement

The initial challenges of this project were the following:

  • Designing an image to share on social media that people would be visually pleasing.
  • Making sure that the image is easy to understand, and included Talentoday branding with the logo and URL.
  • Designing the sharing user experience and user interface.
  • Deciding which social media to use.

Later we would discover that having a scalable feature was actually a big challenge as well.

 

πŸ‘₯ 3. Users and audience

Talentoday was designed for BtoC and BtoB. Altough both would be able to share their personalities, this release was intented for the BtoC audience.

An iPhone app was released during the same time, but wasn't part of the scope of this project, as it was handled by a web agency.

 

🎭 4. Roles and responsibilities

During early 2014, the Talentoday team was composed of 12 people. This project involved most of the company.

The project strategy was done during the Executive meetings between my CEO, COO and me. The Back-End development was done by my coworker Daniel. And I was working on the product and UX.

A few weeks after the release, once the project started to go viral everyone in the team jumped to help: All the developers improved the performances of the websites and did some adjustments so the website can support more people. On the other side the marketing team communicated about the questionnaire and the personality feature which helped people know about Talentoday.

Having everyone involved in this project was one of the best experiences of my life. It was motivating to see all the team working for the same goal with such devotion.

 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.2 Images

I chose a square for the format of the image because it was the most adapted for mobile sharing. I did multiple tests by sharing mockups on Facebook, Twitter and LinkedIn to see what worked best.

 Few iterations have been done on whiteboard/paper but most of the iterations were done in Balsamiq

Few iterations have been done on whiteboard/paper but most of the iterations were done in Balsamiq

 Final personality and motivations mockups on Balsamiq

Final personality and motivations mockups on Balsamiq

 

5.2 Sharing modal

Mockup made on Balsamiq of the modal to share the personality on Twitter

 

πŸ“ˆ 6. Virality in Peru... and everywhere else

6.1 Students or users?

Only few days after the release of the sharing feature we started to see more and more people coming to our platform. Thanks to our Back-Office we realized that people were coming by batch from the same school everyday. For example I remember seeing one of my friend in the Back-Office along with 45 other students from the same school the same day. And I didn't even asked my friend to take the questionnaire. But I did share my personality radar on Facebook. 45 people from the same school back in time was giantic. We had less than 50 people signing up per day on average so events like this were definetely noticeable.

We decided to investigate this trend and found out quickly that people loved to share their personality radar on Facebook and it was encouraging people to take the test. Of course this was the purpose of the feature so we weren't totally surprised but the speed of the propagration made us think about other factors. At the begining when peple were signing up from the same school so we were wondering if teachers asked their students to take the questionnaire because it was actually our main source of users in the past before the release of the sharing feature.

6.2 Β‘Viva PerΓΊ!

End of March, only 3 weeks after the launch of the sharing feature we start seeing a pic of users in Peru πŸ‡΅πŸ‡ͺ.

While it was a total surprise that this country was the first one to go viral the website was available in Spanish thanks to the work of my colleagues Jocelyne and Sol.

Also following the virality impact study of our product Jocelyne and Paige did an amazing job at communicating about the product to make sure that students would sign up.

6.3 One million users

Begining of April, users from other countries start to also go on the platforn at an amazing speed:

  • April 20th: 150,000 members
  • April 23th: 500,000 members
  • April 25th: 1,000,000 members

6.4 Issues and focus on the personality

The amount of people we encounter every day was amazing and it doubled everyday. But it did come at a cost: Almost everyday the website was down because of the number of users. In order to solve this issue we paused all of our projects in progress and spent time to improve the scalability of the website. At this moment the Engineering team was spending about 12 hours a day and 7 days a week optimizing the website.

But the website was big and in order to focus our resources we analyzed the user flow. After looking on both Google Analytics and our internal analytics the folloing statements became obvious:

  • People only cared about taking the personality assessment and sharing their results on social media.
  • The feature to invite users via email was skip most of the time.
  • The careers feature wasn't used much.
  • People did't compare a lot with their friends.
 Most of the users only followed theses 4 steps

Most of the users only followed theses 4 steps

On the other hand we looked at which back-end requests were taking most of our resources. And while features like "Compare with your friend" didn't take much resources the "Careers" and "Invite your friends via emails" sucked a lot of power from the Heroku dynos.

We decided then to hide (via a simple display: none; in CSS) the features "Careers" and "Invite your friends via emails". After push in production it appeared that we were right and the website was much faster while having a similar number of users.

6.5 Migration to AWS

The more users we have the more we try to optimize our back-end requests and increase the number of dynos on Heroku.

But soon we reached the limit of 100 dynos on Heroku and decided to switch to AWS. Money was also a factor: From less than $500 per month for our servers at the begining of the year we were now paying $20,000 a month.

Begining of May we successfully transition from Heroku to AWS.

 

🌊 7. The "wave effect"

We analyzed a lot the flow and behavior of our users. We were mainly using our internal anaytics, Google Analytics and Excel. This analyze became handy and allowed us to predict a sad truth: Most of the virality was only temporary.

We had a website that was great for a one time usage every 6 months but not for a weekly activity. Indeed once the user completed his/her questionnaire he/she hasn't a lot of other stuffs. And users were only able to retake their personality assessment every 6 months.

The virality was easy to follow when looking at the number of users per country. What was happening is that people took the test and shared their results on social media. But once a percentage of the population had taken the test they didn't have any reason left to come to the platforn again until 6 months.

But because people from more and more countries were signing up everyday the sign up per day chart was looking like an exponential. Luckly we were able to foresee the reality which was that the number of sign up would drop. It allowed us to prepare the future and not to focus only on the sign up figures.

It is important to notice that even if the number of sign up drastically dropped we were able to keep more than 2,000 new users per day, compared to less than 50 users a day at the begining of the year. So the feature was a total success.

waves@2x.png
 

πŸ’Ž 8. Outcome and lessons

8.1 Three millions users

The outcome of this project was simply amazing. From about 14,000 users before the project start we were able to quickly reach one million users and later reached more than 3 millions.

Here are some of the outcomes:

  • Brand awareness: With 3 millions users we were able easily market the Talentoday brand.
  • Attract new investors and encourage the current ones to invest more in the company.
  • Great for data scientists. With such an amount of data we were able to attract data scientists and build algorithm without compromise the privacy of our users.

8.2 Personality radar on Facebook

We built some in-house analytics to know more about the usages of the sharing feature. By far the Personality radar was the most shared (>90%) while the Talent ID and Motivations were about the same.

Out of the 3 sharing options (Share on Facebook, Twitter or LinkedIn) Facebook was the most popular by far. Shares on LinkedIn were almost inexistantes. The lack of sharing on LinkedIn could easily be explained. Back in time the LinkedIn newsfeed was almost not used. Also the LinkedIn UX of the newsfeed wasn't great to say the least. We were often joking asking test users to find a content that they shared. And no one was able to find it ^^. Since then the UX and usages of LinkedIn improved a lot.

 Talentoday T-shirt with my very own personality

Talentoday T-shirt with my very own personality

 

8.3 Questionnaire reduction

Early 2014 we started a project with a Stanford PhD student. We were worry that the length of the questionnaire - 128 questions and 15 minutes - could be reluctant for some users. The data-scientist job was to identify using which questions could be removed while keeping the precision of the results.

But after the success of the questionnaire we decided to cancel the project. The millions of people proved us that a long questionnaire isn't incompatible with a high virality. Also after interviewing people we realized that altought a long questionnaire was sometimes annoying it was giving people a feeling of reliability.

8.4 Scalability

One of the leasson of this project was about the scalability. We realized how important it was to design a scalable product from the begining. The way the algorithm of the "Career recommendations" feature were working for example were not scalable at all.

For future releases we made sure to take into account the scalability. Escpecially because we were no longer a website with 14,000 users on it.

8.5 Paid vs. free

We realized along this project the importance of paid customers versus free customers. Yes having a lot of users on the platform was great but it was also costing a lot of resources and money. In the meantime the few Enterprises customers were generating money.

In the future we decided to move more and more on the BtoB side. We decided to keep BtoC features because we wanted to help students and users discover themselves for free but we limited the features and the resources we allocated for theses projects.

Talentoday pricing page

UX/UI design, Benchmarking, HTML/SCSS

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 Key goal

The project was to add a pricing page to our business website. Success was defined by the following conditions:

  • Design easy to understand content; people looking at the page should find all the answers they need.
  • Ensure that the design would be fast and easy to code. A front-end developer should be able to code the page under 2 days in pure HTML and SCSS. No JavaScript should be required.

1.3 My role and responsibilities

I was in charge of both the user experience of the page and coding in the WordPress website.

1.4 Timeline

The project needed to be delivered within two weeks or 10 days of work. Starting with sentence 2: I decided, together with my colleague Allie, to use the first five days to design the page. This included talking to the sales department about the product definition, benchmarking the different options, white boarding the first drafts, and ultimately doing the UX and UI using Sketch. The second week was used to finalize the marketing content, code the page, and push it to production.

 

πŸ€” 2. Problem statement

There were multiple issues to address in order to design the page:

  • First, from a product perspective we needed to work with the sales team in order to simplify the pricing, or at least decide which part of the pricing we should display. In fact, the pricing sheet used by sales was an Excel file with multiple tabs and was very hard to understand.
  • The design of the page should be flexible to add the online purchase afterwards.
  • Another question was where to place the pricing link on our website. Should it be highlighted or hidden?
 

πŸ‘₯ 3. Users and audience

This web page was designed for professional users who were interested in the Talentoday Manager solution.

 

🎭 4. Roles and responsibilities

This project was mainly the result of the collaboration between five people. I managed the UX design and front-end development. Allie was in charge of the marketing. Peter and Claire-Marie were the sales managers for the Americas and Europe, respectively. And finally Eric, the USA general manager, was responsible for approving the drafts and the final design.

 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.1 Pricing sheet simplification

As mentioned previously the first work which had to be done was to simplify the pricing or at least decide of the elements to display.

5.2 Benchmarking

For this particular project benchmarking was really important. Indeed the pricing page is the kind of web page where we were not looking for originality. Instead we wanted to make sure to design a page that people would understand really fast.

5.3 Early drafts

Following the benchmarking we listed what we wanted to appear on the page:

  1. Header and navigation: It will be the same as the other "Talentoday Manager".
  2. Pricing table at the top of the page
  3. Customer section: Popular logos from companies using our product as well as a quote
  4. FAQ: Answers to the questions that people ask the most when they contact us on Intercom to know more about our pricing.
  5. Tagline and call-to-action for the free trial at the bottom of the page.
early_draft.jpg
 

For the pricing table multiple layouts have been considered. We picked the layout "Alpha" because it was the team's favorite but the other layouts were valid as well.

Few of the responsive design versions considered

 

5.4 Sketch mockups

It was decided to only work on the pricing table for the first release. Other sections like FAQ or the customer logos and quotes would arrive later.

It is interesting to note that prior to this project, about 2 years before, a pricing page already existed on the website. Even if the pricing changed a lot few elements were kept such as some colors.

 

5.5 Design with accessibility in mind

As always I tried to design with accessibility in mind. It translated in a variety a little actions such as:

  • Making sure that the page is fully responsible and accessible on any size of device from mobile to desktop.
  • Add 'title’ for buttons and images/icons
  • Coding the website using clear and logic HTML markup. For example by using β€˜ul’ lists instead of β€˜table’ when it makes more sense.
 

πŸ’Ž 6. Outcome and lessons

We were able to deliver an easy to read page which was fast to implement on the website. My colleague Allie and I took less than the 10 days of work initially planned, but the project was released one week late. It was due to the fact that the time to simplify the sales pricing sheet was underestimated. (This was a result of underestimating the time needed to simplify the sales pricing sheet).

If we had to redo a similar project, we would ask for the sales team to simplify the pricing sheet ahead of the UX design. However, we were able to solve this timing issue and meet the assigned deadline by working on other pages on the business website while we waited for feedback on the pricing sheet.

 
pricing@2x.png

Octarine website

UX/UI Design - HTML/Less

 
 

πŸ“‹ 1. Description of the project

Octarine, a cyber security company in stealth mode, needed a website to go with the launch of their platform. Up until now, Octarine had never had a public website and were planning to opportate in stealth mode until the launch of their platform. My colleague and I were hired to design a website that would present the product for their public launch. Most of the marketing content was provided by Octarine and we were in charge of the UX, UI and code.

 

πŸ‘¨πŸ»β€πŸ’» 2. Process and work

2.1 Theme and brand

The Octarine team asked that we work with Weebly so that they would be able to easily manage the marketing content when we were done with the design of the site. Prior to selecting a theme we made sure we fully understood Octarine’s vision and goals for the site. When we chose the theme we took into account their brand, what websites they liked and what features they wanted on the website.

 Colors palette

Colors palette

 Octarine logo

Octarine logo

 

2.2 Mockups

Following theme selection, we started drawing the UX of the website. Octraine let us know at the onset that we had under a month to design, code and launch the site. It was essential that we produce a simple and clean design that would fit with the companies timeline.

 

2.3 Sketch and code

Once the mockups were approved by the Octarine team we switched to Sketch and InVision. The Octarine team was able to use InVision to easily ask for changes, on both the marketing content and UX/UI.

In order to save time we only used Sketch for the complex design parts of the website. For the simple sections we directly coded the UI into Weebly.

 In order to get the UI right, all of the complex sections were designed with Sketch

In order to get the UI right, all of the complex sections were designed with Sketch

 

🚧 3. Difficulties

The difficulties we had during the project were mostly related to the Weebly platform. Personally, it was my first experience with Weebly and the platforms constraints made the project more painful than others I have worked on in the past.

One problem we had to overcome was the Weebly’s preview mode. The preview only renders half of the CSS properties which makes it really difficult to code anything. Ultimately, it was an issue for the UX/UI flow because it forced us to limit the number of iterations.

 

πŸ’Ž 4. Outcome

We were able to produce a fully functioning site for Octarine in one month. They were pleased with their outcome and by the end of the project we were able to achieve much more than we initially anticipated. Here are some screenshots of the website that we delivered:

 
Allie and Kevin were super efficient and easy to work with. Power Design was also very responsive, and they made structural changes to our site in days. Powers design was able to produce a fully functioning site for our startup in a little over one month and took care of everything from UI/UX design, brand, site build, custom code and project management. I highly recommend working with Kevin & Allie and the team at Powers Design and would use them again.
— Wiliam Choe, VP Product at Octarine

Cap'Net Pressing

UX/UI Design - HTML/SCSS/JavaScript

header@2x.png
 
 

πŸ“‹ 1. Description of the project

While visiting one of my best friend and his girlfriend in Lyon we talked about her family business. They own several dry cleaning locations in Lyon under the name of Cap'Net Pressing. Marine talked with me about the plans for the business and the issues with the current website they have.

Indeed the website for the dry cleaning is really old looking, not optimized for mobile and also hard to navigate. My mission was to analyse the current issues and to propose her a solution. I started by collecting feedback from her and other people in order to do a complete analyze of the issues. Then a made several iterations of propositions for the new website on whiteboard, design it in Sketch and finally code it to push it online as a proof of concept.

 

πŸ€” 2. Problem statement

2.1 Analysis of the current state

As stated before the website not only looked old (you can click on the first picture below to enlarge it) but it was also hard to navigate and no optimized for mobile. I did a complete analyze of every pages but in order to shorten this doc I will mainly talk about the homepage.

 

2.2 Not optimized for mobile

  • The CSS style of the website did not support mobile devices forcing users to zoom in and out in order to access content.
  • The slideshow on the homepage was using the Adobe Flash technology which doesn't work on mobile.
  • Some elements like the modal to see the dry cleaning locations was really hard to use on mobile.
 

2.3 Confusing navigation and useless sections/pages

The navigation was confusing because first of all there was 2 levels of navigation where there should only have one:

  • A header (In red in the image above "Split of the different sections"):
    1. Our locations
    2. Other businesses in the areas
    3. Contact us
  • A navigation (In blue in the image above "Split of the different sections"):
    1. Home
    2. Services
    3. Our dry cleaning locations
    4. Testimonials
    5. News
    6. Contact us
    7. Map/Our locations

Here are some of the issues I identified:

  • The "Contact us" page is listed twice.
  • The "Our locations" map modal is listed twice, under a different name.
  • The "Our locations" which is a modal displaying the locations on a map and the "Our dry cleaning locations" page listing the dry cleaners can easily be merged.
  • The "Other businesses in the areas" page is useless for the visitor and frankly feels spammy. It lists the websites of 6 businesses in Lyon that also had their website made by the same web agency.
  • The "Testimonials" page which is intended for visitors to leave a review is not used. 2 years after the release of the website there was only 2 good reviews which were posted around the same time just after the release of the website. As a visitor I will guess that these 2 reviews were written by the owner or their family/friends.
  • The "News" page was not used. Only one news in 2 years.

The homepage itself also had some issues but more on the content side were a lot of the text didn't bring any values. Also the link to Google Plus was useless because almost no one use this social network, not even the owner of the owner of the dry cleaners who did not post any content.

 

πŸ‘¨πŸ»β€πŸ’» 3. Process and work

Following the analysis of the website I decided to divide the new website in 5 different sections:

  • Homepage
  • Locations: This section combines the list of dry cleaners and a map.
  • Services: List of all the services offered by Cap'Net Pressing
  • Contact
  • About us

I worked then on the different layouts and pages:

 Few of the different layouts I considered. I ended up choosing the layout "gamma".

Few of the different layouts I considered. I ended up choosing the layout "gamma".

 Drawing of the "Locations index" page. The reality ended up being a little bit different. For example I was unable to find good pictures for each dry cleaner so I did not display them.

Drawing of the "Locations index" page. The reality ended up being a little bit different. For example I was unable to find good pictures for each dry cleaner so I did not display them.

 

πŸ’ŽΒ 4. Outcome

You will find below the final proposition done after multiple iterations and discussions:

The mockups were made with Sketch, hosted on GitHub for a the versioning and pushed on InVision in order to make it a working prototype and collect feedback.

Color selection for the Talentoday's motivations radar

User testing - Project management

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 Key goal

The goal of this project was to find a new color for the "Motivations" cluster.

1.3 My role and responsibilities

I was responsible for managing the project and testing the color variations.

1.4 Timeline

This project was completed in two phases of one weeks: One week to find a new color and another week to apply the changes in all the mockups and specifications.

 

πŸ€” 2. Problem statement

2.1 Two shades of blue

Talentoday has a soft skill assessment that renders the personality and motivations results using 28 criteria and 6 clusters. Theses 6 clusters (Dare, Communicate, Adapt, Manage, Motivations, and Excel) have a different color. However the "Manage" cluster and "Motivations" cluster were both blue and sometime people confused them. The purpose of this project was to attribute a new color to the "Motivations" cluster.

 The previous 6 clusters of criteria. As you can see the "Manage" and "Motivations" colors were too similars.

The previous 6 clusters of criteria. As you can see the "Manage" and "Motivations" colors were too similars.

 

2.2 Use cases

The "Motivations" color is used in 2 main cases: The motivations radar and the Target Profile radar:

 

🎭 3. Roles and responsibilities

This project was completed in collaboration with my colleague Joy and the responsabilities were shared.

 

πŸ‘€ 4. Iterations and user testing

4.1 Color variations

You'll find below few of the colors we tried:

colors_propositions@2x.png
 

4.2 In-person user testing

During this project we did a lot of iterations and user testing. For financial reasons most of the user testing was done with people we knew or who were located in our office building. We asked about 30 people.

We printed some of the iterations with a different print quality (High and low) and always checked the render on screens as well.

We also removed the Orange color border on the test PDF to make sure that it won't influence the users.

 

4.3 Online user testing

After reviewing our choices with people, we found out that the best colors to replace the dark blue were Orange, Pink and Dark gray. In order to validate our choice we also did some online user testing. You'll find below 2 of the online user testings we did using PickFu:

 

4.4 Team feedback

Joy and I discussed a lot with the rest of the team during this project. We wanted to make sure to involve everyone in the team.

Using in-person meetings, video chats and Workplace, we asked multiple times the Talentoday team about which color they liked the most. On the last round, between pink, orange and gray they liked the orange color the best.

 

🧑 5. Final decision

5.1 Orange is the new blue

After multiple reviews with the Talentoday Team and users we decided to use the orange. Although some options such as a darker blue or a dark gray were easier to read it wasn't a good option from a brand perspective. The executive decided that the orange, since it's one of the color of the Talentoday logo, was a better choice.

 The Talentoday logo

The Talentoday logo

 
 
 

5.2 Communicate the change with the developers

As always we made sure to give rigorous and complete specifications to the developers about the changes to apply. You'll find below few of the illustrations that were send to the developers. An exhaustive list of every single location were an image or color needed to be change has also been provided.

 

πŸ“ 6. Appendix

Early version of lanceplaine.com (2016)

UX/UI Design - HTML/SCSS/JavaScript

header@2x.png
 
 

πŸ“‹ 1. Description of the project

In April 2016 I decided to redo my personal website. The purpose was to have a clean and really simple website which highlight what I was doing at Talentoday.

 

πŸ‘¨πŸ»β€πŸ’» 2. Process and work

2.1 Analysis

Before I started to draft any mockups I took the time to analyse what I wanted to appear on my website and what was it purpose:

  • Briefly describe my work: Talk a little bit about what I am doing at Talentoday and what is my design process.
  • Contact: Have a way for people to contact me.
  • This website shouldn't be a news feed about me: There are a ton of social media about this like Facebook and Instagram. Instead it should just contain links to my social media accounts.
  • Be short and concise: One page was enough for me. I wanted something that I can do quickly and that would not require a lot of time to update in the following 12 months.
  • Prove what I can do: I wanted through this website to prove that I'm able not only to design a webpage but also to do the related HTML/Scss views. This is why I decided to code this page from scratch instead of using a service like SquareSpace.
 

2.2 Early drafts

After benchmarking a little I started drawing few options. You'll find below the last drawing iteration. The website, which is a one-page application contains the following sections:

  1. Header
    • On the top left 3 anchor links "Summary", "Previous work" and "Contact" with icons.
    • On the top right my profile picture with a chat bubble saying "Hello". The initial plan was to have the page in both English in French. People would be able to change the language via the select input in the footer or on clicking on the chat bubble. When the English language is selected the chat bubble would says "Hello", otherwise it would says "Bonjour".
    • The header has a pentagon shape.
  2. Summary
    • Few lines to describe me and my work process.
  3. Previous work
    • Few sub-sections with illustrations of my work at my previous companies. I ended up later renaming this section "Work" and only talking about my job at Talentoday.
  4. Contact
    • A tagline and a call-to-action to contact me.
  5. Footer
    • On the left my social media accounts: Facebook, LinkedIn, Instagram, Twitter and GitHub.
    • On the right a select input to select the language.
 

2.3 Sketch mockups

Once I had the draft of the website I started to use Sketch to do a pixel-perfect version. You can see below 6 majors iterations that I did on this page:

 

2.4 Exports

Once the Sketch mockups completed and prior to code I make sure to export all the assets:

 

πŸ’ŽΒ 3. Outcome

I designed and coded the website from the ground up. The design was made using Sketch and the website was build using AngularJS and Express. The code was hosted on GitHub and published under the MIT license.

The icons (HTML 5, Sass, AngularJS, Git and Sketch) on the top part of the website were animated using CSS.

index@2x.png

Talentoday Target Profile and matching report

Product design - Product management

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup which improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 What is a Target Profile?

Let's say you have 50 performing employees in your Marketing department and you want to know what they have in common in term of soft-skills. A Target Profile is a radar representation of the most important personality and motivations traits that define the group.

1.3 Key goal

The purpose of this project was to generate two PDF reports that Talentoday customers would be able to sell to their clients.

  • Target Profile report
  • Matching report: Comparison of up to 5 people with a Target Profile.

1.4 My role and responsibilities

I was managing the project and wrote the specifications for the developers.

1.5 Timeline

8 weeks to design the two reports and the user experience to download them.

 

πŸ€” 2. Problem statement

Prior to this project we did not have a Target Profile report and matching report. Our Target Profile and Matching insights were available online, but not as a PDF. In response to client feedback, we decided to create these PDF reports. The main tasks of this project were:

  • Decide the sections included in the reports.
  • Have customized reports were customers are able to select which sections they want.
  • Have an appealing UI.
  • Have great marketing and psychometric content.
 

πŸ‘₯ 3. Users and audience

The Target Profile and matching features were only for the BtoB users of Talentoday with the "Enterprise" plan. The PDF exports would be offered at no cost for the same users.

Most of theses customers were staffing agencies and HR managers.

 

🎭 4. Roles and responsibilities

This project is a perfect example to illustrate the importance of having a great team. As it was an important task for the company every person was able to follow the progress of the project and give their feedback on Workplace and InVision. But mostly 5 people were involved on the project:

  • Allie - Marketing Manager. She was in charge of the content of the PDFs. She interacted a lot with Gabriel to ensure the psychometric validity of the reports and with me to organize the report.
  • Joy - Graphic/UI Designer. She was in charge of improving the UI of the reports and had daily interactions with Allie and me.
  • Ilya - Front-End Developer. He was the one coding the changes. We had a lot of interactions during the whole process to ensure that what we did was possible.
  • Gabriel - Psychometry. He was the one ensuring that the rigorousness and psychometric validity of our reports.
  • Me - Product/UX Designer. I was managing the project and wrote the specifications for the developers. I also helped implement Joy UI decisions in Sketch.

The importance of having a good team cohesion was even more crucial because while Allie, Joy and I were located in San Francisco, Ilya ad Gabriel were located in Paris. But thankfully to a great organizations and great collaborative tools such as InVision and GitHub we were able to remove the 9-hour time difference issue.

Also although each person had it own scope, everyone was able to go beyond and help outside of their main field. Allie for example, thanks to her previous career as freelance designer, was always in discussion with Joy. Ilya, as one of the first employee of the company, is more than just a developer and his feedback are important because he knows the business of Talentoday very well.

 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.1 General process

Here is the process we used for this project and that we are using for a lot of our projects:

  • Step 1 - Draft product specifications
  • Step 2 - Whiteboard mockups
  • Step 3 - Sketch and InVision
  • Step 4 - Final design

It's important to note that we do a lot of iterations for each steps before going to the next step

 

5.2 Step 1 - Draft product specifications

  • Write a draft of the product specifications: What are going to be the pages on the report? What visualizations? Which content?...
  • The product specifications are done following customer feedback in this case. Feedback that we receive via multiple channels such as in-person meetings, Intercom discussions and emails.
  • Discuss with the developers have an rough idea of what is possible to do and how much time it takes. For example the pagination number was too complicated to do with our current PDF generator configuration so we decided not to have it for the first release.
 

5.3 Step 2 - Whiteboard mockups

whiteboard.jpg
 

5.4 Step 3 - Sketch and InVision

  • Define the UI using Sketch.
  • Synchronize every page on InVision so the marketing can add and discuss the content.
 Example of an InVision comment left by Allie

Example of an InVision comment left by Allie

 
 

5.5 Step 4 - Final design

  • Export the assets for the developers.
  • Write final product specifications.
 In order to save time for the developers I always export all the assets and organize them by sprites when it makes sense

In order to save time for the developers I always export all the assets and organize them by sprites when it makes sense

 I always write specifications to explain all the edge cases

I always write specifications to explain all the edge cases

 

πŸ’Ž 6. Outcome and lessons

6.1 Reports

We delivered 2 fully customized reports. You can find below an example with 2 pages extracted from the matching report:

 

6.2 Interface to download the reports

We designed an interface to download the reports. On this modal the user can select the options such as which pages to print for every sections.

 

6.3 Designed for one customer

The PDF reports were mainly based the feedback of one of our major customer. They really loved the feature but the drawback was that the product wasn't tailored as much for the other company.

Some people for example expressed the need to have a more "dull" version of the PDF with less colors. Not as a replacement of the current PDF but as an alternative theme. Few months after this is what we did:

Our major customer being European, another issue we had was that the PDF was designed for A4 paper. But in the US most of the reports are printed on US letter size paper.

  Millimetres Inches
  Width Length Width Length
A4 210.0 297.0 8.26 11.69
Letter 215.9 279.4 8.50 11.00
 Difference between A4 and US letter

Difference between A4 and US letter

 
 

6.4 Importance of talking with the developers

Having a lot of interactions with the developers during the design process of the product is important to me. It allows us to make sure to come up with features that are technically possible and easier to code.

After a talk with one of our developer, we realized that adding the page number on each page was way harder than it seems. In consequence we decided not to display the page number for the first release and also to postpone the "Table of content" pages. We also made sure not to have content that would mention the page numbers such as "See personality radar on page 7".

Another example was with the font we chose. The first one had too much issues with the PDF generator that we were using. Rather than having the developers spend 1 week on it we decided to use another similar font. It might not seems a lot but for a small startup like us it was capital to deliver as fast as we can.

 

6.5 PDF vs. print

The PDFs were designed to be seen on a screen and printed. Which mean we had to take a lot of time ensuring that the colors we were using had high enough contrasts to be visible when printing but would also render well on desktop.

 

πŸ“ 7. Appendix

You'll find below an example of a Target Profile report and an example of a Matching report. Feel free to click on the pages to see the details.

 

7.1 Target Profile report

 

7.2 Matching report

New Talentoday Target Profile visualization

UI Design - Project management

header@2x.png
 

πŸ“‹ Description of the project

The purpose of this project was to update the Target Profile visualization using the instructions from the Talentoday psychologists. This project was completed with my colleague Joy, who was UI/UX Designer.

Here are the guidelines from the psychologists:

  • Introduce the colors of the clusters. The zones in the previous visualization were always green.
  • Have a uniform zone width. The previous zones were bigger on the outside. A few people complained about the fact that it could mislead readers because a zone from 6 to 10 will appear bigger than a zone from 1 to 5.  
  • Change the length of the zone from 4 to 2.
  • Sort the criteria by importance.
  • Always have 8 criteria. Before the Target Profile radar could have from 5 to 8 criteria displayed.

Β 

 Previous Target Profile visualization

Previous Target Profile visualization

 

πŸ“‹ Iterations

My colleague and I did multiple iterations and tested the final ones with users. Here are some of the variables we changed during our tests:

  • Width of the line. We tried multiple widths and finally decided on 14px (On a 410px diameter radar) which was the maximum width possible that ensures that the zones never overlap.
  • Shape of the zone. You will find an example below with 3 possible variations: Arc (Version A), Rectangle (Version B), and Rounded rectangle (Version C)
  • Display the numbers inside the zone or not.
  • How to highlight the fact that the order display is by importance of the criteria?
    • One iteration of the Target Profile had zones with a different opacity depending on the importance of the criteria.
    • Another iteration had zones with a different width depending on the importance of the criteria (See whiteboard photo below).
    • We finally decided that adding roman numerals was enough. After showing iterations to people we realized that the previous two examples were confusing the users more than it was bringing them information.
 

πŸ’Ž Realization

You'll find below the version that went in production. It is important to note that during the iteration process we were constantly in contact with the developers, especially Ilya our senior Front-End Developer, to ensure that the design would be possible.

Talentoday career recommendations

UX/UI design

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Talentoday?

Talentoday is a startup that improves career success by delivering personal insights based on psychometrics and predictive analytics. The online social career guidance solution provides a free personality assessment for individuals and a SaaS for HR managers and staffing agencies. Talentoday is based in San Francisco and Paris with 25 team members (2017).

1.2 Key goal

The project was to design the UX and UI of the new Talentoday career recommendations feature. Unlike most of my projects at Talentoday, an initial, private version of the module was created by a data scientist in order to test the matching algorithms. The goal was to improve the interface, while applying the feedback of the product manager at the same time.

1.3 My role and responsibilities

I was in charge of the user experience and user interface of the feature.

1.4 Timeline

This project had to be done in 2 weeks before the engineers run started.

 

πŸ€” 2. Problem statement

Prior to this project two data scientist worked on having a private, alpha version in order to validate the algorithms. The main difficulty from a UX point of view was to design an interface that would be intuitive enough and at the same time close enough to the original alpha version in order to limit the development time.

The UX of the feature also needed to be flexible with the ability to add more filters and information in the listing in the future.

Alpha UI, used by our data scientists to test the algorithms with users

 

πŸ‘₯ 3. Users and audience

Talentoday has both BtoC and BtoB users. The strategy behind this project was to build a feature for the BtoC, which if successful could be extended to the professional users.

 

🎭 4. Roles and responsibilities

Three people were involved during the design phase. One person in charge of the product, another focused on designing the icons, and finally me, responsible for the UX and UI of the product.

Example of collaboration using InVision, Sketch and GitHub: Before vs. After with the illustrations from my colleague Lei and the content from my colleague Allie

 

πŸ‘¨πŸ»β€πŸ’» 5. Process and work

5.1 Collaboration on product specifications

I worked in collaboration with my product colleague to define the specifications of the careers feature. After discussion with the Executive team we decided to remove the percentage of matching in the listing. This information was judged too complicated to understand.

 

5.2 Identify current issues

After showing the alpha UX/UI to a panel of people, here are the different issues we noted from a UX point of view:

  • The filter section was taking a lot of space on desktop. In response to this issue we tried various layouts.
  • The UI wasn’t easy to understand for new users. In order to fix that we added multiple on-boarding screens.
  • Some parts of the UI were not visually appealing. But this comment was normal since it was an alpha project.
 

5.3 Early drafts

Once the user flow agreed on, I started to whiteboard the screen and upload them on InVision FreeHand.

 Early flow and mockups

Early flow and mockups

 

As mentioned before, multiple variations of layouts were designed. Since we wanted to have user feedback on them I created a few of the layouts with Sketch.

 

5.4 Sketch mockups

I did multiple iterations of pixel-perfect mockups using Sketch as a designing tool. Most of the feedback on the content and UI details were done using the prototyping tool InVision.

 Example of InVision from my colleague Allie, in charge of the marketing content

Example of InVision from my colleague Allie, in charge of the marketing content

 

You'll find below some of the UI tests we did with the sliders:

 

5.5 Export for the developers

Once the project completed from a design perspective I exported all the assets for our front-end developer.

assets.png
 

πŸ’Ž 6. Outcome

As planned the UX and UI was designed in time for the developers to work on it. In order to release the first iteration even faster it was decided to release the beta without the on-boarding process.

 

πŸ“ 7. Appendix

You'll find below few screens that illustrate most of the "Career recommendations" feature.

Specs to Insta

Product design - UX/UI Design

header@2x.png
 
 

πŸ“‹ 1. Description of the project

Late 2016 Snapchat released their glasses, the Spectacles, which I was lucky enough to get the first week of the commercialization. I liked the glasses and the rounded videos that you can take. You can share these videos easily on Snapchat or export them as videos to share anywhere else. Unfortunately at the time, Instagram didn’t allow users to β€œpinch to zoom” to adapt the aspect ratio of the video. There was also no application on the App Store to easily resize the videos. So I decided to take a day to imagine how an application like this would look.

 

πŸ€” 2. Problem statement

The application should be really simple with a few screens. The purpose of the app is to:

  1. View the videos. If possible filter only the Spectacles videos. For example by selecting only the 10s videos with a square aspect ratio.
  2. Select the aspect ratio.
  3. Save the video. And if possible open Instagram in order to share the video directly. The date of the new video should be recent in order to appear in the β€œLast 24h” Instagram selection.
 

πŸ‘¨πŸ»β€πŸ’» 3. Process and work

3.1 Early drafts

Since all the users of this applications are going to be Instagram users I decided to draft the app with a UI and UX that would be familiar to them. After all, this app is only a bridge between the Snap Spectacles and Instagram. The process should be efficient and people shouldn’t have to spend time learning how the app works.

 

3.2 Sketch mockups

I started my first iterations based on the drawings I made. After testing this UX in InVision for a while I decided to try two main alternatives. One with only an β€œedit” view and another one with a menu appearing at the bottom of the screen. After trying the different iterations, I ultimately chose the one with the menu at the bottom.

 

πŸ’Ž 4. Outcome

You’ll find below the last iteration of my mockups:

Intercom chat UI made with Sketch

Sketch

header@2x.png
 
 

πŸ“‹ 1. Description of the project

At Talentoday we use Intercom on our website. I also personally love Intercom as a company and think that they do a really good job at creating a product that helps improve communication between a company and its customers.

While working on some projects, I needed to use some elements of the chat UI in my mockups. As always, I looked on sketchappsources.com and other websites to see if anyone already created the Intercom chat UI. There was a version created for the previous chat UI (1.0), but no one had created the new chat UI (2.0), so I decided to recreate it on Sketch for the purpose of using it in my mockups. I ended up adding more artboards than I needed in order to create something that others will be able to use.

 

πŸ’Ž 2. Outcome

9 artboards were created:

  • Conversation - Index
  • Conversation - Person with a header
  • Conversation - Person
  • Conversation - Team with a header
  • Conversation - Team
  • Preview - Person
  • Preview - Team with close button
  • Preview - Team
  • Intercom icon by itself

I uploaded the file on sketchappsources.com so everybody can use it. So far 15,000 people have consulted the page and 4,500 have downloaded it.

Pictures on Unsplash

Photography

header@2x.png
 
 

πŸ“‹ 1. Overview

1.1 What is Unsplash?

Unsplash is a photography website, similar to Flickr or Getty Images. The unique thing about Unsplash is that all of the published photos can be used for free, both for commercial and non-commercial purposes. The users do not need to ask permission from or provide credit to the photographer or Unsplash.

The details of the CC0 license are available on unsplash.com/license

 

1.2 My love for photography

When I was young I spent hours taking pictures of butterflies in my garden in France. At the moment I mainly enjoy taking day-to-day pictures.

 

1.3 My contribution

When Talentoday was still a small startup, we always needed free pictures. A few years ago when Unsplash was released as a Tumblr blog, I was among the first followers and would wait every week for the next 10 free pictures. Now it's possible to upload pictures so I'm giving back to the community.

 

πŸ’Ž 2. Outcome

2.1 Photos

Not everybody likes my In-N-Out pictures πŸ˜‡ but some seem to be ok. So far, my pictures have 2,400,000+ views and have been downloaded 12,000 times.

 

2.2 First million views

On January 26, 2018 I reached one million views on Unsplash.

1_million.png
 
 

2.3 My Unsplash profile

If you want to see or use some of my photos feel free to visit my Unsplash profile. And if you feel like contributing please consider signing up on Unsplash as well.

iOS keyboard made with Sketch

Sketch

header@2x.png
 
 

πŸ“‹Β 1. Description of the project

During the design of the Talentoday iOS app with my colleague Stephanie, we needed a keyboard UI for iPhone 6 Plus and iPad Air. As always, I looked on sketchappsources.com and other websites to see if anyone already created this resource. No one had created the keyboards with Sketch for these two devices, so I decided to design them.

 

πŸ’ŽΒ 2. Outcome

10 artboards were created:

  • iPhone 6 Plus:
    • Email - Lowercase
    • Password - Lowercase
    • Text - Lowercase
    • Text - Lowercase with suggestions
    • Text - Uppercase
  • iPad Air:
    • Email - Lowercase
    • Password - Lowercase
    • Text - Lowercase
    • Text - Lowercase with suggestions
    • Text - Uppercase

I uploaded the file on sketchappsources.com so everybody can use it. I also uploaded a simpler version a while ago. So far, 58,000 people have consulted the pages and 23,000 have downloaded it.

 
 

Talentoday personality and motivations report

Product design - Product management

header@2x.png
 
 

πŸ“‹ 1. Description of the project

This project is similar to the Target Profile report. The purpose was to design a personality and motivations report of Talentoday users. All the details of my work and process can be found on the Target Profile report project.

 

πŸ’Ž 2. Outcome

An example of a personality report: