WordPress.org

Making WordPress.org

Opened 4 weeks ago

Last modified 11 days ago

#4096 new defect

Redesign /mobile/

Reported by: joostdevalk Owned by:
Milestone: Priority: normal
Component: General Keywords:
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 (7)

onlink_to_ctcs9t_small.png (582 bytes) - added by elibud 4 weeks 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 2 weeks ago.
Here's a rough wireframe sketch that visualizes those suggestions outlined above.
Mobile.png (193.5 KB) - added by megsfulton 2 weeks ago.
Current Mobile Apps - Desktop View.png (652.5 KB) - added by megsfulton 11 days 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 11 days ago.
Here's the current page in a mobile view
i2 - Desktop.jpg (1.6 MB) - added by megsfulton 11 days ago.
2nd iteration of the desktop layout and design
i2 - Mobile.jpg (1.1 MB) - added by megsfulton 11 days ago.
2nd iteration of the mobile layout and design

Change History (20)

@elibud
4 weeks ago

QR code to download the iOS and Android apps

#1 follow-up: @elibud
4 weeks 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 4 weeks ago by joostdevalk (previous) (diff)

#2 in reply to: ↑ 1 ; follow-up: @netweb
3 weeks 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
3 weeks 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
3 weeks 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.


3 weeks ago

#6 @megsfulton
2 weeks 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
2 weeks ago

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

#7 @joostdevalk
2 weeks 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.


2 weeks ago

@megsfulton
2 weeks ago

#9 @megsfulton
2 weeks ago

Here's what that look like on mobile.

#10 @joostdevalk
2 weeks ago

Looks very good to me :)

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


11 days ago

#12 in reply to: ↑ description @boemedia
11 days 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
11 days ago

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

@megsfulton
11 days ago

Here's the current page in a mobile view

@megsfulton
11 days ago

2nd iteration of the desktop layout and design

@megsfulton
11 days ago

2nd iteration of the mobile layout and design

#13 @megsfulton
11 days 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.

Note: See TracTickets for help on using tickets.