Weekend Urnr. Mobile App Wireframes. May Copyright UX Wireframe Experts 1

Size: px

Start display at page:

Download "Weekend Urnr. Mobile App Wireframes. May Copyright UX Wireframe Experts 1"

Winifred Mason
5 years ago
Views:

1 Weekend Urnr Mobile App Wireframes May 016 1

What is a wireframe? A wireframe is an outline of a digital product expressed in simple block layouts and representative text that conveys structure, hierarchy and content at a broad level.

2 What is a wireframe? A wireframe is an outline of a digital product expressed in simple block layouts and representative text that conveys structure, hierarchy and content at a broad level. Wireframes are highly effective in: Communicating and validating ideas, Getting early stage clarity and feedback for improvement, Increasing collaboration between multi-disciplinary teams, Saving substantial time and money. Our wireframing process 1 A UX expert thoroughly evaluates the goals of your business and understands the end users pain points to ensure your product is rooted in user needs and delivers business impact Next, the expert focusses on ideation and meaningful innovation. S/he brainstorms and sketches creative UI alternatives based on latest UX design trends, user centered design best practices, up-to-date research and established usability conventions. The most promising UI ideas are then refined further into digital wireframes to craft an experience that is effortless, meaningful and delightful.

3 How to read this document This document contains annotated wireframes for all the key pages you indicated Wireframes are marked with numbered circles 1. Annotations related to each number are at the right side of each screen. Annotations typically document key design decisions and features. Usability best practices and top tips are marked in a box with this icon The Overall Recommendations section at the end of the document contains top 5 UX recommendations for your product. 1 1

4 Table of Contents Login Select Industry/ Interests Landing Job Details Profile Edit Profile - Location Top 5 UX Recommendations

5 Login Weekend Urner Weekend jobs in your pocket Enter Your Phone Number to Register Send Verification Code A verification code will be sent to this number 1. Text, logo and image can be selected as per marketing/ branding requirements. As phone number registration and verification is a business requirement, user s phone number can be identified and displayed upfront so user does not have to enter again. The pre-filled number should be editable.. When edit icon is clicked keypad will appear and number will be editable 4. On tapping the Send Verification Code button a verification code will be sent to the phone number via SMS. User should enter the verification code in the next screen* to register. *The enter verification code screen will be a standard text field screen and is not included in this document 5

6 Select Industry/ Interests The preferences screen will help create a highly relevant and personalized experience for the user. 1. User should be verified from the database based on the phone number Hello Jane! 1 Select your job interests We will display handpicked jobs for you that match your interests Trainer Assistant Driver Sitter Delivery Receptionist Sales & Marketing Caregiver. User will select a few job categories s/he is interested in. Tapping on an interest should select it and tapping again will deselect it.. If the industries are too many a vertical scroll should be added. The Ok and I will do this later buttons should be sticky and stay at the same location always. Content should scroll beneath these buttons. Pets Housekeeping Teacher Tutor Ok I will do this later > 6

Landing 1 1. A sticky navigation bar at top should be used as the number of navigation options are few. Navigation bars: A. Expose app navigation to make information easily discoverable and, B.

7 Landing 1 1. A sticky navigation bar at top should be used as the number of navigation options are few. Navigation bars: A. Expose app navigation to make information easily discoverable and, B. Make browsing efficient All Jobs Applied Bookmarks Fitness Instructor San Pablo, CA $50/ hr Weekends: 10:AM 5:00PM Posted: Today 5 Pet Care Professional Pasadena, CA $10/ hr Part-time; Weekends only Posted: Yesterday Food Delivery Executive Berkeley, CA $0/ hr Part-time; Weekends only Posted: Yesterday Warehouse Executive 6 4. Search should be persistent on every screen.. A carousal can be used to highlight top 5 jobs in one specific category in this area. Example categories could be - Hot jobs, sponsored jobs, featured jobs etc. 4. Categories can have a differentiating icon. E.g. Hot jobs 5. All jobs based on users interests and location information should be displayed here 6. User can tap bookmark icon to bookmark a specific job. These jobs will show up in the bookmarks tab 7

