Ideation

Once I was satisified with the amount of research I conducted, it was time to move onto the ideation stage. This was where I started to form some initial ideas about how this project's outcomes could turn out.

UI/UX

User Journey

I started off the app's UI/UX ideation by creating a user journey based on my research.

• Sign in using login details provided by a university admin.
• Student is then brought to dashboard, which displays the current week and all lectures/assignments due.
• From the dashboard, students are able to add items to their to-do list, as well as using the note transcribing feature to transform speech into text notes.
• Users can also navigate to the meditations screen, showing them a selection of five different meditations.
• Additionally, users are also able to access the chatting screen from the dashboard, where they are presented with a list of all their active chats. An option to start a new chat will be present at the top of this list.
• When the user has selected to start a new chat, they are presented with a list of different problems students face. The option to 'just chat' will also be available.
• Once a problem has been selected, the user is able to select to either chat anonymously or to display their name.
After this, students will be paired with another student that has selected the same problem. Whilst DegreePal is searching for another student the user can minimise the app, as well as navigate to other screens within the app. DegreePal will notify the user when a chat has been found.

User Persona

Next, I wrote some user personas to help gain a clearer idea of who my target audience were. I used my survey results for this.

Tom Griffiths

• Age: 19
• Year of Study: 2
• About: Tom spends most of his time worrying about his grades at university. To attempt to reduce the levels of stress he experiences, he tries to manage his time using the calendar app on his phone, but he feels that this current way of managing his time could be improved with the addition of more reminders.

Sarah Thompson

• Age: 21
• Year of Study: 3
• About: Sarah is currently in her final year of university and is experiencing a lot of stress related to the workload of her course. Beceause of this, she also feels lonely. She currently doesn't use any apps to help reduce these problems, but believes mobile apps to be beneficial in helping manage stress. Sarah doesn't manage her time at university and feels that this could be improved with the addition of some sort of guidance.

UI Sketches

During the next stage, I used DegreePal's user journey and personas to form the first ideas about what DegreePal could like visually.

Login & Dashboard

Within these sketches, I envisioned the app's login page and dashboard. I wanted the login screen to form a positive first impression for the user. I centered DegreePal's logo and then thought about using animations to move this logo upp, revealing the login fields and button. I wanted to create a modern and clean-looking aesthetic with this, based from my user surveys.

Using the 'App Light & Dark Version' from my research as inspiration, I pictured using rounded tabs in combinaiton with Gestalst's figure-ground principle to separate the dashboard into three segements that the user could change the height of with their finger. I wanted this to create an experience that the user could customise themselves, whilst not sacrificing efficiency.

Adding Entries

I wanted the user's experience of adding to-do entries to be quick and simple, as this was something the survey respondents mentioned in their answers. To do this, I imagined one of the tabs animating from top to bottom at the tap of a button, with a short form to fill in. With this form, users would be able to select a due date for the to-do item using an in-built calendar, along with choosing a colour to label it with for the home screen.

Select Problem

These sketches involve me devising a way to organise the buttons on the 'problem select' screen for the chatting feature. I had some trouble deciding which one to stick with. In the end, I chose to adopt the second box, as it was the most organised option due to its symmetry. Research I conducted during my second year of university uncovered that designs that are unsymmetrical could trigger someone subconsciously due to their unordered nature. Additionally, this would be a more consciously-recognised implication for someone with Obsessive Compulsive Disorder (OCD), for example.

Meditations

On this page, I was experimenting with how to portray the different meditation options. Because there are only five meditations included with the app, I chose to use the middle option, as this makes use of positive and negative space effectively. The user would be able to scroll through these options using their finger. I also investigated the different ways of designing an audio player. I chose to use a format similar to headspace's, utilising different colours and on-screen elements, such as rounded bounding boxes.

Chat

The design for the chat menu was quite similar to the chat menu of other apps, such as Facebook messenger. As discussed earlier, I found that this was a good thing, as the users would be familiar with this type of interface. For DegreePal's chat menu, I used Gestalt's 'focal point' principle, by making it more prominent than the other screen items, to draw the user's attention to it first and encourage them to use it. I would further make use of this principle during the development stage utilising a contrasting colour.

Logos

With an initial idea of what the app would contain and look like, I moved onto the logo design process.

