A more compelling home page

[amyjko]

What's the problem?

The current home page is adequate, providing direct access to areas of the platform and communicating at a high level what the platform is. However, it is not particularly compelling:

• It doesn't convey what kind of content can be created
• It doesn't convey the justice-centered mission of the project
• It doesn't convey who the site is intended for (learners and their teachers)
• It doesn't convey what is unique about the language and platform

Informal User test and user feedback:

Verbal:

• "The sentence is too long for me to read, even though there are emojis but I still don't want to read" -> Solution: Making the sentence eye catching and reducing long sentences
• "I am only reading the extra large text"

Accessible:

• Make "help" and "language" more visible -> solution: using this icon instead of “English”, “中文”，“Espanol”

• Looks like a chat button -> Solution: 1. maybe we can use our old version mascot instead of chat bubble? 2. Make chat bubble logo another outstanding color and also make it larger

layout :

• Nav bar on top will be better
• No scrolling, be on 1 page
• Why the words are different size

pattern:

• The floating letters are hard to see
• I prefer the little cute speech bubble, the mascot before-> Solution: it is more memorable in a marketing way
• It would be better if the words were icons - related to emojis -> Solution: we can find related emojis, since we use a lot of emojis in Wordplay
• Colorful

If it were more compelling, more of our target audience might try it.

What's the design idea?

One concept to consider is something that better aligns with marketing standards for landing pages:

• A clear value proposition
• A "hero shot", which might be something that conveys what can be created with the platform
• Features and benefits relative to competitors
• Social proof of who is using it
• A call to action

Design specification

Designer: Erica Ding

1. Homepage Narrative Enhancement

To streamline communication and captivate users from the outset, we propose refining the homepage narrative into succinct bullet points. These bullet points, accompanied by emojis, will effectively convey Wordplay's key features, such as animating words and emojis, fun learning activities, multi-language support, and content sharing capabilities. By integrating emojis, we aim to enhance readability and engagement, fostering a connection with our audience.

Here are the proposed verbal texts: Hero shot: Create stories using words and symbols from your language and your abilities! 🖥︎️Wordplay is a cool programming language that allows you to:

• 😃Animate Words and Emojis: Explore the exciting opportunity to learn coding by bringing words, emojis, and symbols to life, fostering creativity while honing problem-solving skills.
• 🎲Fun Features: Wordplay provides a dynamic and inclusive learning environment where students can explore coding in a fun and educational way.
• 🔑Languages and Accessibility: Enjoy multi-language support and easy communication between students and teachers. With comprehensive documentation and adherence to accessibility standards, Wordplay ensures a safe and supportive space for learning and collaboration.
• 🤝‍Share Your Creations: Showcase your creations by sharing them with friends, groups, or anyone around the world!
• 🆓Totally Free: Access all features for free, free forever from University of Washington Information School!

I'm utilizing the narrative provided on our homepage, transforming it into bullet points and integrating emojis for enhanced readability. The hero shot aims to engage students with clear communication, while the following paragraph delves into more detailed information for teachers about our platform.

2. Language Icon Integration

In adherence to web standards and our commitment to inclusivity, we recommend incorporating a language icon on the platform. This icon will symbolize our support for linguistic diversity and accessibility, ensuring that users feel welcomed and represented regardless of their language or cultural background. This icon would be placed at the footer.

3. Navigation Bar Optimization

After careful consideration of user navigation patterns and privacy concerns, we propose retaining the navigation bar on the homepage. However, to balance usability with privacy, we suggest implementing a feature that redirects users to the login page upon clicking on specific sections like "learn," "projects," or "galleries." This approach will provide users with essential information about our login system while safeguarding their privacy and data integrity.

4. Homepage Block Organization

To optimize the homepage layout and improve user engagement, we recommend organizing content into visually appealing blocks. These blocks, comprising sections such as "learn," "projects," and "galleries," will serve as focal points for users, facilitating intuitive navigation and highlighting key platform features. Additionally, the inclusion of emojis before titles will inject a playful element into the interface, enhancing user experience and retention.

