Creating a new webpage for UpSpeak

We need to create a new webpage on the SEF site for the Upspeak program.

Description
Over the last few years of delivering SEF-initiated programs, we noticed one of the biggest challenges faced by undergraduate students was their ability to speak in English. While their reading and writing skills were very good, their level of spoken English was not on par. These were due to a number of reasons including,g inadequate resources to practice spoken English in a safe environment and focus on mastering academic English using rigid patterns not transferrable when speaking
In response to this, UpSpeak was introduced by SEF during June 2021. This is a free 12-week program aimed at creating a non-competitive safe environment for undergraduates in Sri Lanka whose second language is English and are looking to develop the following skills as published by Cambridge Papers in ELT:

  • Develop their conversational competence,
  • Become more proficient in the use of appropriate, rather than just accurate language,
  • Learn to play with language and take risks with it,
  • Building positive group dynamics for learning

FAQ section

  • How do I apply for the program?
    • Our first cohort kicked off during June 2021. Keep an eye out on our social media sites for future cohort intakes.
  • How do I become a facilitator?
    • Please email info@sefglobal.com with your CV and a cover letter with why you want to be a facilitator for the program
  • How do we partner with SEF on the program?
    • Please email info@sefglobal.com with your Request For Proposal (RFP) regarding potential partnership opportunity.

Logo

Gajindu will be working on creating the above page. @Gajindu_Bandara You can post your progress, mockups, anything related to upspeak website in this thread. :hugs:

2 Likes

Yeah! I’ll post the progress in this thread.

This is the basic idea that I came up with. So is there anything to improve or any suggestions? @EngTeam
wireframe

4 Likes

I developed the web page as in the above wireframe

Screenshot from 2021-06-20 10-57-58
Screenshot from 2021-06-20 11-03-32

@EngTeam is there Anything to be improved?

5 Likes

This looks good for a start. Could you please suggest some more vector images so that we all can give feedback on them? Also, we need to think of a nice way of arranging those bullet points too. The FAQ section looks fine for me.

1 Like

Thank you @Gajindu_Bandara for working on the Upspeak page. We do have the upspeak page up and running on https://sefglobal.org/upspeak/. We’ll work on making it look more attractive. Meanwhile, We need to add a testimonial section to the Upspeak page.

@Gajindu_Bandara Let me know if you are free to work on this? Basically, you need to come up with a wireframe which is always the better way to start things. :grin: Then work on coding. This is the testimonial we need to have on the page.

2 Likes

Yeah! I would like to work on the testimonial section :smiley: . I came up with a wireframe for that, and it looks the same as on the home page which is to make the website consistent. So is there any suggestions or anything to improve in this one
Screenshot 2021-06-23 101215

4 Likes

Suggestions on making prototypes. Make as much as possible. Not just a single prototype. It makes it easier to compare. Having a single point reference is harder! My personal preference is the vertical alignment of components. There should also be the name/Uni if possible between image and content.

2 Likes

I came up with several prototypes. So which one will be good for the testimonial section @akshika47
@EngTeam

1
A

2
B

3
C

1 Like

+1 for A       

I like A and C. Can you give a concrete example of B as well? it is a bit harder to visualise this when implemented.

However, if we keep the image smaller as it shows. A is good.

1 Like

This is the finalized view of the above A, B, and C templates.

Screenshot from 2021-06-27 13-44-37
A

Screenshot from 2021-06-27 13-45-51
B

Screenshot from 2021-06-27 13-46-49
C

Which template are we gonna use for the upspeak page? :thinking:
@akshika47 @EngTeam

2 Likes

I love the first option (A) but a bit with alignment.

An improved version of A:

2 Likes

Btw, I think it’s better to show them all at the same time without hiding with a carousel.

ex: https://www.notion.so/product

@akshika47 @Minuri_Adasuriya @Divya @YohanAvishke @Gravewalker What do you think?

This looks fine but we dont have many testamonials yet.

How about listing all of them without hiding with a carousel?

In my humble opinion, testimonials are a great place to use as social proof. Hiding them might affect negatively on that.
(We can display ellipsis when text overflows if the text content is large)

Yup, I don’t like carousals either.
Let’s make a grid of small squared cards, 4 cards per row would fit nicely.

We also need to add bit more ‘human-ness’ to the page! For example, some screenshots of the sessions.

For testimonials, video testimonials might work too. They are much more effective, however need to think of how we are going to integrate them in to the page.

As everyone doesn’t like the carousals, shall I start to work with some cards to display the testimonials? @EngTeam @akshika47 :thinking:

1 Like

While I was working with the testimonials I found out another template. What about this one??
Screenshot from 2021-07-04 14-43-20

@EngTeam @akshika47 :thinking: