Andrea
Arteaga
Final Wireframes with Given Tasks
These are full wireframes to demonstrate specific tasks or "paths" to the user. This way they can know how the app functions without us having to fully develop every path.
Tasks in Wireframes:
1) You accidentally left your email logged in at a print place downtown. Log-out of Google email at Copy Central, Mission Street
2) Your photos are in use by another Instagram account. Have Sentry (the app) send a verified report for immediate action.
Wireframes Progress
Adobe XD was used to build out the paper prototype into wireframes. This allows us to build out the main functions of the app and a few secondary or third navigation paths. The design is simple, but after creating live links to simulate a live prototype we can acknowledge the heuristics and solve complications early into the design process. See below for prototype example.
User Testing
When first testing the wireframes the number one issue with navigation was the importance of different features over others. Some categories such as controls and profile were not working in hierarchy of use. Because of this I created a second version for user-testing. The new prototype is below.
Changing the navigation, the first thing I did was pull the profile icon from the other list of icons and put it instead into the settings. It isn't that important to the user as other functions and it did not accurately represent what the menu of icons was. So I changed the main navigation symbol as well- to the left file icon. Another aspect I determined was the importance of Settings and Controls. I took Settings out of the main navigation and placed it as an icon in Home, and took Controls out of Settings and onto the Main Navigation.
Heuristic Evaluations
#1: Visibility of system status
Definition: Allowing the user to see a visual representation of what the application is doing, for ex: Loading Bar
I will make use of this heuristic by darkening the navigation symbol the user is currently on. That way they know where they are.
#2: Match between system and the real world
Definition: Developing the app so that the parts and labels are easily understood by the user.
To ensure this heuristic I use easy to understand terminology and will use visual icons to represent different groups of content. This way the user understands the app on sight and can easily navigate
#3: User control and freedom
Definition: This allows the user to have full control of different decisions and actions of the app.
I will give the user full control by always making the navigation clear. More specifically I will always have a pop-up question to confirm deleted content or changed preferences.
#4: Consistency and standards
Definition: All terms will be clear and consistent throughout the app both in design and terms.
To make the app cohesive I will ensure I will have a specific system of pre-determined design features such as button-height, text size, and more. There will only be one clear way to get to each feature, not multiple cases.
#5: Error prevention
Definition: Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Again I will ensure the user does not make any errors they did not intend by giving them a confirmation message. Another feature to ensure safety of content is to have a dump folder in the settings where recently deleted content can be reversed.
#6: Recognition rather than recall
Definition: Minimize the user's memory load by making objects, actions, and options visible.
My app has to organize loads of information and by using icons I can allow them to easily recall locations and actions.
#7: Flexibility and efficiency of use
Definition: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions
One way I utilize this heuristic is with the Controls section, where the user can create across the board decisions without having to go individually to each category.
#8: Aesthetic and minimalist design
Definition: Minimize the user's information input and keep both design and information to the point.
To create an app with minimalist design I will be keeping open space and implicating "flat design". The app will feel very clean, but I will have to find the balance between minimalistic and boring.
#9: Help users recognize, diagnose, and recover from errors
As I had mentioned above we will allow the user to see recent activity and fix any recent actions. The app deals with all of this user's information so error procedures have to be thorough.
#10: Help and documentation
Definition: Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
The only help options currently are within the sign-up process, I will ensure there is a "Help" option within the settings as well as a place they contact a representative.