Building upon existing design elements, we propose aligning the homepage layout with the motif of our account profile page. By introducing an additional block, we aim to achieve visual symmetry and balance, thereby reducing the need for excessive scrolling on smaller screens. The proposed layout enhancements will not only improve the platform's visual appeal but also enhance usability and accessibility for all users.

<img width="546" alt="suggested homepage design" src="https://github.com/wordplaydev/wordplay/assets/108030139/0a6f9d6c-63d5-4f1b-90b5-393131095272">

5. Optimized for mobile and web use, and designed to facilitate future iterations

The homepage for large screens has been redesigned, along with corresponding adaptations for medium and small screens. A new footer has been added to the homepage, organizing additional information in a clearer layout to enhance user accessibility.

The login feature has been repositioned below the introduction to Wordplay to ensure users authenticate before accessing the coding features. To accommodate this expansion, the Login has been repositioned above the panels, ensuring that it remains easily accessible, regardless of the number of future panel additions.

For the small screen, the gray boxes will have a wider width(as shown in the screenshot)

For the medium screen, it has smaller boxes than the large screen

For the large screen, enlarge the box sizes <img width="600" alt="larger screen" src="https://github.com/wordplaydev/wordplay/assets/108030139/0a6f9d6c-63d5-4f1b-90b5-393131095272">

[amyjko]

@YizhouDing, I see you assigned yourself to this. Are you wanting to work on it as a designer? Remember, according to our workflow, when you assign yourself, you need to write a comment so people know what your self-assignment means. Thanks!

[YizhouDing]

@YizhouDing, I see you assigned yourself to this. Are you wanting to work on it as a designer? Remember, according to our workflow, when you assign yourself, you need to write a comment so people know what your self-assignment means. Thanks!

Yes, I want to work on it as a designer. Thanks for reminding me that.

[amyjko]

Okay, thanks for confirming. Let me know if I can elaborate on any of the goals in the design idea; the key thing to think about is our two stakeholders: 6th grade students and their teachers. This is really more of a marketing issue than a design issue, but they overlap enough that it's okay to think about it as design.

[YizhouDing]

@amyjko Hi Amy, I put user feedback in this Google doc, and also added some of my thoughts. Please take a look, let me know if there is any idea I need to explain or improve. https://docs.google.com/document/d/1dywDIRd63zct2qUnQTwDHdOszKqfsatvlXwd5CgitXE/edit?usp=sharing

[amyjko]

@YizhouDing Per the design guidelines in the wiki, please don't link to external sources; keep everything in GitHub, so we have the full context for conversations. Please repost your thoughts as a comment instead of a link, and then I'll reply. If the thoughts are a design proposal, then put your design proposal in the issue body, per the wiki.

Sorry to be pedantic about process: I have to think about future quarters, dead links, and newcomers, and that's what our guidelines try to account for. Thanks!

[YizhouDing]

Consider: “Why should I use this?”, what is the pain point

Informal User test and user feedback:

Verbal:

• "The sentence is too long for me to read, even though there are emojis but I still don't want to read" -> Solution: Making the sentence eye catching and reducing long sentences
• "I am only reading the extra large text"

Accessible:

• Make "help" and "language" more visible -> solution: using this icon instead of “English”, “中文”，“Espanol”

• Looks like a chat button -> Solution: 1. maybe we can use our old version mascot instead of chat bubble? 2. Make chat bubble logo another outstanding color and also make it larger

layout :

• Nav bar on top will be better
• No scrolling, be on 1 page
• Why the words are different size

pattern:

• The floating letters are hard to see
• I prefer the little cute speech bubble, the mascot before-> Solution: it is more memorable in a marketing way
• It would be better if the words were icons - related to emojis -> Solution: we can find related emojis, since we use a lot of emojis in Wordplay
• Colorful

[YizhouDing]

@YizhouDing Per the design guidelines in the wiki, please don't link to external sources; keep everything in GitHub, so we have the full context for conversations. Please repost your thoughts as a comment instead of a link, and then I'll reply. If the thoughts are a design proposal, then put your design proposal in the issue body, per the wiki.

Sorry to be pedantic about process: I have to think about future quarters, dead links, and newcomers, and that's what our guidelines try to account for. Thanks!

I understand the importance of keeping everything within GitHub for clarity and accessibility. My apologies for not adhering to the guidelines initially. I've already converted the content into Markdown format and added it as a comment. Let me know if there's anything else needed!

[amyjko]

Thanks @YizhouDing. Also remember that design proposals belong in the issue body, not in a comment. Put problems you found in research in the "What's the problem?" section, and design proposals in the design specification section. This keeps everything organized, so people don't have to read the comment history to make sense of the problem and proposal. (And in general, please read the design wiki carefully — we have the guidelines written there so you can refer to them while you work).

Thoughts on the findings in your informal user research:

• Students not wanting to read is something that has been deeply worrying me over the past few years. It's a noticeable change from 10 years ago, when students would willingly read long research papers I gave them; now they're resistant to reading a paragraph. I have no idea what to do about this; I don't want to feed into a culture that doesn't read, as reading is essential to learning. That said, we can find ways of organizing the messaging to make comprehension easier, so we should do that.

• Icons are not more accessible for creators who rely on screen readers. They are less accessible. And there is no standard icon for language settings, so there is no icon that would be recognized by everyone.

• The chat emoji is the icon for Wordplay; are you proposing to change the icon for the whole application? Or just proposing to use something different for the home link?

• Why would the nav bar on top be better?

• How would the design avoid scrolling on smaller screens?

I look forward to a more concrete design proposal. Think through these questions and we can discuss more here.

[YizhouDing]

Hi Amy, Here are the updates on the redesign from this week. Here are my responses to the questions you provided:

- Students not wanting to read is something that has been deeply worrying me over the past few years. It's a noticeable change from 10 years ago, when students would willingly read long research papers I gave them; now they're resistant to reading a paragraph. I have no idea what to do about this; I don't want to feed into a culture that doesn't read, as reading is essential to learning. That said, we can find ways of organizing the messaging to make comprehension easier, so we should do that.

I completely agree that reading is vital for students. Personally, as someone who struggles with reading, I find breaking paragraphs into bullet points helpful. However, I'm unsure if this format would suit our homepage.

- Icons are not more accessible for creators who rely on screen readers. They are less accessible. And there is no standard icon for language settings, so there is no icon that would be recognized by everyone.

I regret not being aware of it previously. Considering a national flag next to the language button could help non-English users recognize it as a language selection option.

- The chat emoji is the icon for Wordplay; are you proposing to change the icon for the whole application? Or just proposing to use something different for the home link?

Could we create a unique icon specifically for our platform? One of our contributors suggested that having a distinct icon would make our platform more memorable. I am thinking about something like this:

• Why would the nav bar on top be better?

According to the contributor who proposed this idea, she believed that placing the navigation bar on top would align with the common practice among most platforms, making it more familiar for our users. However, from my perspective, I don't believe it significantly impacts our platform. Regarding our login approach, do we intend for users to create an account/login before accessing our platform? If so, I would recommend removing the navigation bar from the homepage, allowing users to view the homepage first and then log in as prompted.

• How would the design avoid scrolling on smaller screens?

To avoid excessive scrolling on smaller screens, I redesigned the homepage to organize "learn," "projects," and "galleries" features into blocks. These blocks will draw users' attention and maintain organization. Additionally, I've added emojis before titles to add a playful element. Hovering over a block will highlight it in light yellow to indicate the user's focus.

Regarding the verbal displayed on the homepage, I'm still considering how to effectively communicate with both students and teachers. Please let me know if you have any questions about this week's updates. After your approval of any ideas, I'll incorporate them into the design proposal and design spec sections.

[amyjko]

Thanks for the discussion @YizhouDing! A few reactions:

• Struggling with reading is definitely a concern, and there's some emerging research showing that it's a broad issue amongst many students right now, across K-12 and college. I think that's a broader issue, well beyond the scope of this issue. I'm not sure the right response is to help students avoid reading (as much as it might mean that they avoid our platform). All that said, for a home page, there doesn't need to be a lot of text, so I support a design that uses much shorter, single-sentence messaging.

• Including an icon next to a language is an interesting idea. Our locales use a web standard that combines language with region (e.g., en-US means English in the United States, es-MX means Spanish in Mexico. So I'm not sure those would map cleanly onto a flag, since they represent both a language and a region. Maybe we could use a flag icon for just the region, and let the language be written in text? We could include these in the locale definitions, specifying which emoji to use. We'd have to figure out what to do for countries that have no emoji for their flag.

• I think designing a new logo is a great idea. Can you submit a new feature request for that? It would be fun graphic design project for someone. (I used a standard emoji because it's more screen readable than an image, but we can tolerate an image for the logo, as long as it has a good image description).

• I see the advantage of hiding the footer on the home page, though that would pose a challenge about how to switch languages for first time visitors, as well as make it harder for returning visitors to quickly jump to different sections of the site. If you do propose to do this, you'll also need to account for those other use cases, as its not just first time visitors navigating to the home page.

• Generally like the idea of using blocks on the home page for different activities; this might mirror the way we use similar blocks on the account profile page. If you design this, consider aligning the visual design for both of those pages to use the same motif.

Thanks for taking on this design work! I'm excited to see what you come up with.

[YizhouDing]

@amyjko Hi Amy, based on the feedback you provided, I came up with the following design ideas.

-Our narration on the homepage:

Hero shot: Create stories using words and symbols from your language and your abilities!

🖥︎️Wordplay is a cool programming language that allows you to:

• 😃Animate Words and Emojis: Explore the exciting opportunity to learn coding by bringing words, emojis, and symbols to life, fostering creativity while honing problem-solving skills.
• 🎲Fun Features: Wordplay provides a dynamic and inclusive learning environment where students can explore coding in a fun and educational way.
• 🔑Languages and Accessibility: Enjoy multi-language support and easy communication between students and teachers. With comprehensive documentation and adherence to accessibility standards, Wordplay ensures a safe and supportive space for learning and collaboration.
• 🤝‍Share Your Creations: Showcase your creations by sharing them with friends, groups, or anyone around the world!
• 🆓Totally Free: Access all features for free, free forever from University of Washington Information School!

I'm utilizing the narrative provided on our homepage, transforming it into bullet points and integrating emojis for enhanced readability. The hero shot aims to engage students with clear communication, while the following paragraph delves into more detailed information for teachers about our platform.

-Language icon:

Yes, we should definitely follow the web standard!

-Hiding footer: After considering the drawbacks of removing the navigation bar from the homepage, I believe it's best to retain it. However, we could implement a feature that redirects the user to the login page by clicking on "learn," "projects," or "galleries". This would provide them with additional information about our login system, allowing users to decide whether to log in. Such an approach would enhance users' awareness of privacy and security while also preventing data loss or incomplete assignments. For example, if users are using a school computer, this feature would ensure that they don't risk losing their unfinished assignments.

-Blocks on the homepage: I was considering something similar previously, aligning with the layout of our account profile page. However, currently, we only have three blocks, resulting in an asymmetrical design. Adding another block would create a more balanced layout. Therefore, I believe the layout I suggested earlier not only enhances visual appeal but also avoids the need for scrolling.

(left image: same motif as profile page, right image: proposed homepage design

[amyjko]

It's the end of Winter! Please provide an update on this issue, including:

• Whether you plan to continue work on it
• If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

[YizhouDing]

It's the end of Winter! Please provide an update on this issue, including:

• Whether you plan to continue work on it
• If you do not, 1) provide a detailed update of its status, 2) add any unfinished work, 3) list any any unmerged branches, and 4) unassign yourself, so someone else can take over the task. Please leave the issue in better shape than you found it, helping future contributors to start from where you left off.

If you do plan to continue work on it, carry on. Otherwise, thank you for your contributions!

Hi Amy, I will continue working on it till I'm done! Even though I won't be enrolled for credits next quarter, I'm still committed to volunteering and continuing the work.

[amyjko]

Thanks for the update @YizhouDing! I look forward to the next sketch.

[JunnaC]

Olivia and I want to work on this issue and assign ourselves.

[YizhouDing]

@amyjko Hi Amy, I updated the design proposal for this issue. Please take a look and let me know is there anything else I need to do.

[amyjko]

@YizhouDing You'll need to coordinate with @oliviawei1102 and @YizhouDing on this first; they joined the team working on this, and want to collaborate with you. (See their comment above). I recommend the three of you coordinate and see the design draft is something you all want to propose.

