Onboarding users @ ArrowTop Technologies

Grace Gadston
Aug 17, 2016 · 12 min read

Try the prototype here

Arrow Top is an IOS social media platform based around creating image centric trends for your friends and followers to join in and contribute with a similar, if not better, image.

I was contracted with Arrow Top to re-design their onboarding process before their big launch to investors a few months later. Previously, they had gone through a few changes of terminology and features which had left the app in a slightly confusing place, which prompted their decision to change their onboarding process to help prep and guide users through their changes.

Being a young Start-Up they hadn’t yet identified their demographic nor did they have a persona to work from. With my one month sprint in mind, we agreed I would conduct a light amount of research which included comparing the current market, creating a guideline persona and any guerrilla testing I could manage.

Due to the short amount of time before their Launch, pace and efficiency was essential to them in the design process, as was gaining user retention throughout the course of their preparation.

Objectives:

  • Create a Competitive Comparative analysis
  • Create a Site Map, User Flow and Use Case
  • Sketch out wireframes
  • Produce a clean UI design
  • Create a shallow learning curve for the users
  • An efficient Onboarding Process

Competitive Comparative analysis

Since Arrow Tops demographic is yet to be identified, I took a look into the market of Trend setting, Inspiration and image centric applications to see what features were being used and to later look into how these features were being received.

Aside from the mainstream competitors, I looked into these five apps with regards to their reviews and popularity.

After exploring these apps, I found Arrow Tops direct competition were more directed at four of the most popular apps currently on the market, Instagram, Pinterest, Snapchat and Vine. I chose to look into these with much greater detail as these were the apps Arrow Top is striving to shift their user base from, and into their app.

I looked at the current three most common styles of onboarding new users, to assess which approach would be most suitable for Arrow Top and their current state of design.

Progressive onboarding

Simply, this gives the user an instructional walk through the primary flow of the app by approaching a ‘Learn by Doing’ style.

Function-oriented onboarding

This approach looks more into how a user can get started within the app and what features are most common, when to use these features and any interaction specifics. For example, ‘double tap to like a photo.’

Benefits-oriented onboarding

This style explains what the app is, how and when a user can use it in their day and the benefits of doing so.

Following from looking at these apps and the various tear downs available on each one, I came to the decision within my sprint that I should stick to these rules listed below, refine and test when possible to help me produce the simplest Onboarding experience.

  • Allow users to sign up with another app
  • Develop a tag line to give a brief synopsis
  • Guide the users by including a CTA to taking a tour
  • Show the user the benefits of the app — don’t go through all the features
  • It’s important to give an op out or skip option at any time
  • Keep the same colour and typography scheme as the app
  • Use a language that is comprehensible to all users
  • Be human and have personality, not robotic
  • Keep the user informed on their orientation by including a progress bar or steps

User Persona

I made a guideline persona that doesn’t dictate fine details about our audience, but generically wraps up their goals and frustrations so we know where our boundaries lay in the design process.


Contextual Inquiries

During week 1, I took the existing application to 8 people within the suspected demographic, gave them 5 tasks to complete and followed up asking a few questions about their experience.

The Tasks

  1. Create an Account
  2. Follow someone
  3. Join a Trend
  4. Like a post
  5. Create your own Trend

This flow gave me the insight into their behaviour (What people do) vs their attitude (What people say) which would help me identify the pain points I would later tackle in creating an intuitive onboarding experience.

For most, their attitudes were slightly negative when asked about their over all experience, some had valid comments about how they would like to see the app improve for either its feature terminology or UI.

“I don’t know what a Trend is, so I don’t understand what I’m joining”

However many of the users behaviour had shown that the structure and sitemap was intuitive as they seemed to find their way through smoothly, but were stopped in their tracks when prompted to complete an untraditional task like ‘Joining a Trend’.

I found the common problems were either because users were not paying attention to the text and looking for visuals to guide them through, or the concept of responding to trends wasn’t clear so the tasks were becoming confusing and slightly mundane.

