Designing User Experience for Sia
Role: Designer, UX Researcher & Frontend Engineer
Team: 2 Frontend Engineers, 2 Backend Engineers
Project Duration: Spring Semester 2020
Sia is a mobile application developed by a team of graduating seniors for their final project. It aims to simplify and give students a new way to keep in touch with what’s happening on the campus of Howard University.
Identifying the Problem
The students of Howard University are unaware of the various opportunities, events, and resources available to them on campus. This includes items relating to registration/graduation, offsite studying, events and news around campus, etc. The current email dependent system is unreliable and inefficient.
Understanding the User and User Research:
To better understand the people I was designing for, we conducted a focus group and interviewed them to discuss their experiences. The focus group results of key findings are as follows:
Key Findings:
Through in-person interviews, it was confirmed that many people found it difficult to obtain information promptly from the administration, as well as keeping with certain events around campus such as info sessions from companies and workshops around campus.
With that, I defined the preliminary people problem as:
People want to receive information in a timely and clear manner but can’t because of the insufficient methods used by the university to keep its students in the loop.
User Stories and Thought Process:
- As a first-year student at Howard University, I want to stay abreast of both my responsibilities/duties as a new student, as well as opportunities such as internships and part-time jobs that are available to me.
- Must develop a time-sensitive checklist to track registration/medical duties
- Must be able to notify the user of part-time jobs and internships
2. As a final year student at Howard University, I want to ensure that my graduation process is as seamless as possible. Additionally, I want to have a confirmed job position.
- The time-sensitive checklist must identify payment/confirmation deadlines
- Must notify the user of full-time job/post-grad studying opportunities
3. As a Howard University Student, I want to ensure that I am staying up to date with all the requirements so that I can remain an eligible student at Howard University.
- The time-sensitive checklist must identify housing selection windows, housing deposit deadlines, and mandatory check-in windows
4. As a Howard University advisor, I want to improve the advising process so that it is easier for students to finalize their schedule and get registered for classes.
- Must accurately inform users of their class options within their major
- Must inform users of possible classes available to them that are outside their major
Design Thinking and Implementation
Tools: Paper & Pencil, Figma, React Native
Languages: Javascript
First Design:
I believed we could create a better flow and user experience for our users to better meet their needs, so I did a redesign after speaking with the team.
The Redesign:
I believe that this redesign is much more purposeful, functional, and relevant to its original intention.
Coding and Design
My role in this project was to bring to life what our focus group had demanded as a solution to the design and user experience front. The main takeaways I got from the interviews were that the people wanted dark mode, interactivity, and clarity. My inspiration for this design came from one of the most popular social media platforms — Twitter and this platform was also very popular amongst our focus group. So I did my best to emulate that flow and vibe. Developed using React Native. Here is a link to the GitHub — Project Sia
Design Breakdown:
The Logo: I chose to make our logo a compass because of the underlying nature of our application. Which is to act as a guide to the students. They can come here to get information and stay up-to-date with what’s happening on and around campus.
Interaction: Pictures and videos create interaction between the user and the application and keep them stimulated and interested. I envision the user being able to tap one of these cards and be able to observe a video before reading a news article written by one of their fellow peers or by the administration as an example.
Bottom Tab Navigation: Allows the user an easy transition to get to the information they opened the app to get, whether it be news or events they want to know more about.
Search bar: This gives the user the power to be able to search for what they want using a keyword. This helps the user if they already have an idea of what they are looking for and they can also access information based on tags like the examples displayed below the search bar.
Project Sia Prototype:
Tradeoff Analysis
Keeping in mind the goal of creating an interactive dark mode design, I strayed away from the first design because I felt that it did not encompass the interactive vibe that our focus group craved. Comparing the first and the second design, I chose the latter because:
- The design has a better flow, color scheme and is more interactive which encourages the user to really interact with the app and consume more of the content that is available.
- It provides an entry point for users to view what’s currently happening around campus, the home page acting as a hub for what’s been happening recently.
Conclusion
By the end of the semester, not all of the mentioned design ideas and functionalities were implemented and shipped. Unfortunately, the implications caused by COVID19 sidetracked the team for a little while and we were only able to get a few of the features we wanted to implement delivered properly by the end of the semester. But of course, the project is still open and could be completed in the future.
Reflections
Test More Often — Looking back, I regret not testing my solutions more frequently as I designed them. As a result, I had no quantitative measure to gauge whether my solutions were actually making improvements.
Maintain Team Morale — As one of the main communicators between the engineering and design teams, I could have better-alleviated drops in team morale. The backend engineers expressed that we, the frontend engineers, ideally could’ve completed our work a bit faster to avoid long waiting periods. I should have pushed us to be less perfectionistic and had updated the backend engineers more frequently.
