Yanislava Velikova , 2015.
Professional Practice MINT
PART 1
05-07
PART 2
09-14
PART 2.1 - DISCOVER
16-20
PART 2.1 - DELVE
22-27
PART 2.1 - DEVELOP
30-38
The Brief
03
CONTENTS
THE BRIEF
This PDF gathers all of research and outcomes for my last project in second year at university for the module Professional Practice for Motion and Interactivity. We were given a brief that was divided into two parts. In part one we had to form a group of minimum 4 and a maximum of 5 people and produce a 5 minute long visual presentation that shows how our group imagines visual communication practice in 2065. In the next a few pages I will include a brief information about what my group did for this part of the project. However, I will mainly focus on the second part of brief
in which we had to produce an individual designed outcome which is going to highlight the key skills, knowledge and attributes I have to offer as a student and a future practitioner of visual communication to my future clients and employers. The ideas, research and development should all be captured in this PDF and also showing how, at key stages of this project, I have attempted to gather research, feedback and evaluation from professionals or people in the visual communication area I’m interested in.
/3
1 “
PART P. 5-7
Design is constantly changing to reflect the ever-changing technology around us. It tends to go through cycles of being simple, to being complex, to being simple again.
Idea and generated outcome
/4
Video
- Converdge,2013
For the first part of the project I was working in a group of three other people all with different skills – Maretha, Nick and Nathan. We had both motion and communication skills in our group which was very helpful seeing the future of design from all different angles. We also decided to go for something more interactive and we did a video which basically sums up our opinion about how design is going to look like in 2065. Our group also focused mainly on how in the future technology will play even bigger role in visual culture, and not only there but in medicine and transport as well. In the video we put together we have some interesting examples of futuristic interfaces and holograms of everyday gadgets. Surfaces like the kitchen countertop, your ordinary TV or the glass in the bathroom could be transformed from onedimensional utilities to sophisticated electronic devices. Smartphones will evolve and will not probably exist anymore as an actual object, but will be projected in the air or on your skin. In the next few pages of this presentation I will provide a brief storyboard of the video and a link button for watching it online.
/5
P. 9
2
PART
Choosing a visual communication area P. 10 Key people and companies in this area P. 11-14 Research into these people and companies
Choosing a visual communication area.
Interactive Design Why interactive design? The first thing I did for the second part of this project is to choose a visual communication area in industry that I’m mainly interested in and would like to work within in the future. I’m a person that likes constantly gaining new skills and experiment in every area. That’s why it was hard for me to choose just one as I’m very interested in web design and coding, but in motion and interactive projects as well. So, to strike a happy medium between all of them I decided to go with Interactive Design. It’s an area which almost combines bits from all of the other areas I’m interested in.
Skills to focus on in this project Interactive designers take business needs and product requirements and transform them into user-focused and intuitive web, mobile, and product experiences. They strategize with analysts, web and product managers, marketers, and other key stakeholders to create UI mockups, user flows, and functional specs so their designs maximize usability and performance. Ъ
Interactive designer should: • •
• •
Engage with the client,deliver insights about people and behaviour. Develop UX concepts, including the definition of customer needs, creating storyboards, prototypes or wireframes. Create great user experience. Present various stages of interface design to customers or team memebers.
/9
Researching in companies and key people into this area.
NB: I emailed most of these companies looking for feedback or advice. However, by the time I was designing this page, I didn’t have any replies yet.
/10
University of Manchester- Info Screens
Why do I like it? This app is a very interesting and creative way to show Manchester’s historical and cultural heritage to locals and tourists, The app is also easy to use and benefitial because you can explore the city in your own pace.
About the project
Magnetic North
Creative Spark
e3
Digital design company Strategies,ideas,problem solving
Branding, digital advertising.
ШШЕWebsites,online applications, design and branding
Moving Brands Independent, global creative company
Sennep Interactive design studio Websites,games,installations, mobile and apps.
This is a unique audio visual experience that allows you to explore the city and discover its defining moments in a totally new way. The app, which is layered with content from the city’s archives, gives you a ‘heads-up’ experience: plug in your headphones, pop your mobile device in your pocket and simply follow our audio directions without ever having to look down at a screen.
Manchester Walking Tours
Here I listed the companies I researched for this stage of the project. They are specialized in the area of interactive and digital design I’m interested into. In the next few pages of this PDF I will look into the projects of some of them that impressed me and gave me a better idea of what kind of work is being done in the area I chose. Clicking on the logos will take you to the websites of the companies.
Magnetic North. Looking for inspirations.
About the project mN created a collection of applications allowing students to locate free PCs, check meeting space availability and locate services within the building and also a set of animations that welcome students to the building. This project won an award for enahncing the experience of students on campus. Why do I like it? This project is a great example of what we mentioned in our presentation for the first part of this project - a lot surfaces transform into touchscreen enhancing people’s livesin this case the students.
/11
About the project
ЦреЦCreative Spark. Looking for inspirations.
About the project Digital strategy for the Grand Départ 2014 providing essential race data to fans from all over the world as well as interactive map. The website wins a prestigious Big Chip 2014 Award.
Welcome to Yorkshire
Moving Brands. Looking for inspirations.
World’s largest art gallery in your hands.
Hillary Clinton campaign
DeviantArt App
Click the image to see a video
About the project We Buy Any Car was set up in 2006 in order to help customers sell their cars in a safe, fast, fair way whatever the make, model, or condition.
Both the mobile and the web version look with very simple user experience. The design makes the brand look trustworthy and straightforward.
/12
We buy any car
Why do I like it?
About the project Create a hypothetical new brand for Hillary Clinton. Why do I like it?
Why do I like it? The information is clearly displayed and customers can easily navigate through the website. Cutting edge design, great functionality culminating in a seamless end user experience.
As the company said in their website they had just one week to finish this project and it’s really impressive what they did for such a short amount of time. For me their design sends really clear message the audience and also looks modern because of the colour pallete used which could make it more appealing to younger audience.
Click the image to see a video Why do I like it? High quality images and modern interface.
/13
СеннеSennep. Looking for inspirations.
About the project
TEN is a brain-tickling board game of tictactical-toe.
Where I went right – A video interactive showcasing four inspirational world-famous pioneers. Created for The Guardian and sponsored by Rolex Awards for Enterprise.
Why do I like it?
Why do I like it?
With really simple and minimalistic design this game is a contemporary take on an old classic.
Really interesting interactive the heart of which are the videos. It presents a serious topic in a much more engaging way and the full or just some parts of it are avaiable to be shared over the social network in a very easy way,which I think is a key element to the campaign.
Video
P. 16 Where I went wrong
About the project
/14
2
DISCOVER
TEN
Choosing the problem P. 18 Understanding the audience P. 20 Determine the client
.1
Choosing the problem.
The phase discover helps me to choose an appropriate project and define a problem that I want to work on for the Professional Practice brief. In this part I will also determine my audience and my client. For this project I decided to concentrate on a social problem that affects my daily life as well - the unreliable university campus bus. After researching the valuable skills and work of some of the companies I would love to collaborate or be part of in the future I decided to show how I can engage with the customers and deliver them a good user experience with solving an existing recurring issue.
The problem that I would try to solve is that the bus often runs out of its schedule and there are long delays between its arrivals. The Campus Link Service is a valuable addition to students’ everyday life assisting them to commute comfortably,safe and free between their campus and accommodation as well as shops, A lot of students use the service everyday and transport delays generally are the main reason why students are late for their classes.
/16
/17
ТаUnderstanding the audience. For better understanding of the problem and the preferences of my audience I observed the people who get in the bus and they are mainly students which are young adults, but from time to time there were also families with children who probably live in one of the accomodations of University of Salford or rarely there were some more mature students. I also conducted my own survey and distributed it around the social media and university groups to understand what do students think of the problem with the campus bus. The results of this survey I will illustate below. I got answers from 30 different students in different age groups
How often do you use the bus? Everyday
50%
How often the bus is late while you are waiting?
A few times a week
35%
Everytime Rarely
Don’t use it
10%
5%
100%
What is the longest time you have been waiting?
/18
Less than 20 minutes
10%
1 hour or more
40%
20-45miutes
50%
The longest time somebody waited for the University bus was 1 hour and 45 minutes which on short 30 minutes route like this seems unthincably long.
/19
Determine the client.
After researching who the provider of the Campus Link Bus is I found out that it is Stagecoach. The company is part of the Stagecoach Group and is one of the largest bus operators in the UK, operating express and local bus services across the country. Their services play an important role in helping people in rural and urban areas access work, education, health, shopping and leisure, with two million passengers travelling on our bus services every day. They connect communities in over 100 towns and cities in the UK, running a fleet of around 8,100 buses and coaches that is one of the largest in the country.
2
DELVE P. 22-27 Researching on existing projects
/20
.2
Product : Where’s the bus? Research on existing projects.
Research on existing projects.
Description :
When you ride a bus, you use “Where’s the bus?” automatically broadcast the location of your bus to other travellers nearby. Those travellers, in turn, use the app to watch your bus, and the buses of other users, as they travel around the streets in your town. The more users riding buses with “Where’s the bus” on your phone, the more buses can be seen on the map, and the more people it helps. The application uses the GPS inside your phone, in real tme, to identify where your bus is. Others waiting for a bus will see these bus locations on a map.
In the stage delve I will explore some already excisting projects related to transport and bus issues. Also I will try to find people that have done some of them so I can see their approach to problems like this.
My opinion: Even though the company has very
cheap and horrible looking website I think that the application itself it’s could be really helpful. The idea of GPS attached to the bus broadcasting information to users phones could be easily applied to the problem I am trying to solve. It’s also convenient because my targeted audience is mainly young adults and all of them are constantly using smartphones and the data could be accessible at any time.
It is also important for the Delve stage to try to understand the customers and see the problem from their point of view. Luckily I’m one of the users of the University bus so I can easily put myself into other people’s shoes and determine the experience from a first hand.
Video
/22
/23
Research on existing projects.
Research on existing projects. Product : London electronic timetables Description : Most of the bus stops in
London have an electronic timetable that shows in what time you bus will arrive, The time can change due to traffic or other delays. The information collected from the GPS trackers is transmitted back to a control centre which then works out how long each bus will take to reach each stop on its route.
Product : Catch the bus Description : “Catch The Bus” makes use of GPS
trackers on each bus to give you an accurate prediction for when the next bus will arrive at your stop. Its simple and intuitive interface will get you the information you need fast.
My opinion: This app is really simple to use,
something that I want to achieve in my own outcome for this project. It is similar to the first one I showed but here instead of having a map we have a simple timetable that updates when the information is received.
My opinion: I’ve used this service on my
own and I definitely find it useful. However, I don’t think that it could be a possible option for my project because it looks like very expensive installation, even though I like the idea on the second photo with the small timetable which looks more convenient and achievable.
/24
/25
Research on existing projects.
Shalin Amin. The designer of Uber.
Who is Shalin Amin?
Shalin Amin is lead experience designer at Uber. He’s curious about how to connect audiences with technology to drive business growth through research, product definition, user experience and visual design.He has worked within variety of verticals from e-commerce and publishing to non profits and education, creating award winning consumer experiences and top grossing applications.
Product : Uber Description : Uber connects riders with drivers
using their phone’s GPS capabilities, letting both parties know one another’s location and removing the question of when the ride will actually arrive. In addition, the tech company also processes all payments involved, charging the passenger’s credit card.
What makes Uber that successful?
Uber experince is on a whole new level and you can tell that just by the app. It focuses on every part of the journey from when you odrer the taxi to the end of the journey. Amin says that you will probably fail as a designer if you can’t navigate your user through your app and to tell a great story. Uber provides simplicity by focusing on just priorities that people need to understand.
My opinion: I’ve used Uber a few times and I
must say that the service is at top level. The app is extremely easy to use and what I really like is that you can actually see a photo of the driver for security and also see the taxi moving on the map. The background technology is remarkable, connecting riders and drivers with a smooth interface that rarely reports errors.
Interview
/27
2
DEFINE AND P. 30
P. 31-34
DEVELOP
Approaching the client
Ideas, wireframe, prototypes. P. 34-38 Homepage and outcomes
.3
Define and Develop
In the last two phases from this project I will define my project and approach the client and the users again. I will also try to sketch my ideas and create some prototypes to see how my ideas are going to work on practice. In the process of researching I decided to contact the Studetn Union of my univesity and it turned out that they are fully aware of the reccuring problem and also have similar ideas to what I had in mind for this project. They wanted to create an app that could track the bus and delivers the information to the students via their mobile phones.
While I was searching for already existing projects I found out that the main way for solving transport issues because they are convenient and easily accessible. I thought that could be easily applicable to the situation we have in my Univesity. Moreover, it’s good that the Univesity is willing to sponsor this initiative,which means that this project could become reality for the next few months on time for the new university year in September 2015. In the next few pages I will show how I approached the university with a proposal and what students think about the idea of an app.
/29
Approaching the client.
Ideas, wireframes prorotypes
After I decided that I want to create an app for the outcome of this project and researching on different bus and travel apps I figured out that there are two types of app interface that could be useful for the issue I’m trying to solve. First one was to use just a map where you can see a little icon of a bus moving on the map see where it is. The second one was to have a simple timetable which is going to calculate in what time the bus is going to be on your stop and show you how many minutes do you need to wait. I wanted to keep my app as simple as possible but to keep the functionality as well. To create better UX I decided to ask what kind of app the users prefer and what will be more convinient. Do you think that the app is going to improve your jouney? Definitely
100%
What interface of the app will be more useful?
/30
Time table
Map (ex.Uber)
Both
15%
24%
61%
/31
Ideas, wireframes prorotypes
Home
ХомеHome : The page when you open the app .When
you tap on
Log in : Because the app should be available just for University of Salford you will be required to log in with you user name and password that you use to log in everywhere else in university.
Login
Main screen: The main screen appears after you log in. The main focus on the page will be the map of the route of the bus and a little icon bus which you can see. There will be a function to add your specific destination and a bubble will apear saying in what time it is going to be on your stop. I thought about having one page called announcements where university staff, the driver himself or students can post more general information for the bus when for example the route is changed because this might happen quite often because of road closures or information when the bus break down and there is no service at all through the whole day.
Main Screen
Map
/32
Approx. time
it it will take you to the log in screen.
Ideas, wireframes prorotypes
Announcements
/33
Color scheme Develop. Home page.
/34
For colour pallete of the app I wanted to use something that shows the users that this is a Univeristy of Salford app and I thought that it would be appropriate to use the official colours as a reference. I then went to Adobe Colour CC which is a website that I almost always use to match the perfect colours together. I used the red from the university colours as my primary colour and dicovered some other interesting combinations I can use.
Inspirations Develop. Home page. University of Salford
I decided to research on some login screens of travel apps and I had two ideas for my home page - to use a photograph that I made while I was doing my research on the University bus or think of some kind of pattern. I found three patterns that I like and the second one very much reminds me of roads crossing each other or a map. The first one I found in Media city and I took a photo just in case.
/35
ОутцомесOutcomes.
This photo I did myself when I was researching on the targeted audience. Since then I was constanly thinking of how good is going to look like an app homepage because there is a lot of free space on the bottom of the photo and could be used for text I also edited it myself and turned the opacity down a little bit so the text and the buttons can stand out
ОутцомесOutcomes.
Icons
The font I used if called Quicksand. I wanted something really simple and thin because I was going for more minimalistic design.
I think that the ghost button adds to the design and give it more clean and flat look.
The line was first inspired from a recent project of Magnetic North I researched on. However, I kind of liked how it looks like and could be interpreted as a symbol of the track itself. I was messing with it to see how it’s going to look like and I decided that it will be better if I can make it a part of any of the letter. This little detail made it more completed.
Bus
A Accomodation
/36
/37
ОутцомесOutcomes. I did this short app walkthrough in After Effects to show how the app is going to work in more understandable way. Click on the photo to play the video
Yanislava Velikova,2015
/38