To further explore these findings and work towards the new designs, I needed to see the app from a ‘birds eye view’ which led me to creating the Information Architecture for the app.


Information Architecture

Site map

The initial problems I wanted to tackle were highlighting the existing painful areas of confusion within the app and work towards providing a solution to creating the shallow learning curve discussed in our original meeting.

After using with the app for a while, I took a bunch of screen grabs and began to build out a site map from where I could pin point some areas of improvement. I knew that this map wouldn’t only be for the IOS Development team, but would be for the founders too. In light of this I wanted to be able to simply reach both audiences with one map, as I was almost at the end of Week 1 (out of 4) of my Sprint.

This site map is a representation of Arrow Top’s state before any design changes had be made.

Download the Site Map


Analyzing the user flow

One of the prominent problems found during the testing phases, was that first time users would happily skip through the existing 4 onboarding screens, without reading them.

When landing in the app at ‘Home’, they were presented with a partially empty screen that prompted them to follow existing users, or ‘See who’s trending’.

The dilemma with this flow was because most users were skipping, they didn’t understand what the app was about and leading them to the ‘people’ page was taking a longer time for them to grasp what Arrow Top does, like joining a trend. Which as a result, sometimes led the users into a disoriented state.

Another issue with this flow, was that the empty state was under ‘Stream’ and yet would lead users to ‘People’ causing some confusion. However, as previously discussed with the team, it was common knowledge that the current terminology was creating confusion within the navigation and further discussions were made in modifying it into the jargon most users are comfortable with.

Following on from this insight, I came across a point when I would ask a testee to ‘Join a Trend’. They would inherently click the Join button and be taken to the camera (as joining a Trend means you contribute to the feed with a photo of your own). However many found this concept confusing as they would immediately exit out of the camera state as this flow had previously not been explained to them.

On the other hand, some did initially understand this concept and found it quite exciting as they were put on the spot to take a photo. They would typically be smiling, enjoying the experience and looking around the room for something to capture, none-the-less, the majority would exit out of the first Trend they committed to joining and return back to the Trends page to further find something to join.


Sketching

Version 1

Design Approach:

  • A progressive onboarding approach by leading the users through the app step by step.
  • The option to take a tour instead of forcing them into it.
  • Show the users how to respond to a Trend, so they learn by doing.
  • Show examples of a Trend to push the knowledge of how they could be created.

Design Problem:

  • The instructions were too text heavy, which actually meant the users would ignore reading it and only follow the arrows provided which led them ask questions throughout.
  • I highlighted the too much text in green which led the users to believe any green text was clickable.
  • Left no confirmation after picking a filter style for the photos.
  • No notifications that the tour could be taken later
  • Users still unsure of what a Trend is

I did 5 users tests, Male and Female, between the ages of 20–26.

I took inspiration from SnapChat and Carousel which both lead the user through the app via a progressive manner. The difference is, Carousel use arrows and low opacity over lays, where as SnapChat use captions and message notifications to inform the user how the app works.


Version 2

Design Approach:

  • I continued with a progressive approach as getting the users to ‘Learn by Doing’ seemed a positive style
  • Refine version 1 by listening to the users notes
  • Write less text and leave more white space

Design Problem:

  • No indication to what wasn’t clickable so some users were tapping else where on the page to see what would happen
  • No option to exit out the process and some felt like they wanted to skip through
  • Users didn’t want to do the process again to make it a valid post, they felt their original entry should have been posted after the intro.

I did 4 user tests, Male and Female, between the ages of 21–25.


Version 3

Design Approach:

  • A funcation-orientated approach however it is not interactive
  • Refine version 2 by giving the option to skip, opt out and see their progress
  • Simulate the UI and take them step by step

Design Problem:

  • Users thought it was interactive that instead of swiping through they wanted to tap where the arrows were
  • Skipping was a popular choice as users had previously stated, they don’t normally read these slides
  • No explanation of the Expiry date so once users landed in the app they were yet to be confused at what this feature is
  • Didn’t need to explain the filters and captions some felt it was condescending and a waste of space

