The Design Process of Solid
An app that enables students to easily work and hire within the UCSD community
Solid is an app that is made for students to easily hire and work within the UCSD community. The jobs range from small odd tasks, to larger jobs that require more complicated skills.
- Roles: Researcher, Designer
- Tools: Balsamiq, Figma, InVision, Gimp
- Skills: logo-designing, needfinding, persona-building, storyboarding, prototyping, user testing
- Course: Usability & Information Architecture (COGS 187A)
- Time: 5 weeks
PART 1: Understanding
College students are often occupied with their academics, clubs, and friends. Although many college students would love some spending money, many seem to lack the time to take up a part-time job.
How do we enable college students to make easy and petty cash without sacrificing too much of their time and energy?
Part of our idea was inspired by UCSD Free & For Sale 2.0, a Facebook page widely used and valued by UCSD students. Although the intended use for this page is for buying and selling, many post irrelevant and miscellaneous things such as services, news, and advertisements.
While UCSD Free & For Sale 2.0 was popular, we realized we could improve the experience of offering and finding help. We also looked at other competitors in the space, such as TaskRabbit, Craigslist, and AgentAnything.
Interviews & Surveys
We researched our potential users through an online survey and in-person interviews. Our survey received 169 online responses: 72.8% were willing to hire UCSD students, 78.1% said they were willing to do odd jobs over the school year for petty cash. This reflected a demand for jobs to be done and a demand for students who want to work.
Personas & Storyboarding
Our survey results convinced us to move on to persona-building and storyboarding for a better understanding of our target audience. We brainstormed 5 different types of potential users and highlighted 6 key goals users would have. The persona I created was college student named Tiffany, based on existing students.
Part 2: Creating
Low Fidelity Prototyping
The next step was coming together to create a flexible paper prototype that we could receive quick and valuable feedback on. Everybody made their own rough designs, and we came together to piece parts we liked from each other’s works together. Below is our very first initial prototype created as a team.
User Testing & Heuristic Evaluation
We then user tested our low fidelity prototype on 10 different users. We received feedback that the design was simple and intuitive. However, still, users encountered a few different problems. For instance, some found the registration process lengthy and others struggled during payment.
For our revised lo-fi prototype, we consolidated the user feedback, made a heuristic evaluation of the old prototype (using Nielsen’s Heuristics), and also evaluated our final design decisions for revision. The revised low-fidelity prototype was done on Balsamiq.
To design the interface, we used Figma to create the entire UI of our app. We assigned pages for each of us to prototype, and I was assigned to the onboarding screens. As someone leading the prototyping process, I then went back and edited every screen for consistency’s sake and to make any potential improvements. We then made the prototype interactive through InVision.
This is our final prototype that was showed off in a ‘Shark Tank’ presentation:
My logo was chosen to represent us. I wanted a logo that would represent structure and connectivity because of our concept. We wanted to connect people with each other, while maintaining structure and system, unlike some competitors out there. I used blue for the feeling of trust, and added the glare in the middle to help include our name.
This was my first HCI project. I discovered that design isn’t just about making things look pretty, it also comes down to improving the experiences of users and tailoring it to them. It’s not just about creating things, it’s also about understanding!