UX- UI DESIGN My Learning Journal Edex course March 2019

First Class

Basic construction

I decided to make the Prototype for an App to get the time zones, my lessons, summer- wintertime etc more organized and make it may be as an app students can use to built their own calendar for the EDEX studies, find all courses sorted from Apps used and long short and self paced with classroom links (the long courses always have the same link https://seminars.adobeconnect.com/edex1/ and the short ones too https://seminars.adobeconnect.com/edex2/)

The benefit of this App should be to be able to access all relevant general info in one place and to organize my studies in a personal easy to handle way without every time researching all in the class content. This ideas came with the new system that made it harder for me to get straight to the info i need. I thought to do this just for myself but when watching others struggling with the same in most courses i thought it may be an idea to have a app for this. I will built and test the prototype on the EDEX Platform and if it has feedback i will built a progressive App that works on all devices and load it to resources. At least i will built it for myself because i take many courses and still can t get along without searching .

I started with the card sorting wrote the content on paper and then built the skeleton for the App in XD design. Using XD for the first time i had to get some knowledge because there is such a big amount of hidden content and a big Add Plugins (to reach under Add on - Plugins) site and many free resources on this site https://www.xdguru.com/

card sorting

And this is the XD built first construction

Navigation for the App

Second Class

In this assignment i really learned to work with XD and i see i need to get used to shortcuts, i made myself a list to all relevant resources and tutorials and even posted it on the EDEX may be it will be helpful to others as well. I had a hard time to get used to the drag and drop and mixed up a lot . It took some time i got used to it and after having some practice i really find the very fast and easy way to many features in XD. I love the grid and the asset panel. This is a little like styles in Indesign and so useful.

I continued with my project to make it easier to find the right courses in the right times to find the live classes that actually there is two rooms one for ALL short classes and one for all LONG classes. I guess the course sorting sites i will change a little when adding the real courses not all will need a hole site some are using more then one App and this sites are something that needs to be adjusted according the course that are available each year. Summer and wintertime i will add for all time zones in order for everyone to know what time its for him i each classroom time ordered by countries and time zones as well as an option to chose 24 hours or AM and PM. As one using 24 hours i am always mixed up with what is AM and what is PM.

I want this App as useful to Edex students as possible and i add here a link with an option to comment and would be glad about any feedback and wishes, I want to built this as an real App and provide it to students of this great learning platform.

Please add me some comments here:

I cant post the images in the grid they are cut in Spark so i did an Indesign file in order to share the overview and i wonder if you can understand my wire frame. As a student that takes many courses and faces many ling searching times i want to make it easier to find all and mainly get the time changes and time conversions easy for this specific courses and not as time converter in general that is to big to get the right info fast, also i want to make sure to get time changing. I guess when building and using the app i will make quit a lot of improvements wire frame for me is a very ruff first approach to the final result.

Third Class

I think mood boards i like best in all the prototyping and in testing colors fonts and layout you get in trouble with different tastes so its a long way to find the right style that should work for the taste of people that use the App or site. I learned a lot from people that have opposite taste then i have .

In my App i use brands that have colors already (Adobe and Adobe Apps... and i found that the (over)use of violet and pink is quit confusing they have a very similar look and its hard to recognize them by color only! ) and i just needed to find colors for text and symbols. And because there is a lot of colors from the Apps i choose grayish versions of the Adobe red for all the rest.

I did create all the Adobe Icons in XD after the Australian life class where Jason showed us how to do Icons in XD . I really like how simple it is to make great icons there. i did not make a file with images because in my app won t be images instead of images i have the colors of the App icons and i want to have the background of each page in the color of its App and then add the text on white background or half transparent as overlay.


Fourth Class

After testing and gathering some more information of the purpose of an App i changed the content and focused only on the time issue. When prototyping i found that its really important to give the right information in the right form. I come from a webdesign and developing background and an App is not a website. An App should focus on one issue and give a simple solution that should be available offline as well.

In the beginning i thought XD is really simple but actually i have many issues and working with symbols that looked so good in concept it got hard later to control. I will need much more practice to get the benefits of this App and do a prototype much faster then this one. And i need to start to use Shortcuts because for XD on Window some things are only available with shortcuts. Thanks to the great tutors and life classes i got a lot of answers to problems i faced.

For this working prototype i kept the styles from my mood board and thought a lot about how to make the content really easy to use. I struggle a lot with time issues and i see that many people do mainly in times of changing summer and winter times, but also finding the actual class time for my region. When taking a lot of courses its not so much a problem but for newcomers it is. I am still not sure that the new content is better and will need to do much more testing.

One thing i got from this project is i never will get confused any more and miss a class because of time issues. I did a lot of research how to simplify this endlessness time zones . I find it confusing to use the time converters and each one does it different and actually i thought it may be useful not to convert but just to show the times for each class in each region. To make it easier to know where i am i took free for use timezone Maps , in photoshop i cut out each timezone changed the colors and tried to match the same yellow but its still not the same for each region i wanted to have it readable as well and the free for use map is not best quality. I added the time for this timezone to the class time in normal time and tried daylight saving time. But the daylight saving time i cut of its to confusing and get mixed up between summer and winter hemisphere. I hope the daylight saving will be finished once its just a mess for everybody.

Its still Prototype and i am sure more testing will lead to changes and also the developing and coding of this App but its a start. And i am sure i have mistakes in the times. I learned so many about time zones and it took a while until i got used to make a little order in all this huge amount of information. On the way i found the most useful time converter ever so simple and so clear really easy to use. I used this interactive map in order to know the time zones. And i learned that there is not only full hours stop time zones but also plus half hour. And there is countries that don't have daylight saving times I added the time changing for the classes i an extra slide. So its possible to check when class time is changing and combine with your changing time. In order to finish this project in time i did not add the plus half hour regions but i guess i will think about how to add them may be as an additional info under the main hour. And i will have to test it with users from all time regions also in order to see if i changed the times correct.

Here is my Prototype it has many pages and i need to add the forward backwards when you are on each page i saw there is a nice new function to slide with interactive so i will add this function in the last assignment.

All slides in the prototype that still has minimum functions

I am building progressive Apps that work on IOS, Android and Window phones and i miss in XD an option for a device that is neutral and supports tablet and phone, like for websites- it took a while until Adobe got Responsive into Muse. its a pity Muse did stop working.... And i miss a lot to link from XD to outside urls. The text editing possibilities are not very rich. But i see there is so many improvements and updates on XD its may be the most changing App on Adobe so i wait. The use of Plugins and the Ui Kits is great!

Fifth Class

I was blown away from the many possibilities of animating and making the content act like a real App. And when knowing XD better there is so many options to automate. I found one that is a huge time saver : The drag grid and fill with a txt. file made me create the List of countries in a few seconds, a job that when doing it copy past would take hours! I am sure XD will develop more automated workflows like this and still many things are missing. Here a second good reference for the drag grid and fill and it can even count!

I really like the inbuilt voice that saved me from recording myself. I can imagine to use this a lot and sometimes create in XD more then just Prototypes. And for Prototyping and sharing its extremely helpful to add comments and further instructions mainly if something does not work in Prototype that will work in the App. I never added voice to a real website besides in video or audio so i need to check out to do this like in XD. XD makes so many things very fast that actually will take a lot of time when developing and coding.

To get animations there is a need for many art boards and as i have already many i choose one slide to make an automated animation that uses less art boards while tweening is done by XD. To Get my clock placing i took this tutorial as an inspiration.

And this one is a very short and really useful video to auto animate. also added to this there is a XD resource file with all kind of ready animations.

Here is the video tutorial i used to create the number counter:

The Protoype is usable but many interactions like forward and backward . search function and other small but important details like keeping the time you choose for your class according to the map or region to remember on the screen is not possible in Prototype. I used animated content for the changing clock in Sydney clock it does the animation but when i copy some features do not copy it shows the right content but not the animation. Because its a prototype i did not spend more time to find why the clock is only animated for the Sydney clock.

And just to get an impression of the complex and huge Prototype here an image that shows all the wires and artboards (109!) Animations needs many artboards and writing the same in code would be just some lines or even a plugin or module if i use a CMS. But i am sure XD will continue to develop and already now there is added so much the past year that's amazing.

wire chaos

Final Reflection

All in all i found this course really helpful and learned to like and manage XD really well. XD is a fast developing app with many many free resources i did myself a list and posted it on the EDEX . The spark journals become really good references and i can collect many information in one place and find it again very quick.

My Prototype went through many many changes when learning and testing. Testing more will lead to more changes i guess. Its really important to think test and learn again and again and even after launching an App or a site is never finished. I learned a lot also about my subject and time saving and world regions. And i discover there many mistakes in the content and times as well all the time. It would be needed to test it in different regions. All this time changes and zones are just crazy and i learned a lot on my researches. At least i won t miss any more a class because of time change ...

I started this course with no experience in XD and ended with a lot of knowledge. I want to thank you for this. The tutors were great with a lot of patience to answer all the questions and the guest speakers gave some really good insides into UI UX design. Sjaani, Melissa and Freddy made the lessons fun and gave the feeling of home because they are in all courses. I find myself in most life classes even when not finishing a course with all homework. This life sessions are my break from work and give me a lot of new ideas and its amazing how many engaged and creative people are there. Even i am not teaching i find myself inside.

Thank you

Created By
Susanne Tamir


All rights reserved- Susanne Tamir 2019

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a copyright violation, please follow the DMCA section in the Terms of Use.