Product Manager & UX Consultant
Free iPhone 7 Mockup PSD For Presentation 2.jpg

Alumnet iOS App

Project Type

  • Social networking startup

  • New product development

  • iOS native app end-to-end design

Skills used

  • Sketching

  • Wireframing

  • Prototyping

  • Product strategy

  • Usability testing

  • Native app design

  • Visual design

Tools used

  • JIRA

  • Sketch

  • InVision

Project DURATION

12 Weeks (October 17 - January 18)

PLEASE NOTE THIS SECTION IS OPTIMISED FOR DESKTOP VIEWING.

Alumnet is an early stage startup building a brand-new alumni engagement platform for schools in the UK

With a minimum viable product  - in the form of a website - having been built by an agency, my first challenge was to take the learnings from this MVP and begin the end-to-end design of the iOS App.

After familiarising myself with the existing research, I sat with the CEO to discuss and plan a roadmap for delivery of the iOS App. We decided on an MVP release for internal testing in December and a public release in March. Given that I had only joined in mid-October and would also be simultaneously leading a re-design of the website, this left me with a lot do and not long to do it in - luckily this is when I'm at my best.

Over the course of 2 weeks, I worked hard to sketch, wireframe and prototype all of the app journeys, testing and iterating as quickly as possible.

I ran interviews and testing sessions with various target users to catch usability issues as well as to understand the unique motivations for the different target user groups.

IMG_0719.JPG

IA & Navigation

Whilst we had agreed to leave out certain features for the MVP, I worked closely with the CEO to understand the long-term ambitions for the app - learning from previous projects the importance of making room in the designs for further feature development. Understanding this allowed me to plan ahead, working out how we could design the navigation with future development in mind and enabling me to pare back features for the MVP in a way that wouldn't cause us architectural issues later on.

Login

After conducting a usability review of the website and collating initial feedback from users, it was clear that both the sign up and login journeys were causing significant issues. There were many reasons for this, such as over-engineered password rules and a confusing email validation journey.

Problems like these can cause serious friction right at the entry-point of your application, so it’s important to construct smart and well thought out journeys to make this process effortless for the user. Research has found that 46% of those surveyed in the U.S. report that authentication failures have prohibited online transactions frequently or very frequently. You can read more here. This research was backed up by the statistics from the site, where users where routinely bouncing when faced with a login screen.

We decided the initial app release would target existing users only, so I turned my focus to the login journey, rapid-prototyping login options and making sure this crucial first step was seamless.

V1

The first version I tested was very simple, using progressive disclosure to focus the user's attention on only one necessary input at a time, reducing cognitive load.

You can view the V1 prototype by clicking here.

Insights from testing V1:

  • The 'Password Manager' button caused confusion for some participants

  • There was a variety of usage of different password managers/solutions that I would need to factor into the next iteration

  • The 'Next' button wasn't clear enough

  • Participants understood the purpose of the eye icon

V2

Two participants had fed back that their password manager of choice was the iCloud keychain - with this being a native iOS app, adding this functionality was a quick win for the second iteration.

As password managers had been the main feedback subject from the testing and interviews, I spent some time with the iOS engineer to understand implementation restrictions. In order to make use of password managers, the email and password inputs can't be on two separate screens -  I opted instead to only show the password field once the user had successfully entered an email address, thus maintaining the benefits of progressive disclosure.

Also factored into this version was a quick way to clear the input fields.

You can view the V2 prototype by clicking here.

Insights from testing V2:

  • The next button was much clearer

  • Those who used the iCloud keychain recognised the icon

  • Those who used different password managers recognised the lock icon in the email field, whereas those who didn't recognise it simply ignored it

V3 - Forgotten Password & Passwordless Authentication

The last login journey I prototyped was the forgotten password journey. Having seen great use of ‘Magic Links’ as a way not only to solve the issue with forgotten passwords but even as a way to negate the need for passwords at all - I was keen to test and incorporate this into the login journey.

You can read more about 'Magic Links' also known as passwordless authentication here.

You can view the V3 prototype by clicking here.

Insights from testing V3:

  • Those unfamiliar with 'magic links' were impressed with this feature

  • Those who had used this method before were happy it had been included

After deciding that passwordless authentication is something we'd like to implement for the website also, I spent some time with the back-end developers to understand and mitigate any risks, and we have planned to begin testing and rolling out this functionality for all users in the new year (2018).

 - 2018 Update

You can find the finished prototype for magic link login below.

 
NF.JPG

Home/Newsfeed

Being a content-driven platform, users would be spending a lot of time browsing their newsfeed so I needed to make sure that content was displayed in a way that was easy to scan, interact with and navigate.

I took a prototype into testing with various scenarios such as liking a post, replying to a comment, opening up a post view etc. and prompted the users to find out what they were expecting to happen when interacting with certain elements.

One example of the prototypes you can find below for interacting with content on the newsfeed.

The tasks for this prototype were:

  1. Find Jessie Garret's post

  2. See the post in more detail

  3. Like the post

  4. Leave a comment

  5. Return to the newsfeed

Insights from this prototype:

  • The 'Post' button wasn’t clear to all users - once prompted users found it and understood the icons meaning

  • Notifications weren't obvious and were mistaken for messages

  • The +1 icon when someone had joined a circle was confusing

  • Overall layout was understood - users expected to be able to view profiles and circles by tapping their respective avatars

  • Nested comments worked as expected

