EllenMcElroyixd

Second year Interaction Design student.

[ellenmcelroyixd]

Module Reflections

I really enjoyed working on this module. I loved the fact that we all worked together as a team at the start to do our group research. We worked in groups for the first 4/5 weeks of this module, where we shared our research and came up with some interesting ideas. The module was based on healthcare, however, my group narrowed this down to focus on the medical emergency services. When we dispersed, everyone in our team took the same topic and went completely different paths with it.

I really liked doing all the research, especially chatting to people I knew that worked in ambulances, they all gave me really helpful information that they knew from first-hand experiences.

I am really happy with how my app turned out and I learnt a lot about how to prototype on Figma and about the medical emergency services in the process. My app definitely reflects the group work we did at the start and the research I did was put to good use. I think it would help a lot of people if I were to take it further in the future.

[ellenmcelroyixd]

Design Decisions - Mantra, Colour Scheme and Visual Grammar

Choosing the Mantra

I start off most design decisions by writing down all my initial ideas. This allows me to lay them all out in front of me and clear my head to think of new ideas. I thought of a number of different mantras but in the end went for one that describes my app completely by only using 6 words.

E.R.T - Your Number 1 Rapid Response App

Choosing the Colour Scheme

I used a website called http://colormind.io/ to help me choose my colour scheme. I had already decided on my brand colours and a blue colour so I entered the HEX codes in for these and used colormind's generator to choose the middle two colours. In the end I changed the yellow to a light orange colour to act as a more neutral colour against the other bright colours.

Visual Grammar

[ellenmcelroyixd]

The Prototype

I designed everything initially using Sketch and then imported the Sketch file into Figma to prototype it properly. I had used both Sketch and Figma before so I already had a general idea of how to use them from before. I watched a few YouTube videos about prototyping on Figma just to refresh my memory.

I had already prototyped my lo-fi mockups to use for my user testing but I made a new file to prototype the final screens. This made more sense as I didn't want the screens to link to the lo-fi mockups at any stage.

Below is my final prototype -

I really enjoyed prototyping this app and experimenting more with Figma. I noticed as I went through it a few times that there was always some small changes that had to be made but Figma was very easy to use when implementing these changes. This allowed me to focus on getting the app fully functional for the user. I really like how it turned out in the end and I believe I prototyped it to be almost exactly how I envisioned it working as a real-time application.

3 things I learnt when using Figma was how to design micro-interactions, how to use overlays and how to create a sticky nav. This will definitely benefit me in the future and I am proud at how these turned out.

Prototype Link

[ellenmcelroyixd]

Micro-Interactions

I included micro-interactions on the main buttons to signal to the user that it has been pressed.

[ellenmcelroyixd]

Micro-Interactions

A micro-interaction in an app is a small bit of feedback from the result of an action. I used overlays on Figma to design some micro-interactions, which I just recently discovered. I think micro-interactions are a nice and simple way to show the user that they've pressed a button or accomplished something correctly.

[ellenmcelroyixd]

Experimenting with Animated GIFS on Procreate

I had never tried animation before but I attempted it this semester for IXD304 so I thought why not try it for IXD303, also?

I watched a few videos on TikTok and YouTube on how to animate using Procreate and it wasn't actually as difficult as I expected it to be. It was quite easy to get a grips of. Although, the one downside of using Procreate is that it is difficult to use when working with shapes as it's not a vector based design tool.

I wanted to include a timer animation in my app for the 'Call an Ambulance' page. I didn't do it fully mathematically correct as nobody wants to sit on one app screen and watch a timer go down from 6 minutes. However, I did it quick just to get an idea of what an actual, real-time, timer would look like.

I am happy with how they turned out and I will definitely be using animation in my future projects. It's always fun trying out new things even if they're not perfect at the start.

[ellenmcelroyixd]

User Personas

I created some user personas for my app to get a better idea of who my target audience will be. Personas are made-up users that you create to help understand the goals, motivations, and behaviours of the people who will use the interface. The persona represents behavior patterns, helping the designer understand the flow of the user’s day and how the interface will fit into it.

