Hero

Logan Ward UX/UI Portfolio

About Me & My Process

Hello, thank you for taking the time to inspect my portfolio. I am Logan Ward, a graduating student at Rutgers University – New Brunswick. At this time, I have one UX/UI project to showcase, from my Human Computer Interaction course that basically took us through the UX/UI design process, taught by Dr. Alex Lu. My group chose Instagram as our platform and tackled a real issue within it.

While this is how he taught it, I can easily adapt to whatever process a mentor or team utilizes, as I am a quick learner and overall good with people. However, I believe many of these apply to typical processes or are at least translatable. I have taken a few art and graphic design courses as well, and overall consider myself a creative person.

This website was made by me through principles I learned in my Web Design course (HTML, CSS, JavaScript). Other courses I had that may prove beneficial for this career are Information Visualization (Tableau), Object-Oriented Programming (Python), and Designing Tech Solutions (more UX experience). All of these have furthered my knowledge, and made me a better UX/UI Designer.

I also have a page with some things I have done with the Adobe Suite.

Step One

Pain-points and Testing

The first stage in all of this is to familiarize the team with the platform itself — this obviously is only necessary when first taking on a project or if another section is added. For our group and app, Instagram, we found three issues: privacy concerns and data collection, the AI chatbots, and doomscrolling (over use of the feed and Reels function).

We decided to tackle doomscrolling on Reels. This can have severe mental consequences for some. Obviously, people using the app more is the dream for the company, so we had to think of creative ways to go about retaining users' time spent and the ad revenue that comes from hyper active Reels users.

Note: for all of these steps I have Google Documents that go more in depth. If you are interested, please let me know and I can share them!

Description

Reels is a scrolling, infinite set of videos, very similar to TikTok. There are likes and a comment section on every video, along with the ability to share to others.

Problem

With the never-ending nature of it, users can get trapped into a loop that can be debilitating and stressful for some.

User Groups

The younger generation are the most common you will encounter — those in their teens and twenties.

User Priorities

Users are seeking entertainment, creativity, and an escape when they choose to watch Reels.

Step Two

Interviewing Process and Analysis

Next, interviewing real users to get their opinions of the platform and, in particular, how they interact with Reels in our case.

This starts by making a set of questions, in which we are trying to get an honest and open statement without being too leading. The main idea here is to get a feel of how users make a platform a part of their daily/weekly/monthly lives, and things they like or dislike. It is also important to get users of varying diversity, ages, and interests to cover as much ground as possible.

With a substantial number of these interviews and/or surveys, they can be analyzed. By looking at answers thoroughly, commonalities will begin to reveal themselves — these can be grouped into clusters which can then be further condensed into patterns.

This link will take you to my group's FigJam showing this, along with the user flow.

Step Three

Personas, Scenarios, Brainstorming, and Storyboarding

Personas take key aspects gathered from things like surveys and interviews, channeling them into a single example user. Scenarios and storyboarding put this fictional person into scenes where they may encounter any given issues.

Brainstorming is when the team comes together to come up with ideas and bounce them off of each other. It is judgement free time, and someone can say something that another member of the team can take to another level.

Persona
Brainstorm

Persona — Here is a persona I made for the project. We made two total, with written scenarios describing use.

Brainstorming Board — Our brainstorm board, led us to two paths we wanted to pursue.

Ideas
Sketch

Potential Ideas — Our two ideas.

Sketch — Developing one of the ideas.

Storyboard

Storyboard — Made by a group member, we made one for each idea we had, this one being the winner.

Step Four

User Flow & Lo-fi Prototyping

A user flow is helpful when used as a layout to guide basic prototypes. It can avoid missing out on things that should be included from the jump, and result in less unnecessary iterations. It can also express ideas to others outside of the UX/UI team.

User Flow

Lo-fi prototypes should be simple and cheap to make — they are mainly to get the point across and provide a basic layout that may be implemented into a hi-fi prototype.

Paper prototype 1
Paper prototype 2

Step Five

Hi-fi Prototyping

This is a video demonstration I did, taking you through my finalized Hi-fi prototype. We had another rendition of it before this that we took feedback from the class and professor to improve. This prototype was designed entirely by me on Figma, except for any gifs you see and the initial Reels home page.

Adobe Work

Here you can see some works I have made with either Photoshop or InDesign. These show my abilities within the software, along with comprehension of typography, framing, and grabbing attention. (and a colored pencil drawing)

Adobe work
Elephant Bark 1 Bark 2 Drawing

1 / 4

Contact Me

Reach out to me if interested in interviewing!

lward1216@gmail.com

(609) 331-2620

LinkedIn

Photo