Team-P-CPSC-481

Design team project for CPSC 481.

View project on GitHub

Project Portfolio


Project Idea

Our project idea is a Virtual Closet mobile application.
We expect the app to be used by anyone from clothing retailers, personal stylists, and social media influencers to your average joe user.
The system will provide users with a virtual database to add clothes and accessories from their physical closet into their virtual one. It will also serve as a social platform of sorts, as users can share their wardrobe and outfit ideas with their followers. It could also be used to plan outfits in advance for those days when you just don’t know what to wear.
The app will allow users to mix and match clothing items from their database of clothing, offering a solution to the age-old question, “What should I wear today?”.

Team Members

Eric Wu (30055876)

Jack Yang (30062393)

Sophia Ngo (30063935)

Soumya Kumaria (10124004)

Sydney Kwok (30073206)


Stages

To approach this project, we worked through five stages to explore the processes of design from planning to prototyping.

Stage One

Stage Two

Stage Three

Stage Four

Stage Five


Stage One

Project Progress

For stage one of the team project, many discussions were held to prepare ourselves before we move on to the next stage and begin working on the actual project.
We began by discussing our individual expectations and goals so that we could put together a collective set of guidelines and expectations in the form of a team contract that we could all agree on.
Once we had our team contract put together, our discussions moved on to the topic of project ideas. We put our heads together during brainstorming sessions and came up with three ideas for our project.

Deliverables

  1. Team Contract: As mentioned previously, after much discussion, we put together a team contract. Our team contract can be found here.
  2. Online Repository: Our team has chosen to use GitHub to host our online repository. You can view our online repository here.
  3. Project Portfolio: This webpage is our project portfolio. As you can see, we have written about our project progress and deliverables at the end of each stage.
  4. Three Project Ideas: Our project ideas have been described in this file.

Stage Two

Project Progress

For stage two of the team project, we decided which project idea we wanted to move forward with: a virtual closet mobile application! We have worked together in this stage to further flesh out the details of this idea.
After finalizing our project idea, we put our heads together to identify the stakeholders and users of our application.
Next, with our identified potential users/stakeholders in mind, we chose three IDEO method cards to apply in our user research.
Finally, after having completed our user research, we put together a list of user tasks.

Deliverables

  1. User Research Report: To present our work at this stage, we put together a user research report. Our user research report can be found here.

Stage Three

Project Progress

In this stage, our efforts were focused on ideation and prototyping.
We began by brainstorming designs for the system. Once we had come up with a variety of sketches, we discussed the ideas behind them and constructed an affinity diagram. Following the affinity diagramming session, we selected and polished a few of our most promising ideas. We then chose one of these ideas and constructed a storyboard that illustrates the scope of the interaction between the user and the interface.
From here, we moved on to the prototyping phase. Based on the storyboard, we used Balsamiq to construct a low fidelity prototype of how we expect our system to be used. Then, we conducted a task-centered system cognitive walkthrough to evaluate the major tasks that we had identified previously in Stage Two. Based on the evaluation results, we revised our prototype.

Deliverables

  1. Stage Three Report: To present our progress in this stage, we have put together a report. This report can be found here.
  2. Demo Video: In order to demonstrate our low-fi protoype, we’ve put together a video. The demo video can be found here.
  3. Low-fi Prototype: To check out the protoype for yourself, we have posted a soft copy of it here.
  4. Presentation: We have also put together a PowerPoint presentation of our project idea and our journey in this stage. This presentation can be found here. We also have a demo of our low-fi prototype in the presentation but a seperate video can be found here.


Stage Four

Project Progress

In this stage, we created a high fidelity prototype.
To create our prototype we used a program named Figma. There was a learning curve when starting out, but once we got the hang of it we were able to convert our low fidelity prototype into a high fidelity one. We started off by copying our low-fi prototype and transferred it onto Figma. Next, we started adding more details such as, a logo, colour, images, and transitions between screens.
Once prototyping was finished, we conducted a heuristic evaluation to figure out what we can improve in our prototype. We split the group up into three evaluators and two reviewers. After the evaluation was finished we took took the findings from the reviewers and iterated our hi-fi prototype.

Deliverables

  1. Heuristic Evaluation Report: The summary of the heuristic evaluation can be found in a report here.
  2. Presentation: Throughout this stage we have documented our progress of the high fidelity prototype in a PowerPoint presentation. The presentation can be found here. Although included in the presentation, the video of the hi-fi prototype can be found here.


Stage Five

Project Progress

In this final stage, our efforts focussed on the final touches to our high fidelity prototype.
We added the last two vertical tasks and finalized the prototype. Along with the prototype, we assembled a final report which documents information about the app and our process in making it.

Deliverables

  1. Hi-Fi Prototype Demo: The demo of our final prototype can be found here.
  2. Portfolio: Throughout the entire project, we have been adding the progress of each stage to this porfolio. This website you are on is the portfolio.
  3. Final UCD Report: The report containing our entire project can be found here.