Project Type

• Startup

• New Product Development

• iOS Native Mobile App Design

• B2C

Skills used

• Information Architecture

• Sketching

• Wireframing

• UX Writing

• Prototyping

• Usability Testing

• UI Design

• Visual Design

• Design System

• Product Strategy

Tools used

• Sketch

• InVision

• JIRA

Project DURATION

3 Months • October 2017 - January 2018

PLEASE NOTE - THIS CASE STUDY IS OPTIMISED FOR DESKTOP VIEWING.

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

Alumnet's MVP had already built by an agency; my first challenge was to take the learnings from the 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 the delivery of the iOS App. We decided on an MVP release for internal testing in December and a public release in March.

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.

Login

After conducting a usability review of the website and collating initial feedback from users, it was clear that both the signup 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 crucial 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 US 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 straightforward, using progressive disclosure to focus the user's attention on only one necessary input at a time, reducing cognitive load.

Insights from testing V1:

• The 'Password Manager' button confused 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. A technical constraint of using password managers is that email and password inputs can't be on two separate screens - I opted instead only to 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.

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 ignored it

V3 - Forgotten Password & Passwordless Authentication

The last login journey I prototyped was the forgotten password journey. Having seen excellent 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.

Insights from testing V3:

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

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

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).

You can click through the finished prototype for magic link login below.

I took a prototype into testing with various scenarios such as: liking a post, replying to a comment and opening up a post view - I then prompted the users to find out what they were expecting to happen when interacting with some aspects of the prototype.

Below is an example of one of the prototypes created to test 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

You can click through the prototype below.

Insights from this prototype:

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

• Notifications weren't distinct 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 Alumnet was 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 disappearing after adding a space, which would trigger an embed/preview of the content that could then be deleted by tapping the x.

On Alumnet, users post content 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. We set the default as 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 view all of their circles. We intend 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 critical to any habit-forming product - especially a social network which relies so heavily on network effects - so iOS users needed to allow push notifications.

For an iOS app, the timing of requesting permissions for push notifications is a crucial 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 system dialog box 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 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.

After trying several different iterations, I found the best way of utilising the available space was to use a card-style UI which allowed me to 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 reusable core elements.

You can click through the prototype below.

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 would move to joined when accepting an invite

Below is a gif of an early staging build. Scrolling down the page shows the header collapsing with a parallax effect and sticking to the top of the screen with the tabs underneath.

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

Below is the prototype I took into testing.

Learnings from this prototype:

• The card swiping gesture was again understood

• 'See all' was spotted and understood

• Being able to view a guest list is essential for events, with users wanting to see who else had been invited and most importantly what others had RSVP'd

I acted on this feedback and made the RSVP's more prominent in the visual design as well as adding a separate searchable guest list view.

You can click through the prototype below.

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

Search

Initial sketches and wireframes I did for the search section used a tabbed design between circles, users and events.

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

For the MVP, this would be a straightforward keyword match with a highlight to reveal this 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 an excellent visual indicator to show them why they saw those results.

Below you can see the final visual designs for search.

Chat

After a meeting in December, we decided we would include Chat in the MVP release. As I had created a design system, it only took a week for me to wireframe, prototype and apply the visual layer.

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

I then prototyped for two journeys.

Journey 1

1. View new message

2. View profile

3. Reply

You can click through the prototype below.

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

Journey 2

1. Create a new message

2. Find John Morton

3. Send him a message

You can click through the prototype below.

2018 Update

At the start of 2018, my focus moved from the app onto the website. I was working on a redesign, new feature improvements as well as the overall product strategy. I was responsible for overseeing the delivery of the app through alpha and beta phases through to the public release.

Design for iPhone X