8 Job Details Hot Job 1 1. Browser chrome should be reduced to a minimum and the selected job should be displayed full-screen. A close button and back arrow will navigate user back to All Jobs view. Icons related to the job can be clubbed on top right. 4 6 Recruiter name Fitness Instructor San Pablo, CA $50/ hr Weekends: 10:AM 5:00PM Posted: Today Description As a fitness instructor at Gold s Gym you will: Demonstrate how to carry out various exercises and routines. Watch clients do exercises and show or tell them correct techniques to minimize injury and improve fitness Give alternative exercises during workouts or classes for different levels of fitness and skill Monitor clients progress and adapt Apply 7 5. All necessary details to make a decision on the job posting should be available to the user at a glance. E.g. Location, pay, day and time 4. If recruiter data is available it should be displayed in close proximity to the job details. 5. User should be able to get in touch with recruiters in various ways text, , phone (if available) Additionally user should be able to share the job posting with friends. 6. Detailed job description but with scanable text is recommended highlighted keywords, bullet points etc. should be used for easy-to-digest content. 7. A persistent Apply button should be available. 8

9 Personal Info Profile Details on File Jane Smith Looking for job Janes@gmail.com Set profile status which recruiters can view before contacting you 115 Chestnut Street, Berkeley, CA, User can add/ modify personal details in the user profile view. E.g Add photo, edit name etc.. User can set a messenger status here indicating her current job status e.g. N/A, Looking for job, employed, unemployed etc. This will be visible to recruiters in the candidate database. User should be able to change location details as well as preference about job proximity from current location 4. User can remove or edit job interests or industries from here. These will be the industries user has selected after login. If user has not selected any industries or Skipped that step after login user can add interests here. Show jobs within 0 miles You job interests/ industries Trainer Add More Tapping on add more should open the same screen as Select Industry/ Interests Use these mobile input fields UX best practices to design form fields: icles/mobile-input-checklist/ 9

10 Edit Profile - Location Edit Address 115 Chestnut Street, Berkeley CA Enable users to edit address and job proximity preference from current location. Jobs can be shown in real time on a map. Special job types e.g. Hot job can be highlighted with an icon.. Number of jobs currently available within the specified miles from current location 0 Miles 10 jobs available Cancel Save 10

11 UX Recommendations Overall App 11

12 Top 5 UX Recommendations and Tips Minimize form filling Ensure minimal typing is required from the user during form filling by - eliminating optional fields in mobile forms, pre-filling available user data, auto completing data and using appropriate menu controls and input elements (e.g. stepper control instead of manual inputs of numbers; GPS to identify user s location instead of user required to type in the location) Writing for low-literacy users As the users of the app are low to medium literacy users some important content guidelines should be followed. Lower-literacy users focus on each word and slowly move their eyes across each line instead of scanning text for important cues. Place crucial information at top of page - usually above the fold, use ample white space to group related information, optimize search to account for misspellings entered by users and avoid animated text. Login best practices The app must let users access jobs without having to login or register first. This will help them get a feel of the app and asses it s value. Generic job postings should be displayed (as no location data or job preferences will be available) as users access the app. Users can be prompted to create an account after they engage well with the app e.g. user bookmarks a job Carousal for displaying jobs In the jobs listing page, when promoting certain jobs at top, include only up to five slides within the carousel. If slides are more than five - users do not engage well, find it difficult to recognize slides they have already viewed and cannot locate a slide later. Touch targets For touchscreen devices, ensure that touch targets are appropriately sized (Apple 44 x 44 pixels, Android 48dp (48px on an MDPI device), Windows - 4px with a minimum touch target size of 6px) and well spaced to avoid selection errors. Also, when possible place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the Hard zone. 1

13 Follow up services We are happy to provide follow up services for your product. To engage with us for follow up services or know more drop a message at info@uxwireframeexperts.com It is our promise to get back to you within two business days. Custom services we provide UX review of an existing digital product Competitor analysis User stories Persona creation Click-through wireframes Remote focus groups Remote moderated and un-moderated user testing Visual design 1

14 Thank You! 14

Enterprise - Sales App

Enterprise - Sales App Mobile App Wireframes March 06 What is a wireframe? A wireframe is an outline of a digital product expressed in simple block layouts and representative text that conveys structure,