I did 4 user tests, Male between the ages of 21–30.

From my research and previous testing, I had found that styles similar to this are not too effective as many users will swipe through as the path to skipping is far too easy for them. Most likely because we are in a demanding, instantaneous digital world that anything short of engaging will most likely be dismissed.

However the team at ArrowTop had taken a liking to this style and felt this was the direction we should explore. So I did version 4 or 3.1 similar to this style and was open minded about the approach, however personally felt it was not the route to take.

As all the user testing that had been done during my sprint were students at a school I had previously attended, friends, family and friendly strangers at coffee shops, I wanted to make sure I did as much testing as possible for these versions.


Version 4

Design Approach:

  • I continued with a function-orientated approach but used larger graphics
  • Clean up the Sign Up page
  • Explain Expiry Date
  • Eliminate the confusion from what is clickable

Design Problem:

  • Graphics weren’t clear enough there needed to be some more context to what they were symbolizing or replicating
  • Skipping still remained popular as most would not read through
  • Confirming to exit was annoying as they were mainly expecting to arrive straight into the app

I did 6 user tests, Female and Male between the ages of 18–30.

Having an idea that this style wasn’t the most effective, I also did version 5 and took it along with me and asked a second set of people to test with me so I could take both pieces of data to our weekly meeting before moving on towards an agreement and digitizing the designs.


Version 5

Design Approach:

  • Progressive Onboarding
  • Sign up after user is onboarded
  • Minimal Text and clear direction on what is clickable
  • Allow their trend to be posted in which they created via their onboarding process

Design Problem:

  • Expiry time was confusing as it was an unconventional style
  • No Orientation on where the user is in the process
  • Unclear how to respond to a trend once the onboarding had finished

I did 5 user tests, Female and Male between the ages of 18–30.


Following from these tests, version 5 had proven to be the most effective for the current style and ui. The users were left with a better understanding of how to create and respond to trends, however to know what a Trend should be and when to take one was still a little confusing.

With out creating too many more screens for the flow I needed to get the message across to the users of what a trend photo or video actually is. So I started creating a range of splash screens that would show what type of image could be created.

Feel free to test out the prototype!


Re-analyzing the user flow

Because the progressive style I took was guiding the user in how to create and Trend and not specifically how to respond to a trend, there ended being a few screens in the flow that had to be implemented to inform the users how to do this.

The process to join a trend meant that the users would be taken to the capture screen to take their photo. During testing I found mixed feelings about this slightly abrupt jump and wanted to create a screening screen that informed users that responding meant it was via a photo.

This approach also gives the users the chance to scroll through and browse other users responses to get a feel of how they may want to respond.


Another page I wanted to amend was the empty screen when a user will enter into ‘Following’ (which was previously ‘Stream’). The icon had a negative feel to it and the wording could have had a little more personality to it.

I continued on with the ArrowTop Mascot as a way of keeping the users upbeat about their empty screen and changed the wording slightly from ‘accounts’ to ‘people’ to try and form a personal connection between the users and their next task at hand.


During my sprint with Arrow Top, I have learnt a lot about being resourceful and not being afraid to reach out and ask why, why, why.

To conclude on the project, I wanted to over the solution that was created and any future considerations I have on how the app could progress further,

The Solution

From user testing and researching the competitors I came to a solution to that would fit the market Arrow Top is in and create a simple flow in which users could understand the primary goal of the app.

  • Created a guideline Persona
  • Terminology modifications
  • Progressive Onboarding Approach
  • Allow Expiry date to be Optional
  • Sign up after they committed to creating a trend

Future considerations

I came across a few features that could help improve the app, however this wasn’t in my scope of work so I’ve noted them as future considerations in regards to the progression of the app.

  • Clean up the UI of the app by creating some more white space and fine tuning of the CTAs
  • Adjust the name of the app to replicate how Arrow Top function
  • Introduce instant messaging

Thank you!

www.gracegadston.com

Grace Gadston

Written by

UX Designer @ Invoke Media.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade