Week 6 – Design

Week 6 Tasks

Using prototyping software or HTML/CSS/JS, develop a prototype app or website for a fictitious company in the sector you have been focussing on recently: communications, finance or health. Your prototype could be a landing page, a configurator, a contextual navigation system or any one of the other UI formats you have encountered within the current project. It can be low fidelity or high fidelity.

Your prototype should demonstrate your grasp of at least 3 of the major topics covered in the project.

You have at least a day and a half to come up with a working prototype which you will present to your tutor and class on the afternoon of Friday the 2nd at 3pm.

You should write a reflective journal post about the process and outcome, also noting any feedback received during the presentation of your idea.Try to finish this write-up by Tuesday the 6th of November

————————————————————————————————————-

MTech, a self-created name and a potential business that sells healthcare and medical based devices to help doctors with patients. Due to my sector being healthcare I wanted to do something different rather than design for a hospital, or a clinic. That is quite generic so I thought a medical startup that sells devices would be a great path to go through.

The image above is my first idea and exploration on how I wanted to make the landing page look. I was thinking of the simplistic and illustrative approach because I really was fond of it and it looked very visually pleasing. The vector is from http://www.undraw.co, which is a website that offers you to download and utilize illustrations for free commercially and privately because they have an MIT License.

Illustration-system throughout the website would be based on doctors and patients. Hence the white lab coats and the heartbeat. These signify professionalism and reliability. The plant in the illustration adds more a sense of friendliness and gives off a positive atmosphere.

The font that has been used in the design is Roboto. Which is a Sans-Serif font (Proxima Nova), In the cases of a healthcare sector business it is important to make sure that your text and content is readable, informative, and reasonable. This is why I used a Sans-Serif font and I intended to do so throughout all my explorations.

The colors that I have chosen to use are dark purples and the main reason for that is to deliver a sense of premium. The purple color is often perceived as luxurious and steady, and so the potential clients and entrepreneurs who would buy healthcare based devices, they need to feel that they can rely on MTech. This can be achieved significantly just by making these decisions alone. The imagery and colors play a massive role in convincing customers whether they purchase your products or not.

Visual Hierarchy is being applied effectively here through sizing and coloring. If you have not noticed, the primary colors of this design are Purple, White, and a Light Purple. The Logo and the header of my mission statement are purple, while the content text is white. As well, the Logo, Header, and Illustration are the three dominant visuals in the design. I wanted my viewers to see these elements first because they convey the purpose of the website more than any other element.

The Learn More button is the Call To Action. If my viewers are willing to find out more about MTech, then they will proceed by clicking that button and from there the discovery begins. It’s important to provide a little information about MTech, but also not everything at the same time to create a sense of curiousness and the want of wanting to find out more. This way you are encouraging your viewers to engage the website.

The stars and shapes in the background have been applied for visual purposes, to make the website look appealing and friendly. I was debating with myself if I should have them or not, but I concluded that it’s a great touch and it strengthens the business.

I concluded with canceling this design because I did not feel it was corporate enough, i didn’t feel it will be successful as I wanted it to be. From the header alone I could straight tell if it was worth to continue on this or not.

The second design, another exploration that I did for Mtech/MHealth. However this time I changed the colors to blue and removed the illustrative approach to making it look more corporate.  I used waves here at the bottom of the header for a more visually appealing approach. We all know that waves are smooth and have positive curves to them in the design world.

So I thought in order to convey a sense of peace, reliability, and smoothness for the customers why not put a wave that looks clean and creamy. I used a gradient background to match with the different color levels of the blues in the wave. This landing page looks allot simpler and uses fewer elements around which gives it a cleaner look.

But at the end was this what I actually wanted, is this how I wanted to present MTech/Health. I proceeded with scrapping this one as well. It simply wasn’t powerful and engaging enough. It looked a lot less luxurious and premium compared to my first iteration. I started wondering, how can I give my design a corporate, professional, and a luxurious look?

I resorted to Behance for inspiration to get my creative juices flowing and here is what I ended up producing:

MTech Iteration 3:

During my browsing for inspiration on Behance, I realized that there were a lot of the designs posted there was grid-based. They were also more blocky looking due to content distribution and layout through the website. The designs were modern, professional, and pleasing to look at.

So I thought I could apply grid-based design and the whole idea of making content look blocky to my design. I then thought I can utilize three primary colors to achieve this goal. Purple, light/gray-green, and white.

Purple = Luxury & Premium.

White = Clean & Reliable works in all contexts.

Light Green/Gray = Nature, naturalism, peaceful, and calm.

The color combination delivered what I wanted and conveyed the messages that I wanted to convey my viewers.

In the header, the title “The Technology” is by far the most dominant visual element and text in that section of the website. This was intentional because I wanted it to stress and emphasize the importance of technology in healthcare since MTech is based on medical devices. This would help boost sales. Then the sub-heading “The Technology you provide patients matters” is to encourage the clients to have empathy for the patients that come to their institution. To encourage them to buy the best of the best technology from Mtech.

The call to action “Learn More”, upon clicking it, the screen will scroll down, taking viewers to the about section of the website. Meanwhile, the arrow-down icon would be hovering below it, to say to users “You should scroll down, there’s a lot you’d like to know”.

In the about section, I simply wanted to provide a pleasing reading experience for the users. “About Mtech” is the visually dominating element, if you have not noticed, throughout the whole website, I am using a Z-scan information reading pattern:

Research has proven the following about Z-scan patterns:

  • Hierarchy, visual weights are being applied in terms of size, color, and element dominance.
  • Branding, the companies design guide, color schemes, and of course the logo.
  • A call-to-action, the very important of any website at the header area that the business’s main objective is to obtain clicks on.
  • Structure, elements are neatly laid out and presented to create a  sense of ease and invitation for the viewer.

Further on, proceeding in regards to the about section, I then used a block/square to put the text of what Mtech is about to create contrast. To make the text more readable and comforting to look at for the users. All these elements would be animated on scroll if I was to code the website.

The about header would appear first and then the description. You can control the order of content through interaction and animation of UI. That is powerful because you can determine and control what viewers read and see first. It would also make the website look more complete and professional.

Moving on to the products section, I embedded the logo as a background to stress on the fact that these products are made by MTech and to give it a more visually pleasing look. I then listed 5 bullet points with relevant icons that emphasize on how good the products are to deliver a sense of reliability, stress, and encouragement to potential buyers, to make them feel safe in regards to the products being well built.

Then on the right side, some of the products being offered are on display. They would be animated nicely and moving around like particles. Upon hovering, you’d receive more information as a Message a box on what the product is with a call to action of “Learn More”.  I chose to do it this way to experiment with interaction and how I can experiment with how to display products on an interface differently, a unique way that works, or to be proven that works.

Another approach could have just been the traditional way of displaying products. That would be in squares and blocks, but it’s a ridiculously overused method. As a Designer, I believe it is my job to come up with creative and different ways of interaction and design.

Next, comes up the reviews section. Simply two boxes that display the most recent reviews and then an arrow on the right that you can click on to view more reviews. There is also a faded background to keep up with the previous sections with backgrounds for consistency and visually appealing purposes.

Afterward, the footer section arrives. With a few links and an option to subscribe to MHealth. I placed the subscription option to allow viewers and potential clients to connect and stay in touch for future updates and announcements. While the links are links that I felt are important to be placed in the footer, instead of putting the contents of the website. The navigation bar would be a sticky, and so as you scroll, it would come down with you as well.

Feedback

After presenting my design to my colleagues and my tutor. I have received interesting feedback, and it was positive and helpful.

Jamie has given me feedback, as much as I remember it was something along the lines of saying that the header has half of a Z-Pattern or almost because there are technically 2 CTA buttons. The Learn More button and the arrow that is pointing to the right to allow users to explore more information.

I then thought, if I removed the learn more button to the position of the arrow, that would be a complete Z-Pattern. But it would visually look strange and odd. Although I am sure that with a little experimentation, I would be able to find the best result that contents the visual standards and the Z-Pattern.

Another question that I remember being asked, why did you make the logo this way?

Circles are perfect shapes, they have no angles or sides. It’s a complete 360-degree shape. Therefore because it’ a perfect shape, I wanted to show that MHealth is a perfect business. You can rely on MHealth to deliver these products and affect your business significantly.

Overall

This was a task that was run through a couple of days, and I felt challenged because I had to produce something that I felt was quality work within a short period of time. I also wanted to code the design with animations and make it look really good, but again, the time it was due for was short.

I personally think what I produced was great and it works. But it still needs more revisions and editing to finalize it. However, the overall result is positive.