Design challenge

There is a movement around the world to turn our urban areas into "smart cities". Smart cities utilize the Internet of Things (IOT) to learn how the city can improve its design, as well as provide better services to its citizens. One of the challenges of smart cities is providing citizens with energy while also being environmentally friendly. My team looked at this problem at the individual level, thinking about how each citizen could contribute. Hence, the problem statement that my team designed around was…

How might we create a system to improve energy conservation habits among young adults?

Solution: Wittie

Our solution, named Wittie, is a smartphone application that is integrated with smart outlets in the home. The use of smart outlets lets any device, smart or not, to be plugged into the outlet and be connected to the Wittie system. Our goal with Wittie is to allow people to manage their energy usage and learn how to improve their energy conservation habits. Our target audience for the beginning stages of our application would be people who live in apartments.

Wittie uses gamification to encourage users to improve their energy conservation habits. It does this by giving each user a character called Wittie that is a plant. Each user can choose their own plant and choose how they want to take care of the plant. There are various activities and games that reward users with points that help their plant grow. There is also a leaderboard so that users can tell how they're doing compared to their neighbors and friends. A global view also shows how the entire apartment is doing.

Wittie landing page.png

Group Members

Xinbei Hu

Yarid Lopez

My contributions

As part of the team, I took part in every aspect of the design process. I aided in the initial secondary research by finding a number of articles on the topic of smart cities and energy conservation. Once we moved onto the design stage of our process, I created 8 sketches in the beginning stages of our design and created 2 storyboards. For the final storyboards, I finalized all of the copy. When the team began to create wireframes, I was responsible for creating the wireframes of our application's Challenge flow. I was also responsible for creating a paper prototype for the same flow.

Once user testing began, I tested one friend, and helped to analyze the results of our testing during our affinity diagramming process. After we had finalized our research insights, I took part in the creation of the final wireframes. After receiving feedback from our colleagues, and moving on to the final design stages, I was responsible for creating the final user flows for the Wittie application and formatting and combining all the parts of our design specification.


Secondary research

Our team began with researching smart cities and what the various problems with smart cities were. We then chose a few topics we'd be interested in. After a few days of deliberation, we narrowed our problem space down to energy conservation. From there, we did a lot of research into how energy conservation is done today, promoted, and how much energy our in-home appliances really use. Then, with initial research done, we began to ideate some solutions.


When the team began the ideation process, each team member sketched out several ideas. I sketched out 8 ideas that are shown below. A description of each idea can be found by clicking on the images.


After each team member spent a few days sketching out ideas, we narrowed down our ideas into 6 ideas that we would like to pursue. The team then drew 6 storyboards. I was responsible for finalizing all of the copy for all of the boards.

Paper prototype

After we created our storyboards we presented our ideas to our classmates and professors. They gave us feedback and we took that feedback to help us narrow down our idea from 7 to 3 ideas that would be combined into one mobile application that was later named Wittie. After finalizing the details on our idea, we created a paper prototype to test with potential users.

Usability testing

We tested our prototype with friends, family members, and roommates to get feedback on our application prototype. There was some confusion on some of our menu pages and the purpose of the app, which we took note of. After the research was done, our team discussed how to resolve the issues we saw during testing.


After discussing the feedback from our testing, redesigning the screens, and testing again, the three of us began creating wireframes and user flows of our final application. Each team member created a user flow for one part of the application we were creating as well as creating the wireframes for each point of the flow. The flow I was responsible for is the Challenge part of our application. The focus of our Challenge flow was to get users to compete with their friends and their neighbors in the apartment. I've put the entire Challenge flow including the user flow below.

Spec document / Final presentation

After receiving feedback on our wireframes, we began to create our specification document, making sure to include our finalized wireframes and user flows. I was responsible for organizing the specification document, which I created and formatted in Adobe InDesign. One teammate created the interaction flow for the entire application, another created the final wireframes and style guide, and I created the final user flows. Once the specification document was finished, all of us worked on our final presentation.

Software / Skills used:

Sketch, InDesign, Double Diamond Design Method, Illustrator, Paper Prototyping, User Flow Diagrams, Usability Testing, Storyboarding, Affinity Diagramming