Heidi Erwin
back to portfolio
#ME Iterative Design
Startup App Design & User Testing
WHEN:  October 2018
WHAT:  UX Design, Prototyping, User Testing, Figma

A group project centered around designing a user interface from scratch based on a description of a startup without knowledge of the company’s intended interface, and then testing this interface using eyetracking.

For the course User Interfaces and User Experience at Brown University. In collaboration with Christopher Nivera, Gregory Dahl, and Justin Chen.

Check out the high-fidelity prototpye here!

What is #ME?



Ultimately, we decided to design an interface for the startup #ME. #ME is an avatar-based social network empowering people to develop their identity in any way they want. They’re committed to providing a welcoming environment for people from all walks of life. We selected to design a mobile interface, as #ME is intended to be engaged with on the go.

Some of #ME’s original thumbnails as posted on the App Store:

Original App Interface


Sketching



Knowing that we wouldn’t be able to come up with a solid design in one go, we started with the fundamentals — sketching. Through sketching, we could each individually come up with our visions of the app, draw them on paper, and compare ideas. The differences between our designs helped us share perspectives and ideas that we might not have thought of individually.

Sketch by Christopher Nivera
Sketch by Heidi Erwin
Sketch by Justin Chen
Sketch by Christopher Nivera
Sketch by Gregory Dahl
Sketch by Christopher Nivera




After sketching, the group came together and decided on which direction to go. Although the designs of our hi-fi prototype are a mix of all of the designs, we agreed that the space-themed design illustrated in one of the sketches was a unique take on #ME’s mission.

Focused around a sense of a community and exploration, a space-focused #ME would align with the fact that #ME is made for people to express themselves in avenues they would not necessarily in real life. Users can make their avatars as wild as they want, partake in fantastical games, and meet people from across the world.

High-Fidelity Prototype



Our next step was to consolidate these sketches and create a hi-fi prototype for testing using Figma. Feel free to play around with it yourself here!

High-Fidelity Home Screen
High-Fidelity Chat Screen
High-Fidelity Messages Screen


High-Fidelity Missions Screen
High-Fidelity RISD Station Screen
High-Fidelity Brown Station Screen




With regards to the home screen, we imagined users traveling in their spaceship to different “space stations” (communities), in order to find other “space travelers” (friends), mainly drawing inspiration from the isometric house and personal ship sketches. Because self-expression is a priority for us, we placed the spaceship with the avatar at the center, hinting at its clickability with a green halo affordance.

Listed below the ship are geographically close space stations. Additionally, to bolster both learnability and memorability, we use a combination of icons and text to provide visual recognition and ease of first use.

One of the most important aspects of using #ME is actually exploring the world and interacting with other players. We decided to design the space station/house screen by combining what all of us felt was important in displaying a “virtual community”. We did not want the actions to feel foreign to the user, so we kept some very standard features – for example, player avatars can be clicked to view a player profile through which messages/friend requests can be sent. Additionally, viewing a friend’s profile shows relevant information about the relationship between you and your friend. Being able to display, physically, the friendship between you and another user was important to fostering a sense of community.


Eyetracking



For this project, we were very fortunate in that we were able to utilize an eye tracker, as part of a session with a user in order to further understand how users interact with our prototype. Using Python, we generated heatmaps, which depicts where the participant’s gaze was fixed, and animated replays of the participant’s gaze motion on each screen. The code for the visualization can be accessed here, but some screenshots. The screenshots with the red dots are the finished results of the replay animations, and the multi-colored screenshots are the heatmaps.

Eyetracking Screenshot 1
Eyetracking Screenshot 2
Eyetracking Screenshot 3
Eyetracking Screenshot 4
Eyetracking Screenshot 5
Eyetracking Screenshot 6
Eyetracking Screenshot 7
Eyetracking Screenshot 8


Reflections



The Iterative Design project was a great experience in collaborating with others in the UI/UX field. I gained a grasp on the full design process, from barebone sketching to high fidelity prototyping. As a designer, it was exciting to integrate many of the different design principles from class into a single final product. I’m also grateful for the opportunity to utilize eye-tracking technology; combining design with data collection and visualization offered new perspectives. Were we to take this project further, our next step would be to actually fully program the app using a language like React or Swift – but for now, that is job for the original #ME team!