Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tuirevii/uniter
An interactive prototype of an online service that motivates students to exercise. Created with Figma.
https://github.com/tuirevii/uniter
figma ui-design user-research ux-design website
Last synced: 20 days ago
JSON representation
An interactive prototype of an online service that motivates students to exercise. Created with Figma.
- Host: GitHub
- URL: https://github.com/tuirevii/uniter
- Owner: tuirevii
- Created: 2022-03-29T16:50:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-13T14:16:10.000Z (28 days ago)
- Last Synced: 2024-12-13T15:59:46.622Z (28 days ago)
- Topics: figma, ui-design, user-research, ux-design, website
- Homepage:
- Size: 2.33 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Uniter - Interactive Prototype of an Online Service That Motivates University Students in Finland to Be More Active
**UI & UX Design | Figma**
- **Project team:** 3 members
- **Course:** "HTI.110 Ihmisen ja teknologian vuorovaikutus: Suunnittelu", Tampere University
[See the mobile version of the prototype](https://www.figma.com/proto/HhBvilkXP5Tib3Vde7OEQt/Uniter?page-id=269%3A4306&node-id=269-4376&viewport=346%2C48%2C0.1&scaling=scale-down&starting-point-node-id=269%3A4376&t=Uc8FKmrlsSrJe1C9-1)
- Designed for big Android phones, resolution 360 x 800 px
[See the desktop version of the prototype](https://www.figma.com/proto/HhBvilkXP5Tib3Vde7OEQt/Uniter?page-id=514%3A3137&node-id=1106-15986&viewport=346%2C48%2C0.19&scaling=scale-down&starting-point-node-id=1106%3A15986&t=zVI6HAITDF6NB1Gp-1)
- Designed for a 16" MacBook Pro, resolution 1728 x 1117 px
## Main Idea & Goal
This was a course project made as a team of three. The aim was to design an online service to get university students moving. The result was an interactive prototype for a service called Uniter. It helps students find exercise companions, track their completed workouts, and earn rewards and offers from partners that promote sports and physical activity. Users can also look for a mentor or even become one themselves if they feel confident in a particular sport. The service’s promise is simple: “Uniter gets university students moving together.”
The service is designed to work in a web browser, whether on a smartphone with a small touchscreen or on a computer using a mouse. So, it’s not an app but a online service. Workouts are recorded through the service: after finding an exercise buddy and completing a session, one of the participants logs it, and the other confirms it. This earns points for both the individual and their team, which is selected when they first sign up. As users rack up points, they unlock extra features that let them personalise their profiles. Each month, prizes like gift cards from partners are raffled off to members of the most active team.
## Target group
- Finnish university students who prefer excercising with others but don’t necessarily always have company available, or who have problems finding some.
- Students who would like to exercise more but who lack motivation to start.
## My Role
- Project management
- Together with the team:
- Designing wireframes and the prototypes with the team
- Recruiting participants for interviews
- Planning and conducting user research
- Analysing the data
- Writing the final report
- Designing the poster for a virtual fair
- Active participation in each phase
## User Research
- Semi-structured thematic interviews
- N=4 (+ 2 pilot interviews), aged 30-41
The goal of the user research was to explore students' physical activity habits, challenges related to getting started with exercise, and motivation factors through semi-structured thematic interviews.
The interviews were recorded and transcribed, and we identified emerging themes from the responses to support the design process.
_Themes related to physical activity and their subthemes_
_Themes related to the use of the web service and their subthemes_
## User Personas
## Usage Environment
The usage environment consists of multiple factors. The service can be used on both mobile devices and computers, meaning the physical operating environment may vary significantly between different users and individual use cases. Users are required to authenticate themselves using their university credentials via the Haka authentication system, establishing an organisational connection to the university's systems as part of the usage environment.
From a technical perspective, the service also requires a functional internet connection, as it facilitates interaction with other users. Other users are an essential part of the operating environment, as the successful use of the service depends on having a sufficient number of users with created profiles.
## Conceptual Model & Information Architecture
## Storyboard
## User Stories
## Sitemap
## Wireframes & Prototype
### Some of the Wireframes I Designed
#### Mobile
#### Desktop
## Interactive Prototypes (Designed with Figma)
- [See the mobile version of the prototype](https://www.figma.com/proto/HhBvilkXP5Tib3Vde7OEQt/Uniter?page-id=269%3A4306&node-id=269-4376&viewport=346%2C48%2C0.1&scaling=scale-down&starting-point-node-id=269%3A4376&t=Uc8FKmrlsSrJe1C9-1)
- [See the desktop version of the prototype](https://www.figma.com/proto/HhBvilkXP5Tib3Vde7OEQt/Uniter?page-id=514%3A3137&node-id=1106-15986&viewport=346%2C48%2C0.19&scaling=scale-down&starting-point-node-id=1106%3A15986&t=zVI6HAITDF6NB1Gp-1)
## Some of the Prototype Frames That I Designed
### Homepage (Unlogged User)
- The hero area features the service's value proposition and a call to action that guides users toward the desired direction.
- The benefits of the service and its key features are highlighted to clearly convey why users should begin using the service.
- The goal of the user research was to explore students' physical activity habits, challenges related to getting started with exercise, and motivation factors through semi-structured thematic interviews.
### Profile Creation
- Unnecessary elements are left out.
- Required fields are marked with an asterisk (*) and explained.
- Fields have guiding texts when needed.
- Fields are logically grouped by topic.
- Users can go back to the previous step.
- The user can skip the tutorial video.
- The video provides an overview of key features.
- A pop-up confirms successful profile creation and gives clear feedback.
### Main Page (Logged-In User)
- Follows the Principle of Choices.
- The main content (finding some company for physical activities) is divided into two sections in the desktop view: company for individual sports and for team sports. In the mobile view, these are stacked vertically.
- Selection is easy thanks to limited number of choices.
- Also other important content is featured.
- The main page is accessible through the logo, and so are the discussions through an icon in the top header.
### Navigation
- In the mobile menu, the descriptive icons before the main page names already provide hints about the content of the page and help selection.
- On larger screens, the icons are placed only at the top level of the header, in front of the settings and user profile, so that the view remains uncluttered.
### Profile
- The profile can be edited, deleted, or the user can log out. Icons representing the actions precede these calls to action, making it easier for the user to make a selection.
- Since deleting the profile is a significant and irreversible action, the user is warned about this and given the opportunity to cancel or proceed with the deletion.
- Upon profile deletion, the user receives feedback in the form of a notification confirming the profile has been deleted, and they are directed to the homepage for unlogged users.
- **NOTE:** The elements used for creating the profile (hair, eyes, etc.) are not ideal. I used what was available for free within the project's scope. Usability is somewhat affected by this limitation.
### Settings
- Descriptive icons provide hints about the content and ease locating the right information.
### FAQ
- To ease finding the right information ja not providing too much content at the same time, only the topics are provided first, and the user can open the wanted section(s).
## Poster for a Virtual Fair
## Read More About The Project
The final report of the project written in Finnish can be found from this repository. The content of the report is the following (in Finnish):
1. JOHDANTO
- 1.1. Harjoitustyön yleiskuvaus
- 1.2. Aikataulu, työnjako ja ryhmän pelisäännöt
2. KÄYTTÄJÄTUTKIMUS
- 2.1. Tutkimusmenetelmän kuvaus ja haastattelukysymykset
- 2.2. Osallistujat
- 2.3. Haastattelurunko ja -prosessin kuvaus
- 2.4. Aineiston analyysivaihteet
3. KÄYTTÄJÄTUTKIMUKSEN TULOKSET
- 3.1. Haastattelujen tulosten kuvaus
- 3.2. Haastattelujen perusteella tehdyt päätelmät
4. KÄYTTÖKONTEKSTI, KÄYTTÄJÄT, PERSOONAT JA KÄYTTÄJÄKOKEMUS
- 4.1. Käyttöympäristö
- 4.2. Käyttäjät
- 4.3. Persoonakuvaukset
- 4.4. Käyttäjän tehtävät sekä käytettävyys- ja käyttäjäkokemustavoitteet
5. KÄSITTEELLINEN SUUNNITTELU JA INFORMAATIOARKKITEHTUURI
- 5.1. Käsitemalli ja informaatioarkkitehtuuri
- 5.2. Käyttöskenaario ja käyttäjätarinoita
6. KÄYTTÖLIITTYMÄSUUNNITTELU
- 6.1. Sivustokartta
- 6.2. Rautalankakuvina piirretyt näytöt
- 6.3. Täsmäprototyypin näytöt ja vuorovaikutteinen prototyyppi
- 6.3.1. Mobiilinäkymät
- 6.3.2. Työpöytänäkymät
- 6.4. Suunnitteluprosessin vaihteet ja saavutettavuuden huomioon ottaminen
7. POHDINTA JA YHTEENVETO
- 7.1. Nykytilanne
- 7.2. Seuraavat vaiheet: arviointisuunnitelma
- 7.3. Ryhmän ja oman työprosessin reflektointi
8. LÄHTEET
9. LIITTEET
- 9.1. Haastattelukysymykset ja tehtyjen haastattelujen dokumentaatio
- 9.2. Haastattelujen teemoittelu
- 9.3. Ensimmäiset versiot näytönkuvista kaikilta ryhmän jäseniltä
- 9.4. Rautalankakuvat (iso näyttö)
- 9.5. Materiaali virtuaalimessuille: posteri