App Redesign

User Research, UX/UI Design, Visual Design

Objectives:

Research and interview several users of a specific app

Brainstorm and create wireframes based on research findings

```
Create a final redesign for the app  
```

Problem and Research

This was an assignment from my program to redesign an online application and demonstrate a typical action that a user would make. For my redesign, I chose to use an application utilized by my school, SLATE. Specifically, the email function on SLATE.

I chose the email app because I felt it looked horrendous as well as needlessly confusing for a function to be used by students, some of which might not be proficient in site or app navigation, as I recalled some other student in my previous program complaining about navigating the function. Coupled with my own frustrations, I set out about redesigning the app as a way to see if I could not only make my experience with the function easier, but other's experiences as well. The action I chose was a user receiving an email, beginning to creating a response, saving it, and then coming back to and finishing it. Back when the assignment was due, I created a highly stylized, colourful, and simplified version of the application; recently, I wanted to create something tangibly better, so I revisited this assignment and began my new iteration.

First, I went back to the research I used for the original redesign. This involved interviewing students who have used SLATE during their academic careers, recording their responses, and making value charts and personas based on their responses. When I revisited this assignment, I streamlined this overall research and analyzed it further. It was then that I decided where I wanted to go with this redesign: I wanted to make it appear more ‘professional’ while keeping the core functions users would definitely need for the application.

Screen Shot 2018-01-15 at 4.24.16 PM.png

Screen Shot 2018-01-15 at 4.24.28 PM.png

App Wireframes

At this point, I went to create new sets of wireframes based on my desires. I looked up other email applications for inspiration, such as the Mac’s Mail app and Gmail. Unlike my previous wireframes I had made, I sized these wireframes up with a standard computer monitor size in mind rather than a mobile one. I utilized the same functions I had in the original wireframes, but with a whole new aesthetic approach similar to those email apps mentioned previously, while still maintaining some of the original choices I had made previously.

Hover over the wireframes in order to see the user journey they illustrate.

The user receives an email alert from a friend

The user goes to their inbox to find the new email

The user opens the email and begins a response

The user has to leave early and saves the email as a draft for later

The user goes to their drafts section and selects the email

Finally, the user finishes their response and sends it to their friend

Final Design and Thoughts

Once the wireframes were complete, I set about creating the final iteration of the application. For this I used Adobe XD, which I had never used before, and proved an interesting experience that I quickly warmed up to. I translated the wireframes over to the Adobe XD and began adding colour and content to them. In terms of colour, instead of the several shades of blue and orange (the Sheridan colours) utilized in the original redesign, I used one shade of blue with a few shades of grey, keeping Sheridan’s primary colour in mind while also continuing to emulate those earlier mentioned email applications. The content added were the standard for emails: content of emails, create email buttons, nav bars for functions, etc. Finally, it was complete.

As with the wireframes shown previously, hover over these mockups in order to see the user journey they illustrate.