Vypr Profile Page

Vypr Profile Page Designs.

Brief

We’d like you to plan and design a consumer profile screen for the Vypr iOS app. The current Vypr iOS app can be used as inspiration or if you want to design something different that’s also fine.

The profile screen will be used inside of the Vypr app and should contain the following:

  • Name
  • Birthday
  • Gender
  • PayPal Email Address
  • List of redemptions. Once the consumer reaches a points threshold they receive a payout which is paid directly to their PayPal account. A redemption should contain the following:

    • Redemption date
    • Amount (usually 10,000 points)
    • Value (usually £5)
  • Link to the Vypr FAQs
  • Link to “Refer a friend”

The consumer’s name, birthday, gender and PayPal address should all be editable and are compulsory fields.

It’s not a requirement that all of the information should be on one screen and instead can be split across multiple if that is deemed necessary.

Disclaimer

I don't have access to an iPhone, so I'll be completing this task using screenshots taken from the android app and assuming they have some parity.

Research

We'll get started with a bit of research looking at how other apps present their profile pages. Here's a sample of 10 apps I had installed. I've hidden some information for privacy.

Profile pages from popular apps.

More profile pages from popular apps.

Common profile page features

  • The most prominent element on the pages is a circular profile picture.
  • Username or handle.
  • Edit button.
  • Summary of important information, sales, balance etc.
  • User generated content and location on social media platforms.

Other observations

  • Only two of these pages include the branding for the app.

What we have today

Let's take a look at the Vypr profile page as it exists today.

Current Vypr profile page on android.

Let's run through some of the differences between the Vypr page and those observed from other apps.

  • The Vypr branding is prominent - while unnecessary this isn't going to cause any problems.
  • No Profile Photo - The page copy is centre aligned which might help us decide alignment later on.
  • First Name and Last name are separate fields.
  • All the data has large labels. We can lose these visible labels for content that's easily identifiable. While keeping hidden labels for accessibility.
  • "More info please" is a confusing bit of text - it doesn't seem to be a button or serve any purpose.
  • "Your profile" This is the page title, as identified from the points page. My thinking here is that it's obvious it's my profile so simplify the copy to "Profile".
  • The floating action button to edit is pretty prominent, but lacks the legibility of a text label. It may go against Google Material Design guidelines, but that's not always a bad thing. Amazon and LinkedIn are using the pencil icon but the majority use text labels. In UI design, making something stand out can often make it harder to spot, as acknowledged by Googles Product Design team.

Wireframing

Okay so we've got a rough idea of what we have and what we need to deliver. Let's start building some wireframes that meet the criteria in the brief.

V1

Wireframe 1.

Our first wireframe includes the first four requirements for customer information. This data is captured when a user registers so I wouldn't expect these value to be missing.

The email address looks like its linked to the account (which it might be). The brief specifies the address is for PayPal - so we'll want to show this in some way.

You'll notice I added a page wireframe that includes a circular photo placeholder. The placeholder alone is a strong visual indicator that this is a profile page. And while we may decide that it's not part of what we want to deliver. We could compromise and include the users initials until we decide otherwise.

Notably I've not added the copy from the existing design.

Takeaway actions:

  • Add the edit button
  • Make it obvious the email is for PayPal
  • Mock-up with Profile Pic and customer initials.

V2

Wireframe 2.

Okay now we're cooking. We've got two pages that are very obviously profiles. We've got our edit button that now occupies the space in the right that didn't do anything before. I'd propose that our edit button open a new page that lists all fields for editing - the same as exists in the app today.

I've tweaked the text sizes and weights to give a little more emphasis to the users name, creating a visual hierarchy.

If a user has a long list of redemptions this could overflow the page. Unless we have an issue that a vertical page overflow isn't what we we need we'll allow the page to do so. This is a design axiom, so users understand they can normally scroll a page in apps and on the web.

We still have two more items to add to the page "Refer a friend" and "FAQs". Let's do that.

Actions:

  • Add button to "Refer a Friend"
  • Add link to "FAQs"

V3 - Refer a Friend and FAQs

Wireframe 3.

Now we've got all interactive elements above the fold, making it easy to find them. And both left and centre aligned layouts look good. The top part of the design serves to identify it as a profile page, and user related information is presented in close proximity.

V4 - Redemptions and Branding

Wireframe 4.

So onto the next part of the puzzle, the list of redemptions. We can take inspiration from banking apps for this. We'll want to show the redemptions in reverse chronological order. This ensures that the latest show at the top. It's likely that recent transactions are the ones customers care about most.

I've also applied a lick of paint using the existing branding to get a feel for how it could look in the app.

V5 - Anything else?

Other points.

  • Consider using the exiting icon for better recognition among exiting users.
  • These items bleed into each other, try to identify them as separate elements.
  • Is this button easy enough to reach on mobile? We could position it like a floating action button.
  • Does a link to FAQ’s need to look like a button and is it clear enough what this is?
  • This table needs a heading to spell out what the data represents.
  • It would be great if we could show a user when a status here. We could use nice visual cues.

This is an existing page and some customers have already seen it - so big changes here could be jarring.

With this in mind we could add the edit icon onto the new button to help with recognition. Let's also consider that it seems keeping your profile up to date is more important than reading the FAQs. Without data on this I'm going to consider this is the case.

The gender and date-of-birth visually bleed into each other a little, so a design element of some sort might help to separate them.

And I missed the heading for the redemption table - I'll get it added.

A redemption payment status could be something users want to know at a glance.

Food for thought

I noticed some feedback in Google Play that references the delay between a redemption and payment. Communicating that clearly to customers would help build brand trust. It's beyond the scope of the task, so I'll not do anything with that.

V6 - Finished Proposal

Finished Design Proposal.

The navy text colour on the light grey background has a contrast ratio of 12.71:1. This gives us a lot of scope to take emphasis away from some content.

Here we have two states for the page:

  • A user that's not redeemed any points and has no profile picture
  • A user that has many redemptions and a profile picture.

We want to provide helper copy and a call to action rather than show an empty table. Here we're trying to educate new customers.

I've swapped the FAQ and Edit buttons around to make it easier to reach the update your profile button with your thumb. And I've also added an icon to refer a friend.

There's now a subtle design element separating the gender and date of birth information.

Summary

So we've got a good starting point for our new layout.

We've included every brief requirement in the design - every field would be editable on a separate page (not designed). And despite being asked for an iOS specific design, the patterns used would work cross platform, see "Just for fun" for iOS examples.

What we haven't done for this task is to test any of our changes with real customers. In a real world scenario we'd want feedback during the design process so we're not making too many assumptions, and we don't introduce any pain points.

What could we improve?

  • We would spend time gathering and analysing our data.
  • We would include customers in the design process and get feedback as early as possible.
  • We'd define the problems we were solving - so we know if we've solved them.
  • Ideation would include the team, benefiting from existing domain and customer knowledge.

I'm not going to lie, those improvements make up a good chunk of the work I do. This exercise is really just a small snapshot of how I normally go about designing and iterating.

Just for Fun

Let's have a little play around with the page aesthetics to breathe new life into this design...

Using the colour pallet provided as a starting point. I've designed two concept colour schemes for light and dark mode. And messed about with the branding a little. The logo handles different colours well because of how it's shaped.

A hint of colour in the table makes the page come to life that little bit more.

I've had to stray from some of the provided colours to meet accessibility standards. And have applied tints and shades where needed.

Just for fun.