Personas prevent grounding, encouraging story telling, and enhance role playing. The method helps teams make a smooth transition between requirements and design, resulting with much cleaner designs.

This article on UX Planet was a very interesting read before I designed my user personas.

[ellenmcelroyixd]

User Testing

I got a friend to test out my narrative site before I finalised it. User testing is a quick and easy way to spot simple mistakes in your designs. I observed him as he went through my site on a Macbook screen (1424px). A few things I observed -

User tried to click the 'On the Silver Screen' button in nav and it didn't work - this button needs fixed.

When user clicked on the movie poster image, the text came up on top of eachother - to fix this I will add a second click option for the text to disappear when you click it before you click the next movie.

When the screen was expanded, the second section rose above the first section, making the intro text unreadable - I need to work on my positioning and image heights throughout the site.

The lights didn't flicker in the 221 Baker Street section- I need to make sure the file extension is correct and re-upload this GIF.

This information was very important to notice as they were just silly mistakes throughout. They are all quick fixes which I will implement now.

[ellenmcelroyixd]

Final Links

Sherlock Holmes Narrative Website

Sherlock Holmes Prototype

Research

[ellenmcelroyixd]

Final Website - Reflections and Improvements

Sherlock Holmes Narrative Site

I decided to build this narrative website using Webflow as I had used it before to build my portfolio site. This meant that I had the basic knowledge of how to begin with the build of the Narrative site. I'll admit I was nervous at first because the narrative sites I had researched looked incredibly difficult to build. However, it was a challenge and I am proud that I attempted such a difficult project. A challenge like this also allowed me to become more familiar with Webflow and discover lots of new techniques that I can use in the future.

When I started with the site I had to think a lot about the flow and navigation as this module is all about storytelling, therefore, it is important to keep the navigation throughout the site similar. Initially I had thought of the idea of having a detectives board and linking different pages to this, however, I later scrapped this idea and stuck to a simple nav bar navigation and one-page site instead as this is a lot simpler for the user to navigate and it really allows the user to be involved in the storytelling aspect. I also thought about including different types of interactions on the site such as hover and clickable interactions. I discarded of this idea and kept all the interactions as clickable interactions to keep the site similar the whole way through.

I went for a vintage/Art Deco theme and looked at this website for inspiration. I loved the challenge of this project, however I definitely overcomplicated things for myself as I spent a lot of time trying to think of original ways of displaying the content. However, Webflow was very difficult to use when trying to work with the different breakpoints. I restarted the project 3 times trying to fix the structure of it all but nothing was working quite as well as I expected it to.

I had also planned on having lots of cool interactions in the site but in the end decided against this and it became quite overloaded with media and distracted the user away from the main content.

Two main things I liked about this project was the fact that I overcame some of my issues with messed up structure (using grids and div blocks) and learnt a bit more about how to use Webflow. I also learnt how to make an Animated GIF which is always useful to know for the future. In future, I will definitely think of simpler ideas and work on how to display this properly rather than confusing myself with Webflow. I think less is more sometimes. However, I am proud that I attempted my difficult ideas and I am happy with how it turned out. I am now more confident with using Webflow.

I also really like how we were given the content of the site, it was up to us on how we chose to present it. At first, I thought this was difficult as I didn't know much about Sherlock Holmes but after a bit of research, it became quite enjoyable and exciting.

After I built the site, I used 'Screenfly' to check that my website was working across a range of different breakpoints. I wanted to have each section image spread out across the full width of the screen, however, I couldn't get it working exactly how I wanted as this would mess up the content of the site which is the most important bit. After a lot of failed attempts, to overcome this problem, I decided to create div blocks that held the content within them in the middle of the screen. This isn't how I'd prefer it to look but it functions a lot better than my preference.

[ellenmcelroyixd]

Sherlock Holmes - Visual Grammar

[ellenmcelroyixd]

Introduction to Animation on Procreate

I really like the idea of using a GIF or a subtle animation in a website. From the research I had done on other narrative websites, a lot of them used simple animations which really captured my attention. One of the main advantages of using a GIF in your website is the size. A GIF is relatively small in size compared to other file formats which means it won't compromise the sites loading times.