I used my research findings to create these sketches. As decided prior to this stage, I wanted to include the subject of university as the logo's main aesthetic. This was in an effort to attract the app's target audience, students. This univrsity-related item was a graduation cap. I wanted to do combine this aeshetic with a form of hidden symbolism as well, so I experimented with how I could do this.

Animation

The animation ideation process involved creating storyboards for an animated advert. However with guidance from my lecturer and class mates, I believed an instructional video would be more appropriate, as it would allow me to demonstrate more of DegreePal's features. This storyboard was still helpful later on during the development stage, however.

Within my sketches, I experimented with using kinetic typography to portray particular words and phrases. The Arctic Monkeys lyric video from my research greatly inspired some of the literal symbolism I brainstormed here.

Development

Logo

I started by using Adobe Illustrator to translate some of my sketches onto a digital format. This way of working also generated new ideas for logos.

At first, I thought this was a suitable idea. However based on feedback gained from my peers on my course and my lecturer, who said that the logo needed a some more flamboyance, I started sketching some more ideas from my research.

With the sketches finished, I wanted to pay more attention to the typography used within the logo.

My sketches and research provided me with some inspiration for how to create hidden symbolism within my logo. I wanted this hidden symbolism to be highlighted through the logo's typography as well. I removed the serifs from the letters 'd' and 'p' so that they were representative of the symbolism I was aiming to use for the logo.

After testing out some sketches, I found I had created a design I was very pleased with. I had successfully incorporated hidden symbolism with the dual 'd' and 'p' as the central subject of the logo, along with the university graduation cap the most prominent subject. The logo also turned out very modern looking and I believed it would work extremely well as an app icon. Satisfied with the design, I used my colour theory research to experiment with which colours worked the best. A successful logo would portray a friendly, modern and approachable aesthetic, among the other desired brand messages. I initially thought using oranges and yellows would work the best, but it came across as too warm and exciting for an app about mental health and organisation. I tried using blues to create a peaceful aesthetic, but it ended up appearing too cold and dull- almost sad. Pink was the next thing I tried, but pink is a colour which is heavily used to portray femininity, which was a problem as my target audience was students of all genders. Green was the best colour, as it balanced the warmness of yellows/oranges with the peacefulness of blue. I believed the brighter greens to be too exciting and 'summery', so I darkened the colour. This resulted in a green that has natural and peaceful connotations, with an additional academic vibe.

Logo Prototyping

Once satisfied with the progress I made with the app's logo, I moved on to prototyping. I did this by creating mockups to see what the logo would look like in its desired environment. Whilst this was helpful, I wasn't able to get a full idea of the logo's aptness until the UI design was finished so I could pair the two together.

I am happy with how the logo turned out, as it is apparent that it's effective in a range of environments. The symbol and font are both noticeable at a distance and the contrast between the green and white attracts attention. It also works as a black and white format, so printing costs can be saved when preparing documents for print without sacrificing the quality or legibility of the logo.

UI/UX

Following the same process as during the logo development process, I used Adobe Illustrator and my UI sketches to create all the screens for the app.

These are examples of landing screens I designed before I updated the logo. I wanted the UI design process with the landing screen so I could set the style for the remainder of the app. In these screen shots I was experimenting with the use of different colours and illustrations to appeal to my target audience.

Next, I acquired Apple's iPhone X User guidelines. I chose to use the iPhone X as the model for my app design as it was currently the most up-to-date iPhone and I own an iPhone, so am familiar with its design principles. This Adobe XD document helped me check that my designs were contained within the screen's borders and that the header and footer elements were positioned correctly.

After finishing the logo, I updated the landing page designs. Here, I was experimenting with the use of gradients and a colour scheme to use for buttons and text fields. I used a contrasting blue-grey for the submit button to draw the user's attention to it.

To better complement the logo, I changed the submit button to green. I also started designing the next screens using my sketches. Whilst choosing colours for the dashboard, I used three different colours that complemented each other well and promoted positive emotionss. These three colours had to be easily distinguished from each other, as they represented each of the movable tabs on the home screen. For the content on each tab, I used Gestalt's figure-ground principle in combination with the common region principle to group each entry together. I did this by using darker versions of each colour to create contrast and create a foreground and background. I also used a lighter pale green to create a background behind the group of tabs.

