REDESIGN interface
Panxin Yu Jiayao Kong
TABLE OF CONTENTS
Current Design
1
Problem
3
Audience
4
Mission Statement
5
Research Overview
6
Student Surveys
7
Interviews
9
Analysis
11
Inspiration
13
Design Guideline
14
Mock up and Prototypes
15
Final Proposal
17
Final Prototype
18
Next Steps
23
CURRENT DESIGN Uc Davis Mobile is the official mobile app of UC Davis. It provides students, faculty and staff with all their needed UC Davis resources in a mobile setting Clear some space for the new, official UC Davis app: made by students, for students. Do everything from checking real-time Unitrans schedules to accessing your UC Davis email.
1
2
PROBLEM
All of UC Davis, One app. Throw away clunky catalogs and clear a few of the 26 tabs you have open in your laptop's browser. The new UC Davis Mobile allows you to do everything from checking real-time Unitrans schedules to accessing your UC Davis email. The current app addresses the issue of providing useful features of Uc Davis, but it does not reflect the exciting visual interface. Aggie Feed covered more than half of the screen on the homepage. Non-customizable Home Page and a action bar at the bottom with no boundaries between icons which might cause access mistakes. Features do not have a quick & direct access.
3
AUDIENCE
The audience of the Uc Davis Mobile App includes three groups of people. 1. It targeted toward students who are transfering into different colleges. 2. As well as those students who have already attending UC Davis and want to learn more about the campus. It’s also targeted towards current students. 3. Another group of audience is the faculty and staff of the department, or anyone outside of the University who is visiting campus.
4
MISSION STATEMENT By improving the visual appeal and overall organization of the mobile app, we will make it more user-friendly and provides a better reflection of the design abilities of faculty and staff. Improving layout and color to make all features and functions more convenient by mproving the visuals and overall aesthetics of the user interface to make it contemporary and interesting. Encourage more users to learn about this app and feel willing to use it for their daily needs.
5
RESEARCH OVERVIEW 1 2 3 4 5
Perform flow analysis of current mobile to determine possibilities for functional alternatives and clearer interface. Survey current design students to find major issues they face with the app. As the app’s largest group of users, their opinions and suggestions for improvement are greatly valued. Act as a fly on the wall to observe behavior of a app user. Noting their process as they navigate through the site will reveal areas that require more attention than others. Interview extreme users of the mobile app. This includes students, faculty and staff who use the app regularly, but also people who have never used the app before. Try it myself. As a designer and current user of the app, I have insight into its benefits and shortcomings, and I can improve upon the prototypes by using them myself.
6
STUDENT SURVEYS
7
45 students completed an anonymous online survey. When asked about their frequency of use of the app, the answers varied greatly. They ranged from “never” or “not a lot” to “three times a week.” Average response was approximately once per quarter.
Students commonly use the app for bus schedules, course schedules, smartsite, map. The most common use of the app is finding information about campus.
Major problems encountered with the interface include uncustomizable homepage. The layout is too boxy, flate and not interactive. It also lack of detail and useful feature.
Many students wish the app included information about alumni and information about jobs and internships. Interesting and impress user interface of app, or a direct button for add " my favorite stop" also we are thinking create a new feature named "school planner" which can help student organize their campus life effectively.
8
INTERVIEW Interview with Ricardo- the head programmer “Students are the target audience, and we are looking at providing more for staff and visitors. There is already a good amount of overlap between features visitors and students want such as maps and buses. We look at the usage of the features and how people are using it to develop new features. We also show people prototypes to see how well they work to design the interface.�
9
“We chose the layout because it is a recommended and standard layout based on the human interface guidelines for the platform. It also brings content first rather than requiring users to select an icon every time. The color and style were chosen from the UC Davis branding guidelines and the human interface guidelines for the platform. The features were included by looking at services that students use and seeing what information students want. ”
“We design the interface by looking an best practices for interface design, examples of popular designs for the platform, and adhering to the human interface guidelines. The survey is used to see what services and features students want to see added and what they expect to see in the app.”
10
ANALYSIS
11
By doing extrensive research into what the app is used for, its shortcomings and opportunities for improvements, we took note of some important messages that kept recurring. First of all, this app did not promoted enough. The app is most commonly used for finding information, such as course schedules or bus station. This app included some features that student use a lot. Bus shows on map instead of minutes, so users can know where is the bus. Even students are the main target but still consider about other users. An Interesting and impressive user interface of the app will encourage users to use the app with a quick & direct access to each feature. Personalized setting provides student highly organizeable campus life. Simplifying the home page to make it more clear where particular information can be found and organizing the overall framework of the app to be more user-friendly. Improving the visuals and overall aesthetics of the app to make it contemporary, interesting, and reflective of the what designers are doing today.
12
INSPIRATION Aggie Roundabouts -These bike loops have become a campus icon, prominently featured in many campus publications and recruiting materials. We got inspiration from this iconic campus icon for our homepage style and shape of the icon.
At the intersection of West Quad and Shields Avenue is the original painted rendition of the Aggie Logo
13
DESIGN GUIDELINE COLOR
TYPEFACE Type studies helped to determine which typeface would be most space efficient, legible, and match the overall design of the app. 14
MOCK UP AND PROTOTYPES
15
16
FINAL PROPOSAL This is a mock up of the proposed pages for the app. It provides a eye-catching design and much clearer color and organization. In addition, the home page has impressive & playful User Interface, a new spin function provides user a quick and easy access to reach different features. A customizable homepage and editable features. Users can change different color of interface and add/delete features on homepage. A direct button for add “ My Favorite Stop� on bus page which can quickly find out favorite stop and add it on page. A new feature named " School Planner" allowed student organize their campus life effectively. Again, the same spin function as homepage provides a interesting&playful user experience.
17
FINAL PROTOPYPES
18
19
New weather feature can help user know
spin the roundtable to
updated weather in
seek the feature
Davis
Quick & direct access to each feature
New icon and roundtable as a menu selection. All features can be edited, such as color or add/delete icon.
20
eye-catching color bar which can read count down quickly
a new icon for adding my favorite stop at the button, users can quickly access
multiple color symbols
bus stop and add it to
provides users a clear
favorites by just one step
and quickly access
instead of multi complex steps.
21
spin the roundtable to multiple color circle icons instead of horizontal list
seek the feature in different color shapes that will scatter out when user spin it
22
NEXT STEPS 1. Finish the design of each page of the app. 2. Explore more features of the app. 3. Receive more feedback from students, faculty and staff about the ease of use and clarity of the new app as well as its aesthetic value and updated feature. 4. Code the app, or ask an official app programmer make the app and have it implemented.
23