Another advantage of using a GIF is that the background can be transparent which works well when importing it onto a background image on the site. I think animated GIF's are a great way of entertaining the viewer, it's much more interesting than a flat image.

I had never tried much animation before. Trying new things in design can often be daunting as I don't like to waist too much time on one small thing. However, I found a simple tutorial on YouTube which showed me how to animate easily using Procreate which I am somewhat familiar with already.

I chose to animate flickering lights in my '221 Baker Street' section. It was a lot easier to animate than I had thought, it was just a matter of changing the lights in each frame slightly, looping the images and experimenting with the timing of frames per second.

Here is what I came up with -

From this

To this

I am really happy with how it turned out, I didn't take too long and I didn't think it would be so easy to do. I will definitely include GIF's in my future projects.

l also designed this magnifying glass GIF to use in my footer based on the Sherlock Holmes theme. It says 'Thank You' as you reach the end of my narrative website.

[ellenmcelroyixd]

IXD304/Class Feedback on Webiste

This week we had a class feedback session on our websites. Unfortunately whenever Kyle tried opening my website on his big monitor, a lot of the images and text had skewed and messed up the layout. This was a struggle for me as I am using Webflow to build my site and everything seemed to be working well on my own laptop screen resolution - I need to spend more time adjusting the padding and spacing to fix the build of the site and make it responsive.

For the 'Heroes & Villains' section of my site, Kyle had suggested that I include the names of the characters underneath the images. Initially, the idea was that the name of the character and a bit of text about them would appear once you click on their image, however, Kyle said that it's sometimes best just to simplify things as it can be too busy.

Another suggestion on this section was to have the criss-cross embellishments and the 'About Me' title, inside 3 columns to keep them aligned nicely as they didn't display properly on Kyles monitor.

For the '221 Baker Street' section, Kyle suggested that I change all three text boxes to just one single text box to avoid the user reading from all different sides of the screen as it can be confusing. I think this makes much more sense and I intend to move all the text to be on the right hand side of the door.

For the 'On the Silver Screen' section, I attempted to create a hover animation using a grid to display the text. The idea I had was that when you hovered over each movie poster image, the text about the movie would appear above and below the image. However, when displayed on Kyles screen it didn't work at all so I scrapped this idea and will now try and use link blocks to link the user to IMDB for the information about the movie. Kyle had previously showed me a Webflow University video about 'z-index' that will help with this.

Kyle suggested for this section that I should consider clicking on the movie poster image and the text appearing below it. He said it's important to keep interactions similar throughout the website as this keeps it consistent and easy to navigate for the user. I will need to work on this section a bit more before the final hand-in next week.

In my footer, I didn't know if it was possible to change the colours of my hyperlinks as Webflow automatically used a standard hyperlink design which didn't work for my site as the standard purple colour blended into the background. Kyle kindly sent me the Webflow University tutorial for this which I will change before next week.

Lastly, the class had said that they loved the colour scheme and the vintage theme I was going for. And also really liked the typography I had chosen.

[ellenmcelroyixd]

IXD303/Class Feedback on Presentation

I presented this quick 4 slide presentation to the class on my concept for the medical app brief. The app is called E.R.T which stands for Emergency Response Tool. The aim of the app is to limit the grey ares between ambulance control, ambulance staff and administration staff in the hospital by storing all the patient details they need in the one app to reduce hospital processing times and therefore, freeing up more paramedics for patients to be seen to faster.

We used 'Miro' to write out our feedback for each project. Here is what the class said about mine -

Paul also mentioned about fixing up my brand a bit which I wrote about in a previous blog post. I appreciate all the feedback that I received and will implement these changes before the final hand-in.

[ellenmcelroyixd]

IXD303 - Branding & Feedback on Branding

For the branding of my app, I started by researching existing medical apps and brands. I found out that a lot of the existing medical apps out there include mainly hearts, ticks, pills or the ECG machine lines so I tried to incorporate this in my own vision based on the name I had chosen which is E.R.T which stands for Emergency Response Tool.

I always start by sketching up my ideas -

