Fintium FinTech Challenge one page website design

[guylepage3]

Task

Design a one page website for the Fintium FinTech Challenge event for Friday, Apr 19 at 5pm.

Event Description

Fintium FinTech Challenge matches top University students with Fortune 500 Tech and FinTech companies.

Creative Brief

The following questions will assist in defining the UI look and feel of the product.

1. What problem(s) do users have?
   • Users need to find out information about the event in a quick concise manner.
2. What are the solution(s)?
   • Provide them with a simple, clean and easy to read informational website.
3. Who is the targeted audience? (List all targets)
   • Fortune 500 executives from companies such as Microsoft, Amazon, etc.
   • Tech and business professors from the top Universities such as Harvard, MIT, etc.
   • Top Engineers and MBA students
   • Top FinTech CEO's
4. What are the immediate goal(s)?
   • Design a clean and simple brand and UI for users to get to the information they need as fast as possible.
5. Define main metric of success
   • Folks are able to find what they need.
6. Example sites? (List all in order of significance w/URL’s)
   • GitHub + https://githubuniverse.com/2018/
   • Consensys + https://etherealsummit.com/
   • Apple + https://developer.apple.com/wwdc19/
   • Websummit + https://websummit.com/
   • Dublin Tech Summit + https://dublintechsummit.com/
   • CES + https://www.ces.tech/
7. What is the desired image? Do you know of something you’d like this project to resemble?
   • Site has to be easy to read and designed for audience.
8. Do you have any product that you think you’d like to resemble?
   • GitHub Universe Event + https://githubuniverse.com/2018/
   • Ethereal Summit + https://etherealsummit.com/
   • Apple WWDC + https://developer.apple.com/wwdc19/
   • Websummit + https://websummit.com/
   • Dublin Tech Summit + https://dublintechsummit.com/
   • CES + https://www.ces.tech/
9. Are there any possible barriers or hurdles to the design of the product? If so, what are they?
   • The site has to be a one page website.
10. What dynamics are you looking to add to enhance the product? (ie. 3d graph, live chat, etc.)
    • Nothing
11. How will you drive people to the product?
    • People will be landing on the home page through invitation.
12. How will it be marketed?
    • Through word of mouth
13. Visual descriptive words: Choose 3 words to describe how you visualize the look and feel of the product. – Please use adjectives and/or attitudinal traits (I.E. cheeky, clean, rustic, bold, etc...)
    • Clean, Readable, Cool.

[guylepage3]

Hey @pftchal, Please find the instructions above for the one page website design. Please do not hesitate to message me if you have any questions.

[guylepage3]

Please remember this first round is just about the design and UI. Content does not matter right now.

[pftchal]

Got it!

On Wed, Apr 17, 2019 at 6:56 PM Guy Lepage notifications@github.com wrote:

Please remember this first round is just about the design and UI. Content does not matter right now.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/universelabs/universe-design2/issues/17, or mute the thread https://github.com/notifications/unsubscribe-auth/ALSG7YSFUYKBRY6IINWEGBDPQ6TKJANCNFSM4HGYMMMQ .

[pftchal]

Hi Guy,

Do you think the nav bar be like this is ok: ABOUT SPEAKERS SCHEDULE SPONSOR CONTACT

[guylepage3]

Do you think the nav bar be like this is ok: ABOUT SPEAKERS SCHEDULE SPONSOR CONTACT

Yes. That sounds good @pftchal :)

[pftchal]

FintiumFintech_Wireframe.pdf

Hi Guy,

I have created a basic version without too many graphics in Sketch, let me know how do you feel about this layout and overall look. I also created a simple logo while I was playing around with the design. Let me know how you think and if there is anything that you want me to change. And then I will move on adding colors and some graphics.

[guylepage3]

Hey @pftchal.. This is a good start.

Here are my comments:

1. I would not work on the logo anymore. We will just use the one the other designer created.
2. I would reduce the font sizes.
3. All the content will be on just this one page so we can remove...
   • Complete schedule
   • See more guests

Let's add some graphics and see where we end up from here. The placement of the content is well placed. Excited to see the next iteration. :)

[pftchal]

FintiumFintechDesign1.zip

Hi Guy,

I played around added colors sketches and pictures. The illustrations are sketch sources found online that can be used on any real projects and I made a few changes to them as well. Let me know how you think and I have also made font sizes smaller.

[guylepage3]

Changes - Set 1 of 2

Great start @pftchal..

• Let's reduce the font size on the navbar,
• Get rid of gradients and pastel colors. The demographic skews male.
• I noticed you're using https://www.humaaans.com/. I LOVE the contrast and cleanliness of their site. See screen shots below. Let's go with that color palette.
• Let's go with the contact form we are using on http://universe.engineering
• Each sponsor logo should be bigger by almost double. Maybe reduce the number of logos by half.

[guylepage3]

If you can make the above changes quickly and send it to me then I'll present it to Matt.

[pftchal]

@guylepage3 Sure. I will make changes accordingly! thanks for the comments, appreciate it. Also, when do you need the next version? Still today or can I make changes over the weekend?

[guylepage3]

@pftchal can you see the above comment? Let's make those changes above as fast as possible. Doesn't need to be perfect.

[pftchal]

@guylepage3 ok. Give me a few hours :)

[guylepage3]

Thank you @pftchal... :)

[guylepage3]

Changes - Set 2 of 2

