Wikify mobile designer

About the project

The Wikify designer is an app for making custom designs based on textual content.

As the text has to be permissively licensed or in the public domain, the app is focused on Wikipedia. Also, Wikify will work just as well with text from any other Wikimedia Foundation project — like Wikiquote or Wikibooks.

My role

The Wikify designer is a one-man project — I was in charge of the full UX design process.

Project goal

Text-based designs are fun and it's hard to make a good looking one from scratch and with tools meant for images.

The Wikify designer will immediately present the user with beautiful default and editable designs based on any text of their choice. A one-tap toolbox will then let the user customize the design in a mobile-friendly way.

Understanding the user

I conducted and evaluated one round of UX research. People who already wear expressive garments were selected for the initial interviews.

The research confirmed that they would be the early adopters of the product, especially with mobile as the primary platform.

Based on the initial research insights, I was able to create two personas with their goals and problem statements.

Persona: Daria

Daria is an outgoing, thoughtful and opinionated student who needs an original way to express her statement, because she needs to draw attention to a particular issue.

User journey map

Mapping Daria’s user journey revealed the need for inspiration at hand, easy iteration on designs and good defaults.

Initial design concepts

I was ideating the initial designs with the following objectives:

• If the user comes up with their own idea, I want to present catching default designs as early in the flow as possible.

• If the user gets stuck, there has to be some inspiration at hand.

Wireframes

As this was the first assignment of the program, I was still terribly slow in Figma. I spent a lot of time iterating the ideas on paper before moving on to digital wireframes.

Some of the ideas made it to the digital wireframes:

Mockups

Having identified a subset of the digital wireframes that satisfied the original ideas the best, I created a set of mockups and a high-fidelity prototype to use in a usability study.

User testing

I conducted an unmoderated (remote) usability study with 5 participants. The usability studies outlined the lack of inspiration as the main pain point.

Apart from that, users also commented on the difficulty of coming up with an interesting theme and on the lack of screen area to review the design properly.

Based on that feedback, I iterated the whole design process until I had a full set of new mockups for the main user flow, connected into a high-fidelity prototype.

Conclusion

Now that it's 3 months after I've finished this design, I see some issues:

• Does a design this simple really need two sets of app colours, in both a primary and a secondary shade?

• The visuals feel odd and, um, old — kinda sad for an app that hasn't left Figma yet. It needs to stick to the guidelines and common practices. Now that the Material Design 3 is out, I guess I'm getting my hands dirty soon again.