Making WordPress.org

Opened 5 years ago

Last modified 3 years ago

#4096 assigned defect (bug)

Redesign /mobile/

Reported by: joostdevalk's profile joostdevalk Owned by: sjardo's profile sjardo
Milestone: Priority: normal
Component: General Keywords: needs-patch
Cc:

Description

Have been discussing the /mobile/ pages with @elibud. They need to be more modern and much better at informing people about the capabilities of our apps. Let's get that process going by creating a new design and then putting that live.

We can remove the link to WordPress.com and replace it with a QR code and link, potentially using http://onelink.to/

Attachments (9)

onlink_to_ctcs9t_small.png (582 bytes) - added by elibud 5 years ago.
QR code to download the iOS and Android apps
Screen Shot 2019-02-01 at 3.15.31 PM.png (716.8 KB) - added by megsfulton 5 years ago.
Here's a rough wireframe sketch that visualizes those suggestions outlined above.
Mobile.png (193.5 KB) - added by megsfulton 5 years ago.
Current Mobile Apps - Desktop View.png (652.5 KB) - added by megsfulton 5 years ago.
Here's a screenshot of the current page as a desktop view
Current Mobile Apps Page - Mobile View.png (443.2 KB) - added by megsfulton 5 years ago.
Here's the current page in a mobile view
i2 - Desktop.jpg (1.6 MB) - added by megsfulton 5 years ago.
2nd iteration of the desktop layout and design
i2 - Mobile.jpg (1.1 MB) - added by megsfulton 5 years ago.
2nd iteration of the mobile layout and design
i3 Web Mobile.png (1.3 MB) - added by megsfulton 5 years ago.
i3 Web and Mobile
i3 Web Mobile - fixed.png (1.3 MB) - added by megsfulton 5 years ago.
i3 - Fixed - Last upload was missing a component

Change History (42)

@elibud
5 years ago

QR code to download the iOS and Android apps

#1 follow-up: @elibud
5 years ago

http://onelink.to/ uses third-party redirects, I don't know if we are fine with that, but the following link should work both in iOS and Android devices: http://onelink.to/wordpress as well as scanning the image below:

QR code to download the iOS and Android apps

Last edited 5 years ago by joostdevalk (previous) (diff)

#2 in reply to: ↑ 1 ; follow-up: @netweb
5 years ago

Replying to elibud:

http://onelink.to/ uses third-party redirects, I don't know if we are fine with that

I'd rather see links to the respective app stores on https://wordpress.org/mobile than any third-party redirects used by http://onelink.to/ which may have privacy implications

#3 in reply to: ↑ 2 @elibud
5 years ago

Replying to netweb:

The goal we are trying to achieve here is to provide an easy application download mechanism for people visiting https://wordpress.org/mobile from a desktop machine.
AppStore links work fine when visiting from mobile (we have an automatic redirect in place already) but getting links from the desktop to the phone is very tricky.
That being said, I totally agree, we need to find a privacy conscious solution to the problem.

#4 @dd32
5 years ago

The goal we are trying to achieve here is to provide an easy application download mechanism for people visiting https://wordpress.org/mobile from a desktop machine.
AppStore links work fine when visiting from mobile

An Appstore link for most Android users would be seamless, as it offers users the ability to install directly onto their phones (When logged into the same Google Account - and it prompts to do so).

That being said, As the Mobile apps are open-source Automattic projects it kind of makes sense that /mobile/ is effectively a redirect to apps.wordpress.com - although I think that page could do with some better call to actions for how to install on a mobile from the Desktop (including actually showing an App Store link)

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


5 years ago

#6 @megsfulton
5 years ago

Wanted to summarize the goals for updating this page based on the discussion here and in slack.

Goals

  1. Update the page to make it easy to download the app for people visiting from both computer and mobile browsers. These links should direct people to the respective store pages for the WordPress apps.
  2. Update the design of the page to be more aligned with the other top-level navigation pages
  3. Highlight the benefits and capabilities of the WordPress mobile app.

