Speculative Fiction: Eden Emotion UI

Material Needed:

First Iteration:

Fluid UI allow you to create unique UI and is easy to understand. Fluid UI is free to an extent but requires software purchase in order to use certain things. The key thing when creating the UI was to make it simple and easy for the user to use on a small screen of a watch.

Creating the Fluid UI for Eden Emotion

Creating the username and password screen for the EE account I wanted it to be simialr to many apps to ensure users were not overwhelmed.

1. Begin creating a frame using the different widgets Fluid grants you on the left ide of your screen.

2. Use the widget with the username and password format on it.

3. You re able to change the color by clicking on the section and a menu will appear to your right.

4. Scroll to the bottom to see the different options. Pick the color you desire.

5. To create the different links between the login button and the next page click on the text and a menu will [pop up.

6. Click on the link/chain symbol which will activate an arrow which will allow you to select the page you want it to lead to.

Creating the Table of Contents on Fluid UI

7. Using the widgets shown on the left side of the screen select the one that looks similar to the one in image 1.

8. Select the widget that has the drop down menu.

9. Edit in the different text such as the ones listed in image 1.

10. To link the different texts to the different pages, select each text and a menu will pop up similar to image 2.

11. 6. Click on the link/chain symbol which will activate an arrow which will allow you to select the page you want it to lead to. Ensure the text and page are the correct one.

Adding Recent Activity to UI 1

12. Create another page and make it into the Recent Activity

I wanted to include something that would allow the user to go back and review what emotions were detected as well as what guides were activated in that moment.

13. Using the widgets on the left side of the screen choose the drop down menu similar to the one used in previous steps. Your UI should look like image 1.

14. In order to link Recent Activity back to the Welcome screen use a shape of your choosing and place it on the screen.

15. After placing the shape, click on it to reveal the menu similar to image 2. This will allow you to click on the Welcome screen in order to go back when clicking on the shape.

Creating the Data Statistics in Eden UI 1

16. Using the tool bar to the left select the shape icon to create the graph bars.

17. After creating the different bars with different heights, change the color for each bar by clicking on the shape and a menu will pop up.

18. Using the text icon you will add the emotion name and a percentage. Your UI should look like image 1.

19. Linking the page back to the Welcome page, follow similar steps as the previous page. Click on the shape that will be clicked to go back. A menu should pop up like in image 1.

20. Click on the link figure which will then pull up a blue arrow that allows you to choose what page you want it to send you to.

Creating the Guided Control Page in UI 1

21. Using the text bar create the title, Guided Control

22. Create another text bar and include the Recommended section and recommended therapy

23. Write down different examples of emotion activities similar to image 1. Also include the Therapy session recommendation with information such as hours, mile distance, name, etc.

24. Once you finish your final project should look like image 2.