Below you can find examples of the final visual design.

Posting content

As the aim was for Alumnet to be a content driven platform, I wanted to make sure that posting content on the app was as simple as possible. Looking at how users were interacting with the website showed they were more likely to share links and videos.

After trying a couple of different mechanics for showing a link preview, the most successfully understood was the link dissapearing after adding a space. This would trigger an embed/preview of the content that could then be deleted by tapping the x.

On Alumnet, content is posted in 'Circles' which function much like closed groups. As such, when posting content the user has to choose which Circle they want to post in. The default is set to their school circle (which they automatically join when registering), but as people had already started to create many different circles, I needed to make it easy and intuitive to choose a circle to post in.

For the MVP we decided to show the top two circles they’ve posted in, before letting them expand the modal view to see all their circles. Our intention is to revisit this and iterate using data on posting habits from mobile.

You can view a video of the visual design for the posting journey below.

Notifications

After reviewing the website it was clear that notifications were missing from the MVP. External triggers are key to any habit forming product - especially a social network which relies so heavily on network effects - so it was important that iOS users allowed push notifications.

For an iOS app the timing of requesting permissions for push notifications is an extremely important step that people often overlook. Once a user declines to allow push notifications, they are unable to re-allow notifications from within the app, instead of having to go to the iOS system settings in what is a complicated process.

Permission priming allows us to show them an informative custom dialog that explains the value of allowing notifications, before deciding whether or not to show them the system dialog. If they select allow, we show the system dialog. If they select no, we still have the opportunity to ask them at a later date where they are more likely to select allow.

I hypothesised that an optimal time to prime for permissions would be straight after a user had first shared content on the platform (as seen in the above video). In this scenario the user wouldn't want to miss out on the feedback and reactions from their peers, so we can clearly demonstrate the value of allowing notifications to them.

Below you can find examples of the final visual design demonstrating the permission priming dialog, the system dialog, the app settings screen with notifications disabled, and the notifications settings screen.

CirclesSketch.JPG

Circles/Groups

Circles are the closed groups where content is posted on Alumnet. Users automatically join their school, year and house circles but are also able to create their own. On the website, a user can create new circles, manage their existing circles, browse suggested circles as well as see circles they've been invited too. With so much going on I needed to design interactions that make navigating this section as effortless and intuitive as possible.

After trying several different iterations, I found the best way of utilising the available space was to use a card-style UI. This allowed me to use make use of the swiping gesture and horizontal space off-screen. Using cues from the recent iOS11 release, I also added a text link to see sections in a vertical list.

While wireframing this section I had the other sections of the app in mind, intending to create elements that could be used elsewhere in the app and eventually end up with a design system of re-usable core elements.

Insights from testing this prototype:

  • All participants without prompting attempted to swipe to see the other circles in each section

  • All participants expected to be taken to a new page to display the circle information in more detail when tapping

  • The accept and join buttons where clear

  • All participants expected circles to be moved to joined when accepting an invite

IMG_0599124124.JPG

Animation/Interaction

I worked closely with the iOS engineer to demonstrate how content would react when scrolling down on a circle detail page, staying lean by simply sketching the examples on a whiteboard and talking through the challenges. This was important to get right as I wanted to re-use this paradigm in further sections of the app to maintain consistency.

Below you can see a gif of a staging/test build scrolling down the page for the header to collapse in a parallax effect, sticking to the top of the screen with the tabs underneath.

circlesanimation.gif

Below you can find the final visual designs for the circles section.

EventsSketch.JPG

Events & Search

Events are key to alumni engagement efforts so we made sure to include the events section in the app MVP.

 

Prototype:

Learnings from this prototype:

  • The card swiping gesture was again understood

  • 'See all' was spotted and understood

  • A guestlist is vitally inportant for events, not only showing who was invited, but most importantly what they RSVP'd

I made the RSVP's more prominent in the visual design, and added a seperate searchable guestlist view, this was after a participant in testing raised the need to search the guestlist.

Below you can see the final visual designs of the events tab, an event page, the guestlist and searching a guestlist.

Search

Initial wireframes and sketches for the search section were of a tabbed design between circles, users and events.

We decided to make the search a global search view, highlighting the reasons why the results are showing.

For the MVP this would be a very simple keyword match and the highlight shows that to the user. With search expectations rising with better algorithms, AI and personalisation of services available it was important for the user not to overestimate the search capability of the MVP, so we felt that adding a highlight was a good visual indicator to show them why they were seeing those results.

The first two screens are examples of the minimum displayable results - the last two screens show maximums with options to see all (after top 3 results for each section).

 

 

Chat

After a meeting in December we decided that Chat shoud be included in the MVP release. As I had created re-usable elements with a design system in mind, it only took me 3/4 days to wireframe, prototype and apply the visual layer.

I adjusted the bottom navigation to include the chat icon and did some technical discovery with the iOS engineer to understand how navigating around the app once in a chat view would work.

I then prototyped two journeys.

Journey 1

  1. View new message

  2. View profile

  3. Reply

For creating a new message, I created a modal view that would then become part of the cascading navigation style.

Journey 2

  1. Create new message

  2. Find John Morton

  3. Send him a message

2018 Update

At the start of 2018 my focus moved from the app onto the website and to the overall product strategy. As Product Manager I was responsible for overseeing the the delivery of the app and the public release.

app_screens.png