Based on those goals and discussion so far, here are few ideas for possible improvements to the page:

  1. Update the header section to blue to match the other pages on WordPress.org
  2. Add iOS App Store and Google Play Store buttons to the page. These buttons are highly recognizable and folks visiting from their mobile phone will likely be familiar with these buttons for downloading apps. I also included a note about visiting WordPress.org/mobile from a mobile browser.
  3. Add 3-4 feature highlights about what you can do with the mobile app
  4. Add a section for how to contribute to the mobile apps
  5. Add "Need Help?" so people know where to go for support with the apps

Another option that could be considered to address the goal of making it easy to download the apps from the desktop is allowing people to email themselves a link to download the app. I could see how that might also have privacy implications for folks though.

@megsfulton
5 years ago

Here's a rough wireframe sketch that visualizes those suggestions outlined above.

#7 @joostdevalk
5 years ago

That seems like a huge step ahead. Can you do a rough wireframe for what it should look like on mobile too? I'll ask for some feedback in #design too :-)

This ticket was mentioned in Slack in #design by joostdevalk. View the logs.


5 years ago

@megsfulton
5 years ago

#9 @megsfulton
5 years ago

Here's what that look like on mobile.

#10 @joostdevalk
5 years ago

Looks very good to me :)

This ticket was mentioned in Slack in #design by joshuawold. View the logs.


5 years ago

#12 in reply to: ↑ description @boemedia
5 years ago

Do you have screenshots or a link to the current pages? This will make the ticket more complete and easier for people to work on or give feedback on.

Replying to joostdevalk:

Have been discussing the /mobile/ pages with @elibud. They need to be more modern and much better at informing people about the capabilities of our apps. Let's get that process going by creating a new design and then putting that live.

We can remove the link to WordPress.com and replace it with a QR code and link, potentially using http://onelink.to/

@megsfulton
5 years ago

Here's a screenshot of the current page as a desktop view

@megsfulton
5 years ago

Here's the current page in a mobile view

@megsfulton
5 years ago

2nd iteration of the desktop layout and design

@megsfulton
5 years ago

2nd iteration of the mobile layout and design

#13 @megsfulton
5 years ago

I just attached a second iteration of this page side by side with the original (current) /mobile page.

This version includes the following changes:

1) Four feature callouts with corresponding dash icons (https://developer.wordpress.org/resource/dashicons/#editor-code)
2) Screenshots of the mobile app on Android and iPads - these screenshots feature the editor and media library screens.
3) On the desktop version, there's a field to enter your email address to be sent a link to download the app. I'm not sure if this has the same privacy concerns as a QR code, but while researching app sites noticed that some offered this email as an option in addition to being sent a text message link.

#14 @joostdevalk
5 years ago

I should probably pick this up as otherwise it gets stalled :)

Let me discuss this in the #design channel and see if there's any feedback we need to take into account!

#15 @karmatosed
5 years ago

  • Keywords ui-feedback ux-feedback added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 years ago

This ticket was mentioned in Slack in #design by boemedia. View the logs.


5 years ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 years ago

#19 @hedgefield
5 years ago

Great iteration! I noticed some things when looking at it in detail:

  • The example post in the device has very little text and two big images, which makes it hard to see at a glance that it is an article.
  • I find the images breaking out of the device very confusing. It breaks the silhouette and doesn't seem to have a clear intent. What's the thought behind that?
  • The copy about which versions of WordPress the app supports is pretty prominent and high up on the page. Especially on mobile it appears above the screenshot and the features, while in my mind this is more of a footnote, a quick notice to let people know they need a reasonably up-to-date install. I've only used the app to manage WP.com hosted blogs before so I didn't even know you could use it for standalone sites too. I feel that sentence would only confuse people this early in the pitch. Probably a better place is below the features.
  • Perhaps Need Help also needs some kind of image, or the desktop layout of Contribute could use a tweak, as I feel like there is a lot happening in the layout, with the left-aligned features, the center-aligned email input, the right-aligned contribute copy, and then one more section with no image that's left-aligned again. But this is more of a feeling and not a hard suggestion.
  • Perhaps my strange feeling about the Need Help section is also because it is the only section that has a divider. The other sections are all divided by blocks of color.
  • Make the slack channel shoutout a link to the WP slack signup page?
  • The color of the icons could well be darker (if not just black), the current tint of grey doesn't really appear anywhere else and feels a bit muted.

#20 @megsfulton
5 years ago

Thanks for the feedback! I'll have some time later this week to address it with a revision.

I find the images breaking out of the device very confusing. It breaks the silhouette and doesn't seem to have a clear intent. What's the thought behind that?

It matches the updated and more dynamic styling that we're using for the app and play store images. https://itunes.apple.com/us/app/wordpress/id335703880

I'll try a version without it for the next round.

The copy about which versions of WordPress the app supports is pretty prominent and high up on the page.

That's a fair point but I wonder if the audience for this site isn't mainly users who have a self hosted site rather than WordPress.com sites?

Need help

I'll take a look at these things in next version.

Make the slack channel shoutout a link to the WP slack signup page?

Good idea!

The color of the icons could well be darker (if not just black), the current tint of grey doesn't really appear anywhere else and feels a bit muted.

I tried to match the color that's being used on https://make.wordpress.org/mobile/

@megsfulton
5 years ago

i3 Web and Mobile

#21 @megsfulton
5 years ago

Uploaded a new iteration.

What's new / different in this version:

  • Removed the popouts from the screenshots
  • Changed the device frames to be less stylized
  • Updated the image in the top section to show both iOS and Android devices
  • Added a new phone screenshot to the contribute section
  • Moved the tablet image to the need help section
  • Updated the icon colors to be #444 to be consistent with the colors on the https://make.wordpress.org/ page
  • Moved the WordPress version text that was previously above the icons to be the secondary text under "Manage your self-hosted site on the go"

@megsfulton
5 years ago

i3 - Fixed - Last upload was missing a component

#22 @hedgefield
5 years ago

Ah hell yeah this looks great!

#23 @joostdevalk
5 years ago

Love it too :)

This ticket was mentioned in Slack in #design by joostdevalk. View the logs.


5 years ago

#25 @melchoyce
5 years ago

This is looking awesome, great job @megsfulton!

Some super minor feedback:

  • I think all of the sections could use a little more top/bottom padding — they feels a little tight on desktop. I think it's fine on mobile, though.
  • Let's make sure to use the button styles that exist on the homepage (button button-primary button-xl) in the download section.

Only concern I have is around maintaining the various screenshots on the page. Stuff gets out of date pretty quickly. We should keep an eye on the page and maybe look at potentially updating screenshots every 6–12 months, if necessary.

Definitely seems ready for dev to me.

#26 @joostdevalk
5 years ago

As discussed in the #design meeting, taking into account the above comments by Mel this has been "signed off".

@sjardo is going to implement.

#27 @joostdevalk
5 years ago

  • Owner set to sjardo
  • Status changed from new to assigned

#28 @megsfulton
5 years ago

Thanks for the feedback @melchoyce!

I've made those spacing adjustments, you can see them in the Figma file: https://www.figma.com/file/EJ24hpW2ycwOE6p45OQncpqS/Mobile?node-id=1%3A3

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


4 years ago

#30 @tellyworth
4 years ago

  • Keywords needs-design-feedback added

Is this a finished design that is ready to go, or are there decisions still to be made?

#31 @hedgefield
4 years ago

As far as I know this design is still approved, just needs someone to implement.

This ticket was mentioned in Slack in #design by hedgefield. View the logs.


4 years ago

#33 @hedgefield
4 years ago

  • Keywords needs-patch added; ui-feedback ux-feedback needs-design-feedback removed
Note: See TracTickets for help on using tickets.