This weekend and Monday... Let's have you really think hard about the below comments on the Hero section and have something ready for Tuesday on the items below.

• Lastly.. The hero section should be full screen color and the illustration should not be fun but more serious. See the WWDC screen shot from apple below.
• I would make sure that the feel is not fun and playful. There are major world companies and their executives attending the event. Let's stay clear of "fun" and go with edgy or cool / modern.

[pftchal]

@guylepage3 Ok sounds good, So I will send the next version to you Monday? I might send you something before that and see if we can make other changes, does that work?

[guylepage3]

@pftchal As stated in Slack.. There are 2 sets of changes to be made above..

Changes - Set 1

• Let’s have you work on those changes as fast as possible today. For delivery to me today.

Changes - Set 2

• The second set of changes are to be ready for Tuesday.

[pftchal]

@guylepage3 got it!

[guylepage3]

Just placing some logos here..

[pftchal]

@guylepage3 thanks for the logos. This is the updated design! :

FintiumFintechDesign2.zip

[guylepage3]

Transcript from Slack...

Charlotte Pan [5:18 PM] @guylepage3 hi guy just sent you an updated design!

Guy Lepage [5:19 PM] Thank you @pftchal Looking now. :slightly_smiling_face: MUCH better!!

This is a really good start.. I’m going to make a few small tweaks and present this to Matt this weekend. In the meantime, we need to focus on the navbar and hero area… It’s looking a lot better but we can make it even stronger.. :slightly_smiling_face: I don’t think you need to work on this this weekend though. Take the weekend off for yourself and we can work hard on it on Monday.

[guylepage3]

New Fintium FinTech Challenge logo..

[guylepage3]

[guylepage3]

@pftchal, Here's the latest version of the website design.. https://github.com/universelabs/universe-design/blob/master/events/09-19-fintium-fintech-challenge/fintium-web-v1.2.0.sketch

Can we get you to

• Reduce the size of the sponsor images by 20-30%
• Update the footer content

Once done please upload to this issue and then I'll present it to Matt and team.

Great work here! 👍

[guylepage3]

Also, @pftchal can you add "FinTech Challenge" to the logo? Thank you.

[pftchal]

@guylepage3 hi guy, you need me to add "Fintech Challenge" to the logos on the web design, correct? or also to the logo picture itself?

[guylepage3]

Let's just go with the website design for now @pftchal. Thank you.

[guylepage3]

@pftchal, @aseoconnor will be guiding you through content, wording and anything else needed from here on in.

[pftchal]

@guylepage3 @aseoconnor Awesome!

[pftchal]

fintium-web-v1.2.1.zip

@guylepage3 Hi Guy! I have made the changes. Please take a look at it and let me know how you think :)

[guylepage3]

[guylepage3]

@pftchal, I adjusted the following;

• Reduced the size of the speakers
• Designed a new graphic for the hero section
• Repositioned the FinTech Challenge under the logo
• Adjusted the footer content.
• Cleaned up the about section items to fit the new grid.

[guylepage3]

@pftchal can you play with the new hero graphic so that the type is more legible. Maybe do 3-4 different layouts?

We're getting there.. :)

[pftchal]

@guylepage3 thanks. Nice job! Did you use Illustrator to create the new graphic?

Yes, I will work on it tonight!

[guylepage3]

Here's the latest file @pftchal https://github.com/universelabs/universe-design/blob/master/events/09-19-fintium-fintech-challenge/fintium-web-v1.2.2.sketch

[guylepage3]

@pftchal I used Illustrator and Photoshop for the Gausian Blur. Would you like the illustrator file?

[pftchal]

@guylepage3 Yes please, would like to take a look :) thanks

[guylepage3]

here's the illustrator file. :) https://github.com/universelabs/universe-design/tree/master/events/09-19-fintium-fintech-challenge/support

[aseoconnor]

@pftchal I made some copy edits to the page =)

fintium-web-v1.2.1-CopyEdits.pdf

[pftchal]

@aseoconnor Got it thanks! @guylepage3

[pftchal]

fintium-web-v1.2.3 part1.sketch.zip fintium-web-v1.2.3 part2.sketch.zip

@guylepage3 I played around the layouts of the hero section and there are four layout ideas that I came up with. I did not change the graphic itself too much. @aseoconnor I have added the copy text! Just the headline of the hero section, we can come up with more ideas here to make it stronger :)

[guylepage3]

Hey Charlotte, I’m taking a look at the designs now. :)

[pftchal]

part1.zip

part 1

[pftchal]

part2.zip

part 2

[guylepage3]

Thanks @pftchal.. This was a good start. So I took your fintium-web-v1.3.1 and adjusted it a bit for legibility here.. fintium-web-v1.4.0. I will present this to Matt and team today..

Great work here. 👍

While I'm presenting this to Matt and folks, can you work on the illustration a bit to make it work for the space? I basically took an old illustration I had and created a certain style. Can you provide a couple illustrations completed in this style?

[pftchal]

@guylepage3 Thanks! I will play around! I don't have much graphc design background, but I think I can experiment a little bit. :)

[pftchal]

Illustration.zip

Hi @guylepage3 I watched some tutorials and created two graphics, let me know how you think. I might play around more tomorrow

[guylepage3]

Taking a look now @pftchal

[guylepage3]

These are quite a bit off from our style we are looking for. We're looking for something like what we see below..

[guylepage3]

I think I'll work on the illustration tomorrow and layout.. Then we can start building from there next week. 😄