[YizhouDing]

@YizhouDing You'll need to coordinate with @oliviawei1102 and @YizhouDing on this first; they joined the team working on this, and want to collaborate with you. (See their comment above). I recommend the three of you coordinate and see the design draft is something you all want to propose.

Hi Amy,

Hope this finds you well. I'm volunteering at Wordplay this quarter and am not yet familiar with the new rules regarding project assignments, I am sorry about that. Also, I recognized that there might have been some misunderstanding; Olivia and Junna might not have known that I almost completed this design during the previous quarter. After our discussion, I feel it would be best for me to finalize it independently to maintain consistency and integrity of the work. Could you please review the current design and let me know if there are any adjustments needed? After incorporating your feedback, I will hand over this to Olivia and Junna.

[amyjko]

@JunnaC @oliviawei1102 Did you request to join this issue because you wanted to work with @YizhouDing? It sounds like @YizhouDing wants to work alone.

@YizhouDing, we'll move forward once we know @oliviawei1102 and @JunnaC's intent. They're interested in this, and so we don't want to exclude them without talking to them first. (Working alone on this is fine, but there are many benefits to multiple perspectives on a design).

[JunnaC]

@JunnaC @oliviawei1102 Did you request to join this issue because you wanted to work with @YizhouDing? It sounds like @YizhouDing wants to work alone.

@YizhouDing, we'll move forward once we know @oliviawei1102 and @JunnaC's intent. They're interested in this, and so we don't want to exclude them without talking to them first. (Working alone on this is fine, but there are many benefits to multiple perspectives on a design).

Hi Amy, @oliviawei1102 and I can peer review @YizhouDing's proposal to add more ideas about the home page design, or we can change to another issue since Yizhou is almost done with the design.

[amyjko]

@YizhouDing, how do you feel about @oliviawei1102 and @JunnaC's proposal to peer review and help converge toward an approved design?

[YizhouDing]

Sure, that would be great!! Thank you for your help.

On Apr 16, 2024, at 8:16 AM, Amy J. Ko @.***> wrote:



@YizhouDinghttps://github.com/YizhouDing, how do you feel about @oliviawei1102https://github.com/oliviawei1102 and @JunnaChttps://github.com/JunnaC's proposal to peer review and help converge toward an approved design?

— Reply to this email directly, view it on GitHubhttps://github.com/wordplaydev/wordplay/issues/397#issuecomment-2059340037, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZYGRO5S3TPQJBSXHISXP5LY5U6DBAVCNFSM6AAAAABDNQ6NTSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJZGM2DAMBTG4. You are receiving this because you were mentioned.Message ID: @.***>

[JunnaC]

Heyy @amyjko

After discussion with @YizhouDing, we think it’s better to put our ideas in the comments. Both Olivia and I also like the design of the blocks! So, we don't have much feedback on that. We have some other ideas to add to Erica's design about the layout for About, Right, and Donate. We came up with 5 design ideas for the re-layout. All these 5 put “About” next to the big logo of Wordplay to make it more intuitive if someone wants to learn about "Why does this place exist?"

Design Idea 1: Since we moved the about, we aligned Right and Donate on the same line to avoid scrolling and keep the page balanced and simplicity.

Design Idea 2: We created the website footer section, including a Contact component with buttons for GitHub and Discord.

Design Idea 3: different layout of footer components

Design Ideas 4: different layout of footer components

Design idea 5: We removed the box at the top, and put it at the footer part.

[amyjko]

You tagged me; are you looking for design feedback this point, or still reconciling your ideas together? Just let me know when you want design review and you can tag me or Isabel.

One note while you're brainstorming: remember that this page needs to be responsive for all screen sizes, from smartphone to desktop; account for that in any layouts you design.

[YizhouDing]

Hi @amyjko, Based on @JunnaC and @oliviawei1102 's feedback, I've made several updates to our homepage:

• I've moved the login feature below our introduction to Wordplay to ensure users log in before navigating our coding features.
• I really appreciated the footer suggestions. I've included several components they mentioned. I placed the "beta" notice and feedback entry together in the footer. Placing the beta notice at the top does make it prominent, but it also takes up valuable space and might distract from other important content on our homepage. Additionally, I've added links for "About," "Donate," and "Rights" next to them.

