Line-Up Realigned

Disclaimer: This project is not affiliated with Line-Up. Neither my partners nor I work at or for Line-Up.

Role

User Research

Competitive Research

Ideation

Wireframing

Prototyping

Usability Testing

Tools

Whimsical

Sketch

XD

Year

2019

Timeframe

2 weeks

Team

Melissa Chung

Jonathan Fung

Line-up is an event creation website that allows users to organize and showcase their events (known as their Line-Up), as well as organize their ticket orders. However, it does not have user interactivity on Line-Up and it does not promote longevity amongst its’ users and between devices.

User Research

Once we read through the project brief, we started creating a design plan to figure out what we needed to do. We started by doing a competitive analysis of the Line-Up and user research. We looked at the user groups of professional event planners and people who planned for personal purposes. Research questions were focused on what the users typically used to create their events and their likes and dislikes about those applications. We went to hotels, concert/conference venues, and restaurants to look for the group of professionals event planners while we asked friends and family for the group of personal event planners. We were able to get responses from the user group that plans for personal purposes quicker in comparison to those of professional event planners.

We created user personas and a journey map once we finished doing user research and competitive analysis so that we could be design and prototype based on specific people. We created two personas based on our two user groups, an event planner and a student. We focused the journey map on the event planner because Line-Up currently doesn't have an option for non-professionals to create events.

Sabrina-Persona
Neville-Persona
Journey-Map

Wireframing

Screen Shot 2019-04-18 at 2.11.42 PM

Once we created the personas and journey map based on the user research, we created user flows for our target user group of event planners. We created them to help us plan for what screens we needed to work on.

Sketch 1
Sketch 2

With the user flows done, we sketched out the main layouts of the key screens, the event pages and the profile pages.

Screen Shot 2019-04-18 at 2.24.06 PM

With the sketches, we worked on Whimsical to create the wireframes. Whimsical was great for us to work together on editing the wireframes in real-time.

Mid-fi wireframes

Once the wireframe layouts were set, we split the workload between the three of us. One partner and I were using Sketch while the other partner was using Figma. The other Sketch user and I created most of the screens, focusing on the dashboard, profile, event listings, and contact listings pages. The partner using Figma focused on creating the screens specifically for event creation pages.

Screen Shot 2019-04-18 at 2.52.06 PM

Testing

Screen Shot 2019-04-18 at 3.10.49 PM

We did some quick user testing before adding all the colours and pictures into the screens to ensure that the layouts were intuitive. The first set of changes were to get rid of the sidebar scroll, to get rid of the blue background that separates the events and users since it's not commonly used, and change the background of the boxes on the manage users page so that the blue was used to select people.

Screen Shot 2019-04-18 at 3.24.54 PM

Once those changes were made, the colours and profile pictures were added so that the screens started looking more realistic for more user testing. We also wanted to include the onboarding screen because their current onboarding screen has little information to personalize the process for the users.

AB Testing1

Another feedback that we received was about the use of the interests section on an event goer's profile. It was originally just a list of event goer's favourite types of events (right). The suggestion was to make them into bubbles look like the tags of an event so that by selecting that interest, it would redirect the user to browse events related to that tag.

AB Testing2

Another piece of feedback we got was on the icon for the tickets. It was brought to our attention because the original ticket icon we were using (on the right) did not look like a ticket and so users were confused by what it was supposed to be. The suggestion was to find one that is outlined and has a small ticket stub attached to the entire ticket.

AB Testing3

Another feedback was to about the profile link on the profile page. A good point that was raised was that the profile link is unnecessary on the profile page because anyone who is looking on that profile could just copy the Line-Up link from the browser and the user of the profile has a personal link on the page already.

AB Testing 4

Some changes that were made for the events were taking out the equal sign in the "* = required", adding the manage users button in the invite member section, and adding a post settings section. Having an equal sign made it seem like the equal sign meant required, not the asterisks. The manage users button was missing, which allowed users to invite people not already on Line-Up or on the event. Lastly, a post settings section was added to let the event creator quickly notify their followers of the event.

AB Testing000

The last feedback from the usability testing was on the manage users page, in the management board. All the text was left-aligned with its corresponding header and the removed symbol was changed to red so that it corresponded with the idea of removing someone who was no longer on the event.

Screen Shot 2019-04-09 at 3.33.27 PM

Outside of the usability testing, some A/B testing was done to find what layouts were more intuitive for the users. The first testing was the order of a user's immediate information. We tested whether the job title or their company should go first when a user looks at another user. Majority of users said that intuitively, they preferred the title first because they find what the person does is more important than where they work.

AB Testing5

The second A/B test was determining how the dropdown menu should look. We wanted to look at how the highlighting of where the user is should be if they are on a page within a heading. Majority of the users preferred the teal colour as the highlighting colour and then the header to just be the same grey colour as the rest of the dropdown menu.

Prototype

As we were making our Mid-Fis and Hi-Fis, we found that there were screens that we forgot about when we were creating our wireframes in Whimsical. After testing and iterating the pages, we put all the screens together and made the prototype in XD. Below are the prototypes of Sabrina (left) going through the app and Dean (right) going through the app.

Screen Shot 2019-04-18 at 5.29.25 PM

Challenges

A challenge we had was during the user research, we did not anticipate that we would have to plan to book time with our target user group, the event planners, to conduct user interviews. When I emailed or called certain places, the response time was 1 to 5 days or no response at all. Another challenge we had was deciding on the MVPs for this project because we wanted to work on this project. This was hard to account for at the beginning when we were creating our design plan because we only had 2 weeks for this entire project. A third problem I had encountered was collaborating on Whimsical. Even though there is a collaborating function, I couldn't tell where my partners were on the screen, outside of when their avatars were next to their upcoming edits. 

Next Steps

The next steps would consist of redesigning the mobile app to stay consistent to the website, implementing the comment/review section on the events, implementing the onboarding process to the website, adding a toggle for public vs private events, and including disclaimers.

UX/UI Design

walking-down-the-street-with-iphone-7
bright-office-enviroment-with-macbook-air
bright-office-enviroment-with-macbook-air

Spotify

Shoppers

Line-Up