I chose to take the third idea digital, using Sketch. The idea is that the name of my app is made out of the negative space created with the bordering shape. The 'T' at the end of 'E.R.T' is supposed to look like a cross and disperse into the background for an added 3D element. However, after recreating my ideas in Sketch, I soon realised that this 'T' idea looked nothing like a medical cross and more so represented a holy cross instead. So, I scrapped this idea and rotated the cross to the side and now it looks far more like a medical cross and a little less like a 'T' but I don't mind this.

This is what I settled on for the critique -

I received some interesting feedback on the idea from Paul and I couldn't agree more. He said the font looks a lot like 'Comic Sans'. I went straight back to Sketch and changed my brand completely.

Here is what I came up with for the final brand -

When condensed (such as on a splash screen) this is what it should look like -

[ellenmcelroyixd]

Competitor Analysis

I did a lot of research on apps that had a similar idea as my own. There wasn't many that I could find. They were all very outdated (12+ years old) and also all mainly based in America which is no good to us here in the UK. Here is what I found:

ICE Medical Standard App

The basis of this app is that it puts your vital health info and emergency medical contacts on your lock screen when you're in an emergency, so first responders can see it all immediately. They also introduced an ICE Standard Personal card incase you don't have your phone on you when in a medical emergency.

http://www.icestandardtech.com/wp-content/uploads/2017/01/3-Incredible-Phone-Apps-That-Could-Save-Your-Life.mp4?_=1

The start of this video linked above shows the screens in more detail. It's quite old so it's hard to find good quality images of it.

“When treating emergencies time is of the essence and the ICE Standard ER 911 App is a great way to get your most important information to those treating you, when you need it most.” – Stanford Healthcare Medical L-VAD Program.

I like the concept of this app and it was very popular when it was first released, with over 100 Million Users in Untied States. However, it was released on December 24, 2010 which makes it extremely outdated. You can tell that the UI and UX of the app needs a whole revamp. I also dislike the idea of having images as backgrounds, I think it makes the interface look far too busy and it's distracting from the real purpose of the app.

Overall, it's a great concept and the app is generally simple to use but it just needs an update. It also gave me the idea of including patient's blood type in my app so that's an added bonus.

Siren GPS App

SirenGPS puts all your emergency services at the touch of one big red button. If your community subscribes to Siren 911, nearby first responders will receive your location and profile (emergency contacts, medical history, allergies and current medications, which you put into the app), increasing your chances of being rescued quicker.

Paul Rauner, SirenGPS founder, started the company because he identified gaps in existing community emergency response systems that today's advanced digital technologies can solve.

"The goal of what we're doing is to take advantage of today's smartphone technology to get help there faster". "That will save lives." - Paul Rauner.

Again, I like the concept of this app but it's extremely outdated and based in America again too. It was first released in 2013 and definitely could do with a revamp. However, the big red buttons are very clear in case of an emergency and I like how the red telephone icon is accessible from every screen for better accessibility - I might try and incorporate that idea into my own app.

The patient's profile page is very simple with not much use of colour. However, it's clear and easy to update when needed.

My ID App

MyID allows you to store your entire medical profile such as emergency contacts, vital conditions, medical images, labs, allergies, medications, blood type etc. My ID app is free when you purchase a 'My ID' product such as a bracelet or an ID tag, however, they range from $20 to $75.

This app is much more updated and modern than the other two that I found. It's easy to navigate and update your personal information. A few things I didn't like about this app is that a lot of the sections in the app require you to upgrade to a pro version which is $1.99 a year on top of the heavy prices of the medical tags and bracelets which go as high as $75.

Apart from the high prices, I like the overall functionality and usability of the app. The concept is great and it has a lot of useful features similar to my own app idea.

[ellenmcelroyixd]

Wireframes and Low-Fi Mockups

Once I had sketched up all my ideas, I did some digital wireframes using Sketch to further visualise the project and get a sense of layout before adding any smaller details.

After this, I worked on some Low-Fi mockups that focussed mostly on getting the typography, structure and icons right. I used these low-fi mockups to present the idea in a usability test to identify any UX problems with the app early on in the design process. With the results from the usability tests and the feedback I've received, this gives me a good direction to start working on the final build of the app.