Please let me know if you have any feedback. Once you respond, I'll add this section to the design specification!

[amyjko]

Thanks for the update @YizhouDing! I like the overall direction.

• Why is the border on login yellow, but the others are grey? (We don't have this design convention anywhere else on the site, so I'm looking for rationale for why to deviate from the existing design).
• Does the footer float, or is it anchored on the bottom of the page? If the latter, then no one will see the beta warning, which is very bad. Everyone must see the beta warning: we need everyone to know that things may not work as intended.
• How do you propose to wrap content on small screens?
• I have many tweaks I would make to the copy (the text you've included), but we don't have to wordsmith those here. The general direction is fine.

[JunnaC]

Hi @YizhouDing, here is my updates:

I redesigned the home page of the large screen, with the corresponding medium and small screen. After talking with Amy, I just learned that more panels will be launched in the short future. So the change I made is moving the Login above the panels. In this way, users could always find the Login easily no matter how many panels are developed in the future.

For the small screen, the gray boxes will have a wider width(as shown in the screenshot)

For the medium screen, it has smaller boxes than the large screen

For the large screen, enlarge the box sizes

[JunnaC]

I plan to continue collaborating and working on this issue

[amyjko]

@YizhouDing @oliviawei1102, will you also be continuing work on this? (We need to know who's on the team, so please communicate your plans).

[YizhouDing]

Hi Amy,

I will keep working on it until it done!

On May 30, 2024, at 12:21 PM, Amy J. Ko @.***> wrote:



@YizhouDinghttps://github.com/YizhouDing @oliviawei1102https://github.com/oliviawei1102, will you also be continuing work on this? (We need to know who's on the team, so please communicate your plans).

— Reply to this email directly, view it on GitHubhttps://github.com/wordplaydev/wordplay/issues/397#issuecomment-2140723902, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AZYGRO4B3XRFD6HMXJT3UL3ZE533JAVCNFSM6AAAAABDNQ6NTSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNBQG4ZDGOJQGI. You are receiving this because you were mentioned.Message ID: @.***>

[oliviawei1102]

I will work and collaborate on it too!

[YizhouDing]

@amyjko Hi Amy, I updated the design specification with the new ideas and design we did last quarter, please let me know if there is anything we need to change!

[amyjko]

Thank you @YizhouDing. Overall, it looks good, and I'm ready to approve for building. There are a few inconsistencies and ambiguities that would be nice to clarify though:

• In some sketches, the login page appears above the blocks, in other pages below. Which is the design?
• The design spec mentions a language icon. Which icon? There's no icon shown, just a screenshot of "en-US", which already appears in the current design of the platform. There is no standard language icon on the internet, though there are some commonly used ones. Which are you proposing?
• There is a suggestion to redirect to login for several pages, but not all pages require a login to view (e.g., learn, galleries). Why would we redirect to login for those pages?

[YizhouDing]

Thank you @YizhouDing. Overall, it looks good, and I'm ready to approve for building. There are a few inconsistencies and ambiguities that would be nice to clarify though:

• In some sketches, the login page appears above the blocks, in other pages below. Which is the design?
• The design spec mentions a language icon. Which icon? There's no icon shown, just a screenshot of "en-US", which already appears in the current design of the platform. There is no standard language icon on the internet, though there are some commonly used ones. Which are you proposing?
• There is a suggestion to redirect to login for several pages, but not all pages require a login to view (e.g., learn, galleries). Why would we redirect to login for those pages?

@amyjko Hi Amy, I've updated the comments and addressed the issues you highlighted, including adding an explanation for the language icon. Thank you for the feedback. For the login section, I've positioned it above the panels to increase its visibility, encouraging users to log in to secure their data and track their study progress. Please let me know if there is anything else that is unclear in the spec!

[amyjko]

Thanks for the clarifications! I've marked this buildable, meaning the design is close enough to build. Either someone will take it up, or I'll get to it eventually. Thank you for your design contributions!

[amyjko]

I just released an implementation of the redesign. Thank you everyone for contributing an excellent new design! If you see something that I missed, or think it needs further tweaks, feel free to reopen this issue.