For the chat menu, I tried to keep the theme as much in-line with the dashboard's theme to ensure continuity of the user's experience. For important buttons, such as the 'Find a new chat' button, I used contrasting colours and scale to make the element stand out. For the chat subject selection screen, I also added drop shadows to give the buttons a 3D aesthetic, a form of skeuomorphism to tell the user subconsciously that these are buttons.

The last part of the initial illustrator app design process was creating the loading screen, the chat interface and the meditations section. For the loading screen, I utilised all of the main colours used within the app. This worked well because when confronted with this screen, the user would have already visited the dashboard and been introduced to these colours there. I wanted these colours to signify the 'organised' element of the app. I chose to adopt the traditional interface for the chatting screen, as there wasn't much room for differentiation here, as I wanted it to be familiar to users.

Once I was satisfied with the app's visuals, I presented them to my house mates (students). They said that the app looked clearly structured and like an app that they wanted to use. I also presented these designs to my university lecturer who complemented them, but reminded me of the importance of making sure all screen objects are aligned correctly. I adjusted certain areas of the design, such as on either side of the movable tabs, and then proceeded to the next stage.

Outcome

To make the text on the dashboard more legible, I changed the colours of the bounding boxes from darker to lighter ones. I also changed the font colour from white to black. This created a higher level of contrast, making the text easier to read. This also made the interface in general look a lot lighter and friendlier. For the 'Add to To-do List' screen, I swapped the text fields and arrows I designed myself for the text fields from Apple's UI kit. I did this because the Apple text fields look a lot cleaner and iPhone users would be more familiar with these types of fields and their function.

I also added the 'Select Colour' menu, once happy with the 'Add to To-do' list's overhaul. To ensure that the colours on this menu didn't clash with the app's colour scheme, I used versions of the colours that were almost pastel-like in appearance. This resulted in a menu which complemented the res tof the app. This was also important because these colours would also be displayed on the dashboard when selected to be a colour label for a task. Additionally, I added the Note Transcriber's interface. To ensure continuity, I designed this to be similar to the Meditation player. For extra guidance for the user, I added text below the record icon to explain how the transcriber works.

In these screenshots, I was demonstrating how the UI adapts when entres are added to the dashboard. When entries are truncated, the boxes will shrink and the text will be replaced with '+1 More task(s).' This ensures that no information is hidden from their awareness and that their university life is as organised as possible.

UI Prototyping

This stage involved importing my Illustrator screens into Adobe XD as SVG files. I did this because some elements were not scaling properly as I was integrating the designs between the two programs. Once all of the screens were imported into XD, I imported this XD file into a program called Protopie.

Protopie provided me with the ability to bring the app designs to life by adding animations and creating transitions from screen to screen. This was a lengthy process, as this involved creating interactions for most of the app's buttons. Despite this, Protopie was a very useful tool, as it provided for a much larger degree of prototyping than Adobe XD.

Working Prototype

Click here to try out the working prototype.

Instructional Video

With the prototype of the app finished, I started work on DegreePal's instructional video. I started this by writing a script explaining the current problems students face at universities and the ways DegreePal addresses them.

Next, I recorded my girlfriend reading through this script. I wanted a to use a female voice for this because I believed it to be easier to understand and friendly, which is important when creating instructional videos. These two factors would also complement the app's desired brand image. Additionally, my girlfriend had also recently graduated from university, so she more or less fit the app's target audience. With the audio recorded in separate takes for each paragraph, I needed to piece it all together.

I used Adobe Audition to join all of the best takes together. In areas where the narrator was speaking too fast, I created gaps in the audio track.

Using the Protopie app on my phone and a mobile screen recorder, I recorded myself browsing through the app making certain actions, according to what was being discussed in the audio track. With the instructional's main content completed, I moved onto the next stage, which was creating an animation for the video's introduction.

To create this, I used my sketches on kinetic typography to create text animations to accompany the narrator audio. I used Adobe After Effects for this. I also used what I had learned from the Arctic monkeys video and the After Effects tutorial to create dynamic movements between the different words and phrases.

I also used a free iPhone X 3D render I found online to prototype the app within the instructional video. I was pleased with how this turned out, as it created a modern aesthetic for the video, which was one of my goals. Once this part was completed, all that was left to do was combine it with the rest of the clips. I did this using Adobe Premiere Pro.

Outcome

Please find